/* =========================================================
   The Domesticated deep dive.

   One column, read top to bottom. Every chapter is the same:
   clip, "in the video", "going deeper", "how sure are we",
   and its row of the fox checklist. Nothing is folded away.

   Colours and type are the other deep dives' (deepdive.css).
   Fonts are set up in /fonts/fonts.css, linked before this file.
   ========================================================= */

@font-face{
  font-family: "RuneScape UF";
  src: url("/fonts/runescape-uf.woff2") format("woff2");
  font-display: swap;
}

:root{
  --bg:      #141618;
  --slate:   #262C30;
  --yellow:  #FFF000;
  --cyan:    #00CCCC;
  --salmon:  #FC6A6A;
  --green:   #42FF00;
  --gold:    #FFD700;
  --grey:    #BABABA;
  --soft:    #d8d8d8;

  --title: "RuneScape UF", "Courier New", ui-monospace, monospace;
  --body:  "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lead:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --step: 8px;
}

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

html{ background: var(--bg); scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  color: #fff;
  background:
    linear-gradient(to right, rgba(38,44,48,.35) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(to bottom, rgba(38,44,48,.35) 1px, transparent 1px) 0 0/34px 34px,
    var(--bg);
}
img, video{ max-width: 100%; height: auto; display: block; }
a{ color: var(--cyan); }
a:hover{ color: var(--yellow); }

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

/* the stepped pixel corners every panel shares */
.px{
  background: var(--slate);
  padding: var(--step);
  clip-path: polygon(
    0 calc(var(--step)*2), var(--step) calc(var(--step)*2), var(--step) var(--step),
    calc(var(--step)*2) var(--step), calc(var(--step)*2) 0,
    calc(100% - var(--step)*2) 0, calc(100% - var(--step)*2) var(--step),
    calc(100% - var(--step)) var(--step), calc(100% - var(--step)) calc(var(--step)*2),
    100% calc(var(--step)*2), 100% calc(100% - var(--step)*2),
    calc(100% - var(--step)) calc(100% - var(--step)*2),
    calc(100% - var(--step)) calc(100% - var(--step)),
    calc(100% - var(--step)*2) calc(100% - var(--step)),
    calc(100% - var(--step)*2) 100%, calc(var(--step)*2) 100%,
    calc(var(--step)*2) calc(100% - var(--step)), var(--step) calc(100% - var(--step)),
    var(--step) calc(100% - var(--step)*2), 0 calc(100% - var(--step)*2)
  );
}
.px > .px__in{ background: rgba(0,0,0,.85); padding: 18px 18px 20px; }

/* ---------- top ---------- */

.back{
  display: inline-block; margin: 18px 0 0;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  border-bottom: 2px solid var(--slate); padding: 6px 0 2px;
}

.hero{ display: flex; align-items: flex-end; gap: 12px; padding: 26px 0 0; }
.hero__text{ flex: 1 1 auto; min-width: 0; padding-bottom: 18px; }
.kicker{
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 8px;
}
.hero h1{
  font-family: var(--title); font-weight: 400;
  color: var(--yellow); text-shadow: 4px 4px 0 #000;
  font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.02;
  margin: 0;
}
.hero__prof{ width: clamp(96px, 24vw, 170px); flex: 0 0 auto; }

.claim{
  font-family: var(--lead); font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem); line-height: 1.4;
  margin: 18px 0 0;
}
.claim em{ color: var(--yellow); font-style: normal; }
.lede{ color: var(--soft); margin: 12px 0 0; }

