/* Dinosaur Time Gap — a cutaway of the ground, and you dig down through it.

   The earth sliced open: topsoil, then rock, then deeper rock, each layer in
   its own colour with grit and cracks and bones in it. Scrolling is digging,
   and every animal you pass is something you dug up.

   About the colour. The International Commission on Stratigraphy assigns every
   period a hex and the first two versions of this page used them raw, which is
   why both looked like a textbook: they are printed-chart pastels. The HUE is
   still the data and is kept exactly — Cretaceous green, Jurassic blue,
   Permian orange — and script.js pushes saturation and lightness into one dark
   band so the whole page reads as rock. Being right about the palette is worth
   nothing if nobody stays to look at it.

   The animals are not black any more either. PhyloPic ships solid black paths;
   here they are CSS masks painted bone-white, which is both more legible
   against dark rock and what a fossil in the ground actually looks like. */

:root {
  --ink: #2a2118;
  --page: #f7efe0;
  --grey: #7d7466;
  --rule: #2a2118;
  --pop: #ffb224;
  --bone: #f4ead5;
  --soil: #4a3626;
  --sky: #bfe3f2;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f7efe0;
    --page: #1a140e;
    --grey: #9c9182;
    --rule: #f7efe0;
    --sky: #1d3b4a;
  }
}
:root[data-theme="dark"] {
  --ink: #f7efe0;
  --page: #1a140e;
  --grey: #9c9182;
  --rule: #f7efe0;
  --sky: #1d3b4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 26px 16px 56px; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.tagline { margin: 6px 0 0; font-size: 1rem; color: var(--grey); }

/* A silhouette painted whatever colour we like, because it is a mask and not
   a picture. */
.shape-mask, .bone, .chip {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.bone { background: var(--bone); }
.chip { background: var(--ink); width: 40px; height: 24px; flex: 0 0 auto; }

/* ---- the sentence, cut into the topsoil ------------------------------ */

.answer {
  margin: 22px -16px 0;
  padding: 22px 16px 26px;
  background:
    radial-gradient(circle at 18% 30%, rgba(0,0,0,0.16) 2px, transparent 3px),
    radial-gradient(circle at 72% 62%, rgba(0,0,0,0.14) 3px, transparent 4px),
    radial-gradient(circle at 44% 84%, rgba(0,0,0,0.12) 2px, transparent 3px),
    var(--soil);
  color: #f7efe0;
}
.verdict {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5.2vw, 2rem);
  line-height: 1.16;
}
.toyou { margin: 8px 0 0; font-size: 1.05rem; color: rgba(247,239,224,0.85); }
.bigger {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--pop);
  color: #2a2118;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
}
.bigger:empty, .toyou:empty { display: none; }
.dig-cue {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pop);
}
.dig-cue::after { content: " ↓"; }

/* ---- the two pickers ------------------------------------------------ */

.pick {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 22px 0 0;
}
.slot { position: relative; min-width: 0; }
.slot label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--grey);
  margin: 0 0 4px;
}
.slot input {
  width: 100%;
  border: 3px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 10px 14px;
}
.slot input:focus { outline: 3px solid var(--pop); outline-offset: 2px; }

#go {
  border: 3px solid var(--rule);
  border-radius: var(--radius);
  background: var(--pop);
  color: #241c14;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--rule);
}
#go:active { transform: translateY(3px); box-shadow: none; }

.matches {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 3px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  max-height: 260px;
  overflow: hidden auto;
}
.matches[hidden] { display: none; }
.matches li + li { border-top: 2px solid rgba(125,116,102,0.3); }
.matches button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 12px;
  cursor: pointer;
}
.matches button:hover, .matches button:focus { background: var(--pop); color: #241c14; outline: 0; }
.matches img { width: 40px; height: 24px; object-fit: contain; flex: 0 0 auto; }

/* PhyloPic silhouettes are solid black, so on the dark ground they would be a
   black animal on a dark page. The ones standing on a coloured band are fine —
   every ICS colour is light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .matches img { filter: invert(1); }
}
:root[data-theme="dark"] .matches img { filter: invert(1); }

/* ---- the sentence ---------------------------------------------------- */

.answer { margin: 26px 0 0; }
.verdict {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5.2vw, 2rem);
  line-height: 1.16;
}
.toyou { margin: 8px 0 0; font-size: 1.05rem; }
.bigger {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--pop);
  color: #241c14;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 999px;
}
.bigger:empty, .toyou:empty { display: none; }

/* ---- the dig ----------------------------------------------------------

   Not a picture of the distance. The distance. The shaft is as deep as the
   gap is long, a hundred and fifteen pixels to the million years, and getting
   to the bottom takes as long as it takes. */

/* Air between the sentence cut into the topsoil and the shaft below it.
   Two full-bleed blocks butted together read as one confused block. */
.journey { margin: 26px -16px 0; position: relative; }
.journey[hidden] { display: none; }

