/* Run to Learn website. Tokens come straight from DESIGN.md: sand and cocoa
   neutrals, brandSage from the app icon, sunset orange for anything you press,
   and the signature hard edge (a solid 4px offset, zero blur). Both fonts are
   the app's own, subset to Latin and Turkish. */

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --sand-50: #fff9f0;
  --sand-100: #fbf0df;
  --sand-400: #d9ba8e;
  --cocoa-500: #8a7462;
  --cocoa-700: #5c4a3a;
  --cocoa-900: #3b2e25;
  --orange-500: #ff8c2e;
  --orange-700: #c95e0c;
  --teal-600: #239e8e;
  --sage: #758162;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand-50);
  color: var(--cocoa-900);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
}

h1 { font-size: 44px; }
h2 { font-size: 27px; margin-top: 40px; }
h3 { font-size: 20px; font-weight: 700; margin-top: 28px; }

p, ul { margin: 0 0 16px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }

a { color: var(--orange-700); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange-500); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.hero {
  background: var(--sage);
  color: var(--sand-100);
  padding: 56px 0 48px;
  text-align: center;
}
.hero h1 { color: var(--sand-100); }
.hero p { color: rgba(251, 240, 223, 0.86); font-size: 19px; margin: 0 auto; max-width: 30em; }
.hero a { color: var(--sand-100); }

/* The figure alone, since the hero band is already the mark's own field. The
   full icon would put a sage tile on sage and read as cut-off lane lines. */
.mark {
  width: 132px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.tagline {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(251, 240, 223, 0.72);
  margin-bottom: 8px;
}

.pill {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--orange-500);
  color: #fff;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--orange-700);
}

/* Body sections */
main { padding: 44px 0 8px; }

.card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 4px 0 var(--sand-400);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.tiers { list-style: none; padding: 0; }
.tiers li { display: flex; gap: 14px; align-items: baseline; }
.tiers strong { font-family: "Baloo 2", system-ui, sans-serif; min-width: 5.2em; color: var(--teal-600); }

.shots {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 8px;
}
.shots img {
  width: 232px;
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--sand-400);
}

.muted { color: var(--cocoa-500); font-size: 15px; }

footer {
  border-top: 2px solid var(--sand-100);
  margin-top: 48px;
  padding: 26px 0 40px;
  color: var(--cocoa-500);
  font-size: 15px;
  text-align: center;
}
footer a { margin: 0 10px; }

/* Document pages */
.doc { padding: 40px 0 0; }
.doc .back {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}
.doc .updated { color: var(--cocoa-500); font-size: 15px; margin-bottom: 28px; }
.doc h1 { margin-top: 18px; }

table { border-collapse: collapse; width: 100%; margin-bottom: 18px; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sand-100); }
th { font-family: "Baloo 2", system-ui, sans-serif; color: var(--cocoa-700); }

@media (max-width: 520px) {
  h1 { font-size: 34px; }
  h2 { font-size: 23px; }
  body { font-size: 16px; }
}