/* Dig to China, one-page site.
   The page is a dig: each section is one layer of the ground, coloured from the game's
   palette (design doc, section 12), from the backyard sky down to the glowing core.
   Everything here is drawn with CSS. There are no pictures on the page. */

/* ---------- Fonts (both SIL Open Font License, files in /fonts) ---------- */

@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colours, type and spacing ---------- */

:root {
  /* the backyard */
  --sky-top: #8fcdee;
  --sky-low: #d4ecf8;
  --lawn: #6fa84f;
  --lawn-dark: #4f8a35;

  /* the ground, top to bottom (each one checked for readable text) */
  --topsoil: #4a2e1e;
  --subsoil: #c49a5e;
  --clay: #a54a1c;
  --limestone: #d9cba8;
  --granite: #a89a9f;
  --crust: #3a3a3f;
  --mantle-upper: #56662a;
  --mantle-lower: #5b2c6f;
  --core-hot: #ffd54f;
  --core: #ffa726;
  --core-edge: #e8742a;

  /* everything else */
  --clay-button: #a54a1c;
  --clay-deeper: #7e3613;
  --wood: #8b5a35;
  --wood-dark: #5e3a1f;
  --cream: #fbf5e6;
  --paper: #f3e9d2;
  --sticky: #fbe38a;
  --ink: #2e2116;
  --ink-soft: #4d3b2c;

  --hand: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* one spacing scale for the whole page */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  /* the keyboard-focus ring; dark layers switch it to sticky-note yellow */
  --focus: var(--ink);
}

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

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

body {
  margin: 0;
  background: var(--topsoil);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;   /* 19 px */
  line-height: 1.6;
  overflow-x: hidden;
}

p { margin: 0 0 var(--space-3); }

h1, h2, h3, dt {
  font-family: var(--hand);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}
h2 { font-size: clamp(2.2rem, 6vw, 3.1rem); }

/* Links: underlined; the underline gets thicker on hover. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.12s ease;
}
a:hover { text-decoration-thickness: 3px; }
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Text column: about 60 to 70 characters a line. */
.wrap { width: min(1080px, 100% - 2 * var(--space-3)); margin-inline: auto; }
.narrow { width: min(33.5rem, 100% - 2 * var(--space-3)); }
.medium { width: min(46rem, 100% - 2 * var(--space-3)); }

/* ---------- Layers ---------- */

.layer {
  position: relative;
  padding: var(--space-8) 0 var(--space-7);
  background-color: var(--bg);
  /* a scatter of small specks so each layer reads as dirt or rock, not paint */
  background-image:
    radial-gradient(circle at 30% 40%, var(--speck-a) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, var(--speck-b) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--speck-a) 0 1px, transparent 2px);
  background-size: 41px 37px, 29px 53px, 67px 61px;
}

/* A rough, bumpy edge where each layer meets the one above it. */
.layer:not(.hero)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 16px;
  background: var(--bg);
  -webkit-mask: radial-gradient(18px 14px at 50% 100%, #000 98%, transparent) 0 0 / 34px 100%,
                radial-gradient(11px 9px at 50% 100%, #000 98%, transparent) 13px 4px / 23px 100%;
          mask: radial-gradient(18px 14px at 50% 100%, #000 98%, transparent) 0 0 / 34px 100%,
                radial-gradient(11px 9px at 50% 100%, #000 98%, transparent) 13px 4px / 23px 100%;
}

.topsoil   { --bg: var(--topsoil);   --speck-a: rgba(122, 90, 58, 0.55); --speck-b: rgba(20, 10, 4, 0.5);  color: var(--cream); --focus: var(--sticky); }
.subsoil   { --bg: var(--subsoil);   --speck-a: rgba(140, 122, 102, 0.6); --speck-b: rgba(255, 245, 220, 0.35); }
.clay      { --bg: var(--clay);      --speck-a: rgba(126, 54, 19, 0.6);  --speck-b: rgba(30, 26, 26, 0.35); color: var(--cream); --focus: var(--sticky); }
.limestone { --bg: var(--limestone); --speck-a: rgba(239, 230, 207, 0.9); --speck-b: rgba(160, 82, 45, 0.3); }
.granite   { --bg: var(--granite);   --speck-a: rgba(242, 239, 244, 0.8); --speck-b: rgba(80, 64, 72, 0.55); }
.crust     { --bg: var(--crust);     --speck-a: rgba(232, 185, 35, 0.55); --speck-b: rgba(255, 122, 26, 0.35); color: var(--cream); --focus: var(--sticky); }
.mantle    { --bg: var(--mantle-upper); --speck-a: rgba(221, 246, 255, 0.4); --speck-b: rgba(255, 90, 31, 0.45); color: var(--cream); --focus: var(--sticky); }
.core      { --bg: var(--core-edge); --speck-a: rgba(255, 213, 79, 0.5);  --speck-b: rgba(255, 255, 255, 0.35); }

/* The mantle runs from olive green (upper) to violet (lower) */
.mantle {
  background-image:
    radial-gradient(circle at 30% 40%, var(--speck-a) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, var(--speck-b) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--mantle-upper) 0%, #4f4a3c 30%, var(--mantle-lower) 70%, #4a2052 100%);
  background-size: 41px 37px, 29px 53px, 100% 100%;
}

/* ---------- Hero: the sky over the backyard ---------- */

.hero {
  overflow: hidden;
  padding: var(--space-7) 0 0;
  text-align: center;
  background-color: var(--sky-low);
  background-image: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 80%);
  background-size: 100% 100%;
}

.sun {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c9 0%, #ffe48a 45%, rgba(255, 228, 138, 0) 70%);
  animation: sun-pulse 7s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.07); opacity: 0.88; }
}

