/* zTommyzGaming: one stylesheet for every page.
   The page is a cross-section of a dig site. The lantern-lit pit sits on top,
   soil strata run underneath, the museum layer holds the finished games,
   and everything ends on bedrock. */

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fixed in both modes: the pit and the bedrock are always dark. */
  --pit: #24170e;
  --bone: #f3e6c8;
  --bone-muted: #cdb894;
  --lantern: #f2b33d;
  --title: #f7c948;
  --title-edge: #120b06;
  --bezel: #24160c;
  --bedrock: #1b120b;
  --bedrock-seam: #3d2a1b;
  --bedrock-ink: #efe2c4;
  --bedrock-muted: #bba886;
  --cream: #fbfaf8;
  --wood: #3b2416;
  --brass-hi: #d2a956;
  --velvet: #8e2430;

  /* Light mode: sun-dried strata. */
  --topsoil: #d8bd8f;
  --topsoil-seam: #a98250;
  --topsoil-ink: #22150c;
  --topsoil-muted: #4e3826;
  --topsoil-link: #6e1a25;

  --museum: #efe6d3;
  --museum-seam: #8e2430;
  --museum-ink: #22150c;
  --museum-muted: #5f4935;
  --museum-link: #7d1f2b;

  --plate: #fbf7ee;
  --brass: #9c7a36;
  --marble: #f8f2e4;
  --marble-edge: #cdbd9c;
  --btn-bg: #8e2430;
  --btn-ink: #fbf3e3;
  --btn-hover: #a52d3b;
  --btn-ring: #d2a956;

  --display: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 1rem;
  --measure: 40rem;
  --edge: 2.25rem;

  /* Scattered pebbles, used as soil texture. */
  --pebbles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23000' fill-opacity='.07'%3E%3Cellipse cx='24' cy='30' rx='7' ry='4.5'/%3E%3Cellipse cx='140' cy='18' rx='4' ry='3'/%3E%3Cellipse cx='92' cy='86' rx='9' ry='5.5'/%3E%3Cellipse cx='190' cy='120' rx='5' ry='3.5'/%3E%3Cellipse cx='46' cy='162' rx='4.5' ry='3'/%3E%3Cellipse cx='160' cy='196' rx='8' ry='5'/%3E%3Cellipse cx='12' cy='104' rx='3' ry='2'/%3E%3Cellipse cx='112' cy='150' rx='3' ry='2.2'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.05'%3E%3Cellipse cx='92' cy='83' rx='5' ry='2'/%3E%3Cellipse cx='160' cy='193' rx='4' ry='1.8'/%3E%3Cellipse cx='24' cy='28' rx='3.5' ry='1.5'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --topsoil: #3a2618;
    --topsoil-seam: #56391f;
    --topsoil-ink: #f0e3c6;
    --topsoil-muted: #c9b48f;
    --topsoil-link: #f2b33d;

    --museum: #2e2016;
    --museum-seam: #6b1c26;
    --museum-ink: #f0e3c6;
    --museum-muted: #c2ae8a;
    --museum-link: #f2b33d;

    --plate: #33241a;
    --brass: #c49b4d;
    --marble: #d9cdb4;
    --marble-edge: #8f7e60;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --topsoil: #3a2618;
  --topsoil-seam: #56391f;
  --topsoil-ink: #f0e3c6;
  --topsoil-muted: #c9b48f;
  --topsoil-link: #f2b33d;

  --museum: #2e2016;
  --museum-seam: #6b1c26;
  --museum-ink: #f0e3c6;
  --museum-muted: #c2ae8a;
  --museum-link: #f2b33d;

  --plate: #33241a;
  --brass: #c49b4d;
  --marble: #d9cdb4;
  --marble-edge: #8f7e60;
  color-scheme: dark;
}

@media (min-width: 40rem) {
  :root { --gutter: 2rem; --edge: 3rem; }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--museum);
  color: var(--museum-ink);
  font: 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: clip;
}
body.home { background: var(--bedrock); }

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

p { margin: 0 0 1rem; max-width: var(--measure); }
p, li { text-wrap: pretty; }

h1, h2, h3, .wordmark, .motto {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; margin-bottom: .9rem; }
h3 { font-size: 1.4375rem; line-height: 1.15; }