/* The depth gauge, stuck to the top for the whole descent, taking the colour
   of whatever rock is currently going past. */
.hud {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 10px 16px 12px;
  border-bottom: 3px solid rgba(0,0,0,0.35);
  background: var(--soil);
  color: #f7efe0;
  transition: background 260ms linear;
}
.hud-year {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5.6vw, 2.2rem);
  line-height: 1;
}
.hud-bar {
  margin: 5px 0 4px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.38);
  overflow: hidden;
}
.hud-bar i { display: block; height: 100%; background: var(--pop); width: 0; }
.hud-note {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: rgba(247,239,224,0.9);
}

.road { position: relative; overflow: hidden; }

/* A layer of rock: its own colour, grit scattered through it, and a torn top
   edge so the layers do not stack like a bar chart. */
.layer {
  position: absolute;
  left: 0; right: 0;
  background-blend-mode: normal;
}
.layer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 14px;
  background: inherit;
  clip-path: polygon(0 40%, 7% 12%, 15% 58%, 24% 20%, 33% 66%, 42% 26%,
                     51% 70%, 60% 22%, 69% 62%, 78% 18%, 87% 56%, 95% 24%,
                     100% 48%, 100% 100%, 0 100%);
  transform: translateY(-13px);
}
.layer::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Grit in the rock. Three gradients on a large tile rather than six on a
     small one: this element can be eight thousand pixels tall and every extra
     tile is another few hundred rasterised stops. */
  background:
    radial-gradient(circle at 14% 22%, rgba(0,0,0,0.30) 3px, transparent 4px),
    radial-gradient(circle at 63% 55%, rgba(255,255,255,0.09) 3px, transparent 4px),
    radial-gradient(circle at 37% 81%, rgba(0,0,0,0.26) 4px, transparent 5px);
  background-size: 320px 420px;
  pointer-events: none;
}
.layer span {
  position: sticky;
  /* Clear of the depth gauge, which is 99px in English and will be taller in
     a language that needs two lines for it. */
  top: 124px;
  display: block;
  padding: 12px 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: rgba(255,255,255,0.34);
  letter-spacing: 0.02em;
}

/* Something buried, then dug up. */
/* The right gutter clears the core sample, which sits 6px from the edge
   and is 12px wide — the right lane was running underneath it. */
.stop { position: absolute; left: 0; right: 0; padding: 0 30px 0 16px; }
.trav {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.trav .bone {
  width: clamp(120px, 36vw, 230px);
  height: clamp(74px, 22vw, 140px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}
.trav b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: #2a2118;
  background: var(--bone);
  border-radius: 999px;
  padding: 3px 18px;
}
.trav i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.72);
}

/* Buried until you reach it, then it comes up out of the rock. */
.stop .trav { opacity: 0; transform: translateY(26px); }
.stop.found .trav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.2,.9,.3,1.2);
}
@media (prefers-reduced-motion: reduce) {
  .stop .trav { opacity: 1; transform: none; }
  .stop.found .trav { transition: none; }
}

/* Every stop hangs from its own depth line rather than straddling it. A
   half-height shift upwards is what used to walk the first one back into the
   animal standing at the top of the shaft. */
.stop.mate { transform: translateY(0); }
.stop.mate .trav .bone { width: clamp(86px, 24vw, 155px); height: clamp(54px, 15vw, 96px); }
/* The bottom of the shaft: its own block below the road, in the rock the
   animal you were digging for is actually buried in. */
.arrival { position: relative; padding: 40px 16px 52px; }
.arrival:empty { display: none; }
.stop.finish { position: static; transform: none; padding: 0; }
.stop.finish .trav b { background: var(--pop); }
.stop.finish .trav i {
  font-size: clamp(1rem, 4.2vw, 1.5rem);
  font-weight: 800;
  color: var(--bone);
  max-width: 22ch;
  line-height: 1.15;
}
.passed {
  margin: 10px auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}
/* The core sample: how deep you have got, down the right edge. */
.core {
  position: absolute;
  top: 0; bottom: 0; right: 6px;
  width: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  overflow: hidden;
  z-index: 6;
}
.core i { display: block; width: 100%; height: 0; background: var(--pop); }

/* ---- the two cards --------------------------------------------------- */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 0; }
.card {
  border: 4px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
  background: var(--page);
}
.card .shape { display: block; height: 116px; padding: 12px; }
/* The silhouette is a masked div now, not an <img>, so it has no intrinsic
   size — left to itself it collapses to nothing and the card shows an empty
   block of colour. */
.card .shape .bone { width: 100%; height: 100%; }
.card .body { padding: 12px 14px 14px; border-top: 4px solid var(--rule); }
.card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}
.card .when { margin: 3px 0 0; font-size: 0.86rem; }
.card .meta { margin: 5px 0 0; font-size: 0.8rem; color: var(--grey); }
.card .flag {
  margin: 9px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  background: #ffe08a;
  color: #241c14;
  border-radius: 10px;
  padding: 6px 10px;
}
.card .artist { margin: 8px 0 0; font-size: 0.7rem; color: var(--grey); }