.cloud {
  position: absolute;
  height: 38px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.85);
  animation: cloud-drift 80s ease-in-out infinite alternate;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud::before { width: 56px; height: 56px; top: -28px; left: 22px; }
.cloud::after  { width: 72px; height: 72px; top: -40px; left: 62px; }
.cloud-1 { width: 170px; top: 90px;  left: 5%; }
.cloud-2 { width: 140px; top: 210px; right: 8%; opacity: 0.7; animation-duration: 110s; animation-direction: alternate-reverse; }
.cloud-3 { width: 110px; top: 330px; left: 14%; opacity: 0.55; animation-duration: 95s; }
@keyframes cloud-drift {
  from { transform: translateX(-30px); }
  to   { transform: translateX(90px); }
}

@media (max-width: 700px) {
  .cloud-1 { top: 18px; left: -40px; }
  .cloud-2, .cloud-3 { display: none; }
  .sun { top: -120px; right: -110px; }
}

.hero-inner { position: relative; padding-bottom: var(--space-6); }

.hero h1 {
  font-size: clamp(4rem, 13vw, 8.5rem);
  margin: 0;
  letter-spacing: 0.01em;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.55);
}

.motto {
  font-family: var(--hand);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.2;
  color: var(--clay-deeper);
  margin: 0 0 var(--space-3);
  transform: rotate(-2deg);
}

.pitch {
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  max-width: 32em;
  margin: 0 auto var(--space-5);
  color: var(--ink-soft);
}

/* The big button. Lifts on hover, presses down when clicked. */
.big-button {
  display: inline-block;
  font-family: var(--hand);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1;
  padding: 0.5em 1.2em 0.55em;
  color: #fff;
  background: var(--clay-button);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--clay-deeper), 0 10px 20px rgba(60, 30, 10, 0.25);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.big-button:hover {
  background: #93401a;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--clay-deeper), 0 14px 24px rgba(60, 30, 10, 0.28);
}
.big-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--clay-deeper), 0 4px 10px rgba(60, 30, 10, 0.2);
}
.big-button:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 5px;
}

/* The sticky note under the button. It wiggles when you point at it. */
.demo {
  width: fit-content;
  margin: var(--space-5) auto 0;
  font-family: var(--hand);
  font-size: clamp(1.4rem, 3.6vw, 1.6rem);
  line-height: 1.2;
  background: var(--sticky);
  padding: 6px 16px 7px;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 10px rgba(46, 33, 22, 0.18);
}
.demo:hover { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  25%      { transform: rotate(2deg); }
  50%      { transform: rotate(-3deg); }
  75%      { transform: rotate(1deg); }
}

.coming {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin: var(--space-4) auto 0;
  max-width: 34em;
}