.inner {
  max-width: calc(70rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Bands: each one sets its own colours ---------- */

.pit {
  --link: var(--bone);
  --focus: var(--lantern);
  position: relative;
  background: var(--pit) var(--pebbles);
  color: var(--bone);
}
.topsoil {
  --link: var(--topsoil-link);
  --focus: var(--topsoil-link);
  --muted: var(--topsoil-muted);
  --band: var(--topsoil);
  --seam: var(--topsoil-seam);
  color: var(--topsoil-ink);
}
.museum {
  --link: var(--museum-link);
  --focus: var(--museum-link);
  --muted: var(--museum-muted);
  --band: var(--museum);
  --seam: var(--museum-seam);
  color: var(--museum-ink);
}
.bedrock, .home .site-foot {
  --link: var(--lantern);
  --focus: var(--lantern);
  --muted: var(--bedrock-muted);
  --band: var(--bedrock);
  --seam: var(--bedrock-seam);
  color: var(--bedrock-ink);
}

/* A stratum: its colour, plus a ragged top edge and a thin seam of
   another layer, both drawn up over the band above. */
.stratum {
  position: relative;
  background: var(--band) var(--pebbles);
  padding: 2.5rem 0 calc(var(--edge) + 3rem);
}
.stratum::before,
.stratum::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  pointer-events: none;
}
.stratum::after {
  height: calc(var(--edge) + .45rem + 1px);
  background: var(--seam);
  z-index: 1;
}
.stratum::before {
  height: calc(var(--edge) + 1px);
  background: var(--band) var(--pebbles);
  z-index: 2;
}
.topsoil::before, .topsoil::after {
  clip-path: polygon(0 62%, 5% 44%, 11% 58%, 18% 30%, 26% 48%, 33% 36%, 41% 64%, 49% 40%, 57% 52%, 64% 18%, 72% 42%, 80% 30%, 87% 56%, 94% 34%, 100% 46%, 100% 100%, 0 100%);
}
.museum::before, .museum::after {
  clip-path: polygon(0 40%, 7% 56%, 15% 34%, 22% 50%, 31% 22%, 39% 46%, 46% 38%, 54% 60%, 62% 32%, 70% 50%, 77% 26%, 85% 44%, 92% 30%, 100% 54%, 100% 100%, 0 100%);
}
.bedrock::before, .bedrock::after {
  clip-path: polygon(0 48%, 6% 30%, 14% 52%, 20% 40%, 29% 62%, 36% 28%, 45% 44%, 52% 20%, 60% 48%, 69% 36%, 76% 58%, 84% 26%, 91% 50%, 100% 32%, 100% 100%, 0 100%);
}

.sub { margin-bottom: 2.5rem; }

/* ---------- Header bar ---------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--bone);
  text-decoration: none;
}
.mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: .15rem;
  border-radius: .75rem;
  background: var(--cream);
}
.wordmark { font-size: 1.125rem; line-height: 1; }

.bar nav { display: flex; gap: .25rem 1.25rem; }
.bar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--bone-muted);
  text-decoration: none;
}
.bar nav a:hover { color: var(--bone); text-decoration: underline; }

/* ---------- Hero: the lantern-lit pit ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: calc(var(--edge) + 2.5rem);
}

.hero-art {
  order: -1;
  position: relative;
  width: min(17rem, 78%);
  margin: -.5rem 0 0 -1.25rem;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, rgb(242 179 61 / .42), rgb(242 179 61 / .12) 55%, rgb(242 179 61 / 0));
}
.hero-art img {
  position: relative;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
}

.hero h1 {
  color: var(--title);
  font-size: clamp(3.25rem, 13.5vw, 7.5rem);
  line-height: .9;
  letter-spacing: -0.015em;
  text-shadow:
    0 .045em 0 var(--title-edge),
    .03em .03em 0 var(--title-edge),
    -.03em .03em 0 var(--title-edge);
}
.motto {
  margin-top: .9rem;
  font-size: clamp(1.375rem, 4.4vw, 1.875rem);
  line-height: 1.1;
  color: var(--bone);
}
.lede {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
  max-width: 34rem;
}
.status {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 1.75rem 0 .35rem;
  font-weight: 700;
}
.status::before {
  content: "";
  flex: none;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 .7rem .2rem rgb(242 179 61 / .55);
  transform: translateY(-.05rem);
}
.fine { color: var(--bone-muted); margin: 0 0 0 1.35rem; }

@media (min-width: 52rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: center;
    column-gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: calc(var(--edge) + 4.5rem);
  }
  .hero-art { order: 0; width: 100%; margin: 0; }
}

/* The one moment of motion: Topo's helmet lamp switches on. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art::before { animation: lamp 1.7s ease-out .25s both; }
  .hero-art img { animation: lit 1.7s ease-out .25s both; }
}
@keyframes lamp {
  0%   { opacity: 0; }
  14%  { opacity: .85; }
  22%  { opacity: .2; }
  36%  { opacity: 1; }
  46%  { opacity: .55; }
  100% { opacity: 1; }
}
@keyframes lit {
  0%   { filter: brightness(.2); }
  14%  { filter: brightness(.85); }
  22%  { filter: brightness(.4); }
  36%  { filter: brightness(1.08); }
  46%  { filter: brightness(.8); }
  100% { filter: none; }
}

/* ---------- Dig, discover, display ---------- */

.steps {
  display: grid;
  gap: 2rem;
}
.steps figure {
  margin: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}
.steps img {
  width: 100%;
  border: 5px solid var(--bezel);
  border-radius: 1.1rem;
  background: var(--bezel);
}
.steps h3 { font-size: 1.75rem; margin: .2rem 0 .4rem; }
.steps p { margin: 0; }

.wings { margin-top: 4.5rem; }

@media (min-width: 46rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .steps.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
  .steps figure { display: block; }
  .steps img { width: min(100%, 16rem); border-width: 7px; border-radius: 1.75rem; }
  .steps h3 { margin-top: 1.25rem; }
}

/* ---------- Museum: the older games on display ---------- */

.hall {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 50rem) {
  .hall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 3.5rem; }
}