/* ---- facts ----------------------------------------------------------- */

.facts { margin: 34px 0 0; }
.facts h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
}
.facts ul { margin: 0; padding: 0; list-style: none; }
.facts li {
  padding: 11px 14px;
  margin: 0 0 8px;
  font-size: 0.98rem;
  border: 3px solid var(--rule);
  border-radius: 14px;
}
.facts .more { margin: 12px 0 0; font-family: var(--display); font-weight: 700; }

.archive { margin: 24px 0 0; font-family: var(--display); font-weight: 700; }
.archive a, .facts .more a { color: var(--ink); }

/* ---- foot ------------------------------------------------------------ */

footer {
  margin: 44px 0 0;
  padding: 16px 0 0;
  border-top: 3px solid var(--rule);
  font-size: 0.78rem;
  color: var(--grey);
}
footer p { margin: 0 0 8px; }
.foot-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; }
.foot-nav[hidden] { display: none; }
footer a { color: var(--grey); }

/* ---- the two list pages share this sheet ----------------------------- */

.value-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table-group {
  margin: 30px 0 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
}
.value-table th, .value-table td {
  text-align: left;
  vertical-align: middle;
  padding: 9px 12px 9px 0;
  border-bottom: 2px solid rgba(125,116,102,0.35);
}
.value-table thead th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--grey);
  border-bottom: 3px solid var(--rule);
}
.value-table .col-name { font-family: var(--display); font-weight: 700; width: 38%; }
.row-shape { width: 38px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 9px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .row-shape { filter: invert(1); }
}
:root[data-theme="dark"] .row-shape { filter: invert(1); }
.value-table .col-n { width: 3rem; color: var(--grey); }
.backlink { margin: 18px 0; font-family: var(--display); font-weight: 700; }
.backlink a { color: var(--ink); }

@media (max-width: 560px) {
  .pick { grid-template-columns: 1fr; }
  #go { width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .strata { height: 520px; }
  .beast { right: 10px; }
  .value-table .col-name { width: 46%; }
}


/* ---- names that go somewhere ------------------------------------------ */

/* Every animal name links out to an article about it. The site says when it
   lived and who named it; what it WAS is somebody else's page. */
.trav b.has-link a,
.card h3.has-link a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(42,33,24,0.35);
}
.trav b.has-link a:hover,
.card h3.has-link a:hover { text-decoration-color: currentColor; }
.value-table .col-name a { color: inherit; text-decoration-color: rgba(107,90,68,0.5); }

/* A text box with a hundred and thirty-eight things behind it should look
   like it opens. */
.slot { position: relative; }
.slot::after {
  content: "";
  position: absolute;
  right: 14px; bottom: 19px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ink);
  pointer-events: none;
  opacity: 0.55;
}
.slot input { padding-right: 34px; }

/* Two lanes down the shaft. Animals at the same depth stand beside each other
   instead of on top of each other — a lot of them share a modal interval. */
.stop.lane-l .trav { align-items: flex-start; max-width: 47%; text-align: left; }
.stop.lane-r .trav { align-items: flex-end; max-width: 47%; margin-left: 53%; text-align: right; }
.stop.mate .trav .bone { width: clamp(76px, 20vw, 130px); height: clamp(48px, 12vw, 80px); }
@media (max-width: 560px) {
  .stop.lane-l .trav, .stop.lane-r .trav { max-width: 49%; }
  .stop.lane-r .trav { margin-left: 51%; }
  .stop.mate .trav b { font-size: 0.85rem; padding: 2px 10px; }
  .stop.mate .trav i { font-size: 0.68rem; }
}

/* ---- sharing ---------------------------------------------------------- */

/* Each button in its own network's colour, because a share button nobody
   recognises is a share button nobody presses. Built by /share.js; the markup
   is the same on every site here, so this block is portable. */
.share { margin: 18px 0 0; }
.share[hidden] { display: none; }
.share-heading {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--brand, #4a4034);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.share-btn:hover, .share-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.share-copy, .share-more {
  color: var(--ink, #2a231a);
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.share-copy.done { color: #fff; background: #2f7d32; box-shadow: none; }
@media (max-width: 560px) {
  .share-btn { padding: 6px 13px; font-size: 0.8rem; }
}


/* Two animals in the same ground: no depth to report, so the counter and the
   core sample down the edge have nothing to say and are not drawn. */
.journey.together .hud,
.journey.together .core,
.journey.together .arrival { display: none; }
.journey.together .road { overflow: hidden; }
.journey.together .stop.mate .trav .bone { width: clamp(96px, 26vw, 170px); height: clamp(60px, 16vw, 105px); }


/* The dates under the animals at the two ends of the dig. A step quieter than
   the caption above them, because the name is what you are looking for. */
.trav i.when {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  opacity: 0.78;
}
@media (max-width: 560px) { .trav i.when { font-size: 0.62rem; } }