.pixbtn{
  display: block; width: 100%;
  font-family: var(--title); font-size: 1.15rem; text-align: center;
  color: #000; background: var(--yellow); text-decoration: none;
  border: 4px solid #000; box-shadow: 0 0 0 3px var(--yellow);
  padding: 14px 16px; margin: 22px 0 0;
}
.pixbtn:hover{ background: #fff; color: #000; box-shadow: 0 0 0 3px #fff; }
@media (min-width: 560px){ .pixbtn{ display: inline-block; width: auto; min-width: 280px; } }

/* ---------- the path down the page ---------- */

.path{ margin: 30px 0 0; }
.path h2{
  font-family: var(--title); font-weight: 400; font-size: 1rem;
  color: var(--grey); letter-spacing: .06em; margin: 0 0 10px;
}
.path ol{ list-style: none; margin: 0; padding: 0; counter-reset: step; }
.path li{ counter-increment: step; border-top: 2px solid var(--slate); }
.path li:last-child{ border-bottom: 2px solid var(--slate); }
.path a, .path span{
  display: flex; gap: 12px; align-items: baseline;
  padding: 12px 2px; text-decoration: none; color: #fff;
}
.path a::before, .path span::before{
  content: counter(step);
  font-family: var(--title); color: var(--gold); min-width: 1.2em;
}
.path span{ color: #7d8388; }
.path small{ margin-left: auto; color: var(--grey); font-size: .75rem; white-space: nowrap; }
.path a:hover{ color: var(--yellow); }

/* ---------- a chapter ---------- */

.chapter{ padding: 64px 0 0; }
.chapter__no{
  font-family: var(--title); font-size: .95rem; letter-spacing: .08em;
  color: var(--cyan); margin: 0 0 4px;
}
.chapter h2{
  font-family: var(--title); font-weight: 400;
  color: var(--yellow); text-shadow: 3px 3px 0 #000;
  font-size: clamp(1.8rem, 6.4vw, 2.6rem); line-height: 1.05;
  margin: 0;
}
.chapter__where{ color: var(--gold); font-family: var(--title); font-size: 1rem; margin: 8px 0 0; }
.chapter__sci{ color: var(--grey); font-size: .85rem; margin: 4px 0 0; }
.chapter__sci i{ color: #fff; }

.clip{ margin: 18px 0 0; --step: 8px; }
.clip video{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

.label{
  font-family: var(--title); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .06em;
  margin: 30px 0 8px;
}
.label--video{ color: var(--grey); }
.label--deeper{ color: var(--green); }
.label--sure{ color: var(--gold); }

.recap{ color: var(--soft); margin: 0; }

/* a line from the prof himself, under a recap */
.profnote{
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0 0; padding: 12px 14px;
  border: 2px dashed var(--slate); color: #fff; font-style: italic;
}
.profnote img{ width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; }

/* one new fact */
.fact{ border-left: 4px solid var(--slate); padding: 2px 0 2px 14px; margin: 0 0 22px; }
.fact h3{
  font-family: var(--lead); font-weight: 700;
  font-size: 1.08rem; line-height: 1.3; margin: 0 0 6px; color: #fff;
}
.fact p{ margin: 0 0 6px; color: var(--soft); }
.fact b{ color: var(--yellow); font-weight: 700; }
.src{ font-size: .8rem; color: var(--grey); margin: 0; }
.src a{ color: var(--cyan); }

/* a small bar chart inside a fact */
.bars{ list-style: none; margin: 10px 0 12px; padding: 0; }
.bars li{ display: grid; grid-template-columns: 1fr 3em; gap: 2px 8px; align-items: center; margin: 0 0 10px; font-size: .9rem; }
.bars span{ grid-column: 1 / -1; color: #fff; }
.bars i{ display: block; height: 14px; background: var(--salmon); box-shadow: 3px 3px 0 #000; }
.bars b{ font-family: var(--title); font-weight: 400; color: var(--salmon); text-align: right; }

/* how sure are we */
.sure p{ margin: 0 0 10px; color: var(--soft); }
.sure p:last-child{ margin-bottom: 0; }
.stamp{
  display: inline-block;
  font-family: var(--title); font-size: .8rem; letter-spacing: .05em;
  padding: 1px 6px; margin-right: 6px;
  border: 2px solid currentColor; white-space: nowrap; vertical-align: 1px;
}
.stamp--solid{ color: var(--green); }
.stamp--debated{ color: var(--yellow); }
.stamp--argued{ color: var(--salmon); }

/* ---------- the generations slider ---------- */

.gens{ margin: 26px 0 0; }
.gens__title{ font-family: var(--title); color: var(--yellow); font-size: 1.15rem; margin: 0 0 12px; }
.gens__big{ font-family: var(--title); color: var(--gold); font-size: 2.4rem; line-height: 1; margin: 0; }
.gens__big small{ font-size: .9rem; color: var(--grey); margin-left: 8px; }
.gens__what{ font-family: var(--lead); font-weight: 700; margin: 10px 0 4px; min-height: 1.4em; }
.gens__note{ color: var(--soft); margin: 0; min-height: 4.7em; font-size: .95rem; }
.gens input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 8px 0 0; background: transparent; cursor: grab;
}
.gens input[type=range]::-webkit-slider-runnable-track{ height: 6px; background: var(--slate); }
.gens input[type=range]::-moz-range-track{ height: 6px; background: var(--slate); }
.gens input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px;
  background: var(--yellow); border: 4px solid #000; box-shadow: 0 0 0 3px var(--yellow);
}
.gens input[type=range]::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 0;
  background: var(--yellow); border: 4px solid #000; box-shadow: 0 0 0 3px var(--yellow);
}
.gens__ends{ display: flex; justify-content: space-between; font-size: .75rem; color: var(--grey); }

/* ---------- the fox checklist ---------- */

.check{ margin: 30px 0 0; }
.check__title{ font-family: var(--title); color: var(--yellow); font-size: 1.15rem; margin: 0 0 4px; }
.check__sub{ color: var(--grey); font-size: .85rem; margin: 0 0 12px; }
.check table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.check th{
  font-family: var(--title); font-weight: 400; font-size: .8rem; letter-spacing: .05em;
  color: var(--grey); text-align: center; padding: 0 0 6px; width: 3.6em;
}
.check th:first-child{ text-align: left; width: auto; }
.check td{ border-top: 2px solid var(--slate); padding: 9px 0; text-align: center; }
.check td:first-child{ text-align: left; }
.check td a{ color: #fff; text-decoration: none; border-bottom: 2px dotted var(--grey); }
.yes{ color: var(--green); font-family: var(--title); }
.half{ color: var(--gold); font-family: var(--title); font-size: .85em; }
.wait{ color: #5d6368; font-family: var(--title); }
.check tr.is-here td:first-child{ color: var(--yellow); font-weight: 700; }
.check tr.is-later td:first-child{ color: #8d9398; }
.check__foot{ color: var(--grey); font-size: .8rem; margin: 10px 0 0; }

/* ---------- bottom ---------- */

.ask{ margin: 72px 0 0; text-align: center; }
.ask__title{ font-family: var(--title); color: var(--yellow); font-size: 1.4rem; margin: 0 0 12px; }
.ask p{ margin: 0 0 6px; color: var(--soft); }
.ask .pixbtn{ margin-top: 18px; }
.outlinks{ display: flex; flex-direction: column; gap: 4px; margin: 34px 0 0; }
.outlinks a{ padding: 10px 0; border-bottom: 2px solid var(--slate); color: #fff; text-decoration: none; }
.outlinks a:hover{ color: var(--yellow); }

.next{
  margin: 64px 0 0; padding: 18px 0 0; border-top: 4px solid var(--slate);
  color: var(--grey); font-size: .9rem;
}
.next b{ font-family: var(--title); font-weight: 400; color: #fff; }
.foot{ padding: 40px 0 90px; font-size: .85rem; color: var(--grey); }
.foot a{ color: var(--grey); }