.exhibit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-margin-top: 1.5rem;
}
.exhibit .placard {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.exhibit .play { margin-top: auto; }
.hero-text .play { margin: .65rem 0 .5rem; }

/* Each game stands on a display table, like the ones in the game's own museum:
   a marble slab on top, a dark wood front, a brass nameplate. */
.plinth {
  position: relative;
  z-index: 1;
  margin: 0 0 -1rem 1.75rem;
}
.plinth img {
  width: 6rem;
  border-radius: 22%;
  box-shadow: 0 .35rem 0 -.1rem rgb(0 0 0 / .25);
}
@media (min-width: 40rem) {
  .plinth img { width: 7.5rem; }
}

.placard {
  --link: var(--lantern);
  --focus: var(--lantern);
  --muted: #d4c09b;
  position: relative;
  margin: 1.75rem .6rem 0;
  padding: 1.6rem 1.25rem 1.4rem;
  background: var(--wood);
  color: var(--bone);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 0 0 5px var(--wood), inset 0 0 0 6px color-mix(in srgb, var(--brass-hi) 55%, transparent);
}
.placard::before {
  content: "";
  position: absolute;
  left: -.6rem;
  right: -.6rem;
  bottom: 100%;
  height: 1.5rem;
  background: linear-gradient(var(--marble) 68%, var(--marble-edge) 68%);
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
}
@media (min-width: 40rem) { .placard { padding: 1.75rem 1.75rem 1.6rem; } }

.placard h3 {
  display: inline-block;
  padding: .2rem .75rem .1rem;
  border-radius: 2px;
  background: var(--brass-hi);
  color: var(--pit);
  font-size: 1.3125rem;
}
.hook { margin: .9rem 0 .6rem; font-weight: 700; line-height: 1.4; }
.placard p:not(.hook) { color: var(--muted); }
.placard p:last-of-type { margin-bottom: 1.25rem; }

.play {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1.15rem .45rem;
  border-radius: .5rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: inset 0 0 0 1px var(--btn-ring);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.play:hover { background: var(--btn-hover); }
.play:focus-visible { border-radius: .5rem; }

/* ---------- Bedrock: promises, people, contact ---------- */

.promises {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 3rem;
  max-width: 60rem;
}
@media (min-width: 44rem) { .promises { grid-template-columns: 1fr 1fr; } }

.promises h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.3125rem;
  margin-bottom: .35rem;
}
.promises h3::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  background: var(--lantern);
  transform: rotate(45deg);
}
.promises p { margin: 0; color: var(--muted); }

.last {
  display: grid;
  gap: 1rem 3rem;
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--bedrock-seam);
  max-width: 60rem;
}
.last h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
.last section + section { margin-top: 2rem; }
@media (min-width: 44rem) {
  .last { grid-template-columns: 1fr 1fr; }
  .last section + section { margin-top: 0; }
}

.contact {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
}
.contact dt { color: var(--muted); }
.contact dd { margin: 0; }

/* ---------- Footer ---------- */

.site-foot {
  font-size: .9375rem;
  color: var(--muted);
}
.home .site-foot { padding: 0 0 2.5rem; background: var(--bedrock); }
.site-foot p { margin: 0; max-width: none; }
.site-foot a { margin-left: 1rem; }

/* ---------- Inner pages: a reading room on the museum layer ---------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bedrock);
}
.page main { flex: 1; }
.page .museum,
.page .museum::before { background-image: none; }
.page .pit { padding-bottom: var(--edge); }
.page main { padding-top: 2.5rem; }
.page .site-foot { padding: 2rem 0 2.5rem; }

.doc { max-width: calc(40rem + 2 * var(--gutter)); margin: 0; }
.doc h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); line-height: 1.02; margin-bottom: .6rem; }
.doc h2 { font-size: 1.375rem; margin: 2.75rem 0 .6rem; }
.doc p, .doc li { margin: 0 0 .9rem; }
.doc ul { padding-left: 1.25rem; margin: 0 0 1rem; max-width: var(--measure); }

.dates { color: var(--muted); font-size: .9375rem; margin-bottom: 2.25rem; }

.lead {
  max-width: var(--measure);
  margin-bottom: 2rem;
  padding: 1.25rem 1.25rem .4rem;
  background: var(--plate);
  border: 1px solid var(--brass);
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px color-mix(in srgb, var(--brass) 45%, transparent);
}
@media (min-width: 40rem) { .lead { padding: 1.5rem 1.75rem .6rem; } }

/* TikTok callback */

.codebox {
  display: block;
  max-width: var(--measure);
  padding: .9rem 1rem;
  background: var(--plate);
  border: 1px solid var(--brass);
  border-radius: 3px;
  font: .9375rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  word-break: break-all;
}
button.play {
  margin: 1rem 0;
  border: 0;
  cursor: pointer;
}

/* 404 */

.lost .play { margin-top: .5rem; }