/* The back fence and the lawn at the bottom of the hero. */
.fence {
  position: relative;
  height: 46px;
  background:
    linear-gradient(#efe9dc, #efe9dc) 0 12px / 100% 5px no-repeat,
    linear-gradient(#efe9dc, #efe9dc) 0 30px / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, #f8f4ea 0 12px, transparent 12px 30px);
  -webkit-mask: linear-gradient(#000, #000) 0 8px / 100% 100% no-repeat,
                repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 30px) 0 0 / 100% 8px no-repeat;
          mask: linear-gradient(#000, #000) 0 8px / 100% 100% no-repeat,
                repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 30px) 0 0 / 100% 8px no-repeat;
  opacity: 0.9;
}
.lawn {
  height: 56px;
  background: linear-gradient(180deg, var(--lawn) 0 60%, var(--lawn-dark) 100%);
  -webkit-mask: radial-gradient(14px 10px at 50% 0, transparent 98%, #000) 0 0 / 22px 100%;
          mask: radial-gradient(14px 10px at 50% 0, transparent 98%, #000) 0 0 / 22px 100%;
  margin-top: -14px;
  position: relative;
}

/* ---------- About (topsoil) ---------- */

.about { text-align: center; }
.about h2 { color: var(--cream); }

/* ---------- Feature layers ---------- */

.subsoil h2, .limestone h2 { color: var(--ink); }
.granite h2 { color: #2a1f24; }

/* ---------- Follow the dig (the crust): wooden signs ---------- */

.follow { text-align: center; }

.signs {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.signs a {
  display: block;
  font-family: var(--hand);
  font-size: 1.75rem;
  line-height: 1.1;
  padding: 14px 10px 12px;
  color: var(--cream);
  background-color: var(--wood);
  /* faint wood grain */
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 3px, rgba(0, 0, 0, 0.05) 3px 6px);
  border-radius: 6px;
  text-decoration: none;
  box-shadow: inset 0 -4px 0 var(--wood-dark), 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.1s ease;
}
.signs li:nth-child(odd) a  { transform: rotate(-1deg); }
.signs li:nth-child(even) a { transform: rotate(1deg); }
.signs a span {
  display: block;
  font-family: var(--body);
  font-size: 0.875rem;
  margin-top: 2px;
}
.signs a:hover {
  background-color: #9a6640;
  transform: rotate(0deg) translateY(-3px);
  box-shadow: inset 0 -4px 0 var(--wood-dark), 0 8px 16px rgba(0, 0, 0, 0.4);
}
.signs a:active {
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 var(--wood-dark), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.signs a:focus-visible {
  outline: 3px solid var(--sticky);
  outline-offset: 4px;
}

/* ---------- Fair questions (the mantle) ---------- */

.faq { margin: var(--space-4) 0 var(--space-7); }
.faq div {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.faq div:nth-child(odd)  { transform: rotate(-0.6deg); }
.faq div:nth-child(even) { transform: rotate(0.5deg); }
.faq dt { font-size: 1.75rem; margin-bottom: var(--space-1); }
.faq dd { margin: 0; }

/* The press note, pinned up */
.note {
  background: var(--sticky);
  color: var(--ink);
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  text-align: center;
  transform: rotate(1.5deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  position: relative;
  --focus: var(--ink);
}
.note::before {
  /* the red pin */
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #d23b2a;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.note h2 { font-size: 2.2rem; margin-bottom: var(--space-2); color: var(--ink); }
.note p { margin: 0; overflow-wrap: anywhere; }
.note a { color: var(--clay-deeper); font-weight: 700; }

/* ---------- Footer: the core, glowing ---------- */

.footer {
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
  color: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 100%, #fff3c4 0%, var(--core-hot) 25%, var(--core) 55%, transparent 100%);
  background-size: 100% 100%;
}
.footer-big {
  font-family: var(--hand);
  font-size: 2.2rem;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.footer .small {
  font-size: 0.9375rem;
  max-width: 40em;
  margin: var(--space-4) auto 0;
}
.footer a { font-weight: 700; }

/* ---------- The depth meter ----------
   On computers and tablets: a sticky note in the bottom-right corner.
   On phones: a thin strip along the top edge (further down). */

.meter {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  min-width: 104px;
  padding: 6px 12px 7px;
  background: var(--sticky);
  color: var(--ink);
  font-family: var(--hand);
  text-align: center;
  line-height: 1;
  transform: rotate(2deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.meter::before {
  /* a strip of tape */
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 40px;
  height: 14px;
  margin-left: -20px;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-4deg);
}
.meter-label { display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.meter-value { display: block; font-size: 1.7rem; margin: 2px 0 1px; font-variant-numeric: tabular-nums; }
.meter-layer { display: block; font-size: 0.95rem; color: var(--ink-soft); }

/* Phones: the strip sits in its own band at the top of the screen. The page is pushed
   down by the same height, so the strip never sits on top of any text. */
@media (max-width: 600px) {
  :root { --strip: 26px; }
  body { padding-top: var(--strip); }
  html { scroll-padding-top: var(--strip); }

  .meter {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--strip);
    min-width: 0;
    padding: 0 12px 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  .meter::before { display: none; }
  /* how far down the page you are, as a clay-coloured line along the bottom of the strip */
  .meter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--clay);
    transform-origin: left;
    transform: scaleX(var(--dig, 0));
  }
  .meter-label { font-size: 0.75rem; }
  .meter-value { font-size: 1.15rem; margin: 0; }
  .meter-layer { font-size: 1rem; margin-left: auto; }
}

/* ---------- People who ask their computer for less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 404 page (404.html) ---------- */

.lost { background: var(--crust); }
.lost-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.lost-main h1 { font-size: clamp(3rem, 11vw, 5.5rem); color: var(--cream); }
.lost-main p { margin-bottom: var(--space-5); }
.lost-main .big-button:focus-visible { outline-color: var(--sticky); }