/* Rolling Fun — thesises page. Uses tokens and components from site.css.
   Reads like a document: the thesis as a spec, the horizon as a ruler, the
   focus areas as an index, and the Requests for Startups as an RFC on paper. */

/* ---------- Page head: the thesis ---------- */

.th-head__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.th-head__t { grid-column: 1 / span 9; max-width: 13em; }

/* On this page: a quiet contents list beside the title. */
.th-toc { grid-column: 10 / span 3; padding-bottom: 0.4em; }
.th-toc ol { border-top: 1px solid var(--line); }
.th-toc li { border-bottom: 1px solid var(--line); }
.th-toc a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  transition: color 0.25s ease;
}
.th-toc .num { font-size: 13px; color: var(--muted); transition: color 0.25s ease; }
@media (hover: hover) {
  .th-toc a:hover { color: var(--ink); }
  .th-toc a:hover .num { color: var(--signal); }
}
.th-horizon:focus,
.th-focus:focus,
.th-rfs:focus,
.th-reach:focus { outline: none; }
.th-narrow { display: none; }
.th-head__thesis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 18px;
  margin-top: clamp(56px, 7vw, 112px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.th-head__label { grid-column: 1 / span 3; padding-top: 0.5em; }
.th-head__main { grid-column: 5 / span 8; }
.th-head__lede {
  max-width: 25em;
  font-size: clamp(22px, 2.15vw, 34px);
  font-weight: var(--w-display);
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

/* The same thesis, read as parameters. */
.th-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 2.6fr);
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.th-spec > div { padding: 16px 16px 0 0; }
.th-spec > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.th-spec dt { font-size: 14px; font-weight: 450; line-height: 1.4; color: var(--muted); }
.th-spec dd { margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; letter-spacing: -0.01em; }
.th-spec .num { font-size: 0.98em; }
.th-spec .odo > span { line-height: 1; }

/* ---------- § 01 Horizon: the statement and a forty-year ruler ---------- */

.th-head + .th-horizon { padding-top: clamp(40px, 5vw, 72px); }
/* Sits one step under the page title, so the h1 stays the largest line on the page. */
.th-horizon__t { max-width: 12.5em; font-size: clamp(38px, 5vw, 84px); line-height: 0.98; letter-spacing: -0.042em; }

.th-ruler {
  --tick: var(--line-2);
  position: relative;
  margin-top: clamp(64px, 8vw, 128px);
}
.th-ruler__top { position: relative; height: 34px; }
.th-ruler__nowlabel,
.th-ruler__targetlabel {
  position: absolute;
  bottom: 10px;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 450;
  white-space: nowrap;
}
/* Full-width track with the label at "now", so it can slide in on transform alone. */
.th-ruler__nowlabel { left: 0; width: 100%; padding-left: calc(var(--now) * 100%); color: var(--ink); }
.th-ruler__targetlabel { left: 75%; color: var(--signal); }

/* Forty years: decade ticks at 70%, one tick per year at 28%. */
.th-ruler__ticks {
  position: relative;
  height: clamp(72px, 9vw, 140px);
  border-bottom: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 25%) left bottom / 100% 70% no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 2.5%) left bottom / 100% 28% no-repeat;
}
.th-ruler__ticks::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 70%;
  background: var(--muted);
}
/* The years left between now and 2050, one signal tick each. */
.th-ruler__run {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--signal) 0 1px, transparent 1px 2.5%) left bottom / 100% 44% no-repeat;
  clip-path: inset(0 25% 0 calc(var(--now) * 100%));
}
/* The 2050s: hatched in signal. */
.th-ruler__band {
  position: absolute;
  left: 75%;
  width: 25%;
  top: 0;
  bottom: 0;
  border-top: 2px solid var(--signal);
  border-left: 1px solid var(--signal);
  background: repeating-linear-gradient(-45deg, var(--signal) 0 1px, transparent 1px 7px);
  opacity: 0.8;
}
.th-ruler__now {
  position: absolute;
  inset: 0;
}
.th-ruler__now::before {
  content: "";
  position: absolute;
  left: calc(var(--now) * 100%);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
}
.th-ruler__now::after {
  content: "";
  position: absolute;
  left: calc(var(--now) * 100% - 3px);
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
/* With JS the ticks are elements (see thesises.js); the gradients above are the fallback. */
.has-ticks .th-ruler__ticks { background: none; }
.has-ticks .th-ruler__run { display: none; }
.th-tick { position: absolute; bottom: 0; width: 1px; height: 28%; background: var(--tick); }
.th-tick--dec { height: 70%; background: var(--muted); }
.th-tick--run { height: 44%; background: var(--signal); transform-origin: 50% 100%; }
.th-ruler__scale { position: relative; height: 34px; font-size: 13px; color: var(--muted); }
.th-ruler__scale span { position: absolute; top: 12px; left: calc(var(--x) * 100%); transform: translateX(-50%); }
.th-ruler__scale span:first-child { transform: none; }
.th-ruler__scale span:last-child { transform: translateX(-100%); }
.th-ruler__cap { margin-top: 28px; }

/* Played once as the ruler comes into view: now slides in from 2020,
   the remaining years fill toward 2050, the 2050s open out. */
.motion .th-ruler__now,
.motion .th-ruler__nowlabel { transition: transform 1.4s var(--ease); }
.motion .th-ruler__run { transition: clip-path 1.2s var(--ease) 0.7s; }
.motion .th-ruler__band { transform-origin: 0 50%; transition: transform 1.1s var(--ease) 0.35s; }
.motion .th-ruler:not(.is-live) .th-ruler__now,
.motion .th-ruler:not(.is-live) .th-ruler__nowlabel { transform: translate3d(calc(var(--now) * -100%), 0, 0); }
.motion .th-ruler:not(.is-live) .th-ruler__run { clip-path: inset(0 calc(100% - var(--now) * 100%) 0 calc(var(--now) * 100%)); }
.motion .th-ruler:not(.is-live) .th-ruler__band { transform: scaleX(0); }
.motion .th-tick--run { transition: transform 0.5s var(--ease) var(--d, 0s), opacity 0.3s ease var(--d, 0s); }
.motion .th-ruler:not(.is-live) .th-tick--run { transform: scaleY(0); opacity: 0; }

/* ---------- § 02 Focus areas: a typographic index ---------- */

.th-focus__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(72px, 9vw, 144px);
}
.th-focus__t { grid-column: 1 / span 10; }
.th-focus__body { grid-column: 7 / span 5; font-size: 17px; }

.th-areas { border-bottom: 1px solid var(--line); }
.th-area {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  padding: clamp(24px, 2.6vw, 36px) 0 clamp(40px, 4.6vw, 72px);
  border-top: 1px solid var(--line);
}
.th-area__t {
  grid-column: 1 / span 8;
  font-size: clamp(34px, 4.7vw, 76px);
  font-weight: var(--w-display);
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.th-area__x { grid-column: 9 / span 4; padding-top: 0.5em; }
/* The row's rule: drawn in when the list arrives, lit in signal under the pointer. */
.th-area,
.rfs { position: relative; border-top-color: transparent; }
.th-area::before,
.rfs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}
.th-area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .th-area:hover::after { transform: none; }
}

/* Rows arrive as a block: the rule draws, the title rises out of its mask,
   then the copy prints, each row 70ms after the one before (--rd, set in thesises.js). */
.motion [data-th-row]::before { transform: scaleX(0); transition: transform 1.1s var(--ease) var(--rd, 0s); }
.motion [data-th-row] .w__i { transition-delay: calc(var(--rd, 0s) + 0.08s + var(--i, 0) * 0.03s); }
.motion [data-th-row] .th-row__f { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.8s ease, transform 1s var(--ease); transition-delay: calc(var(--rd, 0s) + var(--fd, 0.22s)); }
.motion [data-th-row].is-in::before,
.motion [data-th-row].is-in .th-row__f { opacity: 1; transform: none; }
/* Flicked past, or reached by keyboard: no half-built rows. */
.motion [data-th-row].is-now::before,
.motion [data-th-row].is-now .w__i,
.motion [data-th-row].is-now .th-row__f { transition: none; }

/* ---------- § 03 Request for Startups (paper) ---------- */

.th-rfs__head { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.th-rfs__head .lede { color: var(--muted); }

.th-rfs__doc {
  margin-top: clamp(72px, 8vw, 128px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

/* Contents: sticky beside the document on wide screens. */
.rfs-toc {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--nav-h) + 56px);
}
/* The label sits above the rule, so the contents and the document share one top line. */
.rfs-toc__h { position: absolute; left: 0; bottom: 100%; margin-bottom: 12px; }
.rfs-toc ol { border-top: 1px solid var(--line); }
.rfs-toc li { border-bottom: 1px solid var(--line); }
.rfs-toc a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 8px 0 8px 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  transition: color 0.25s ease;
}
.rfs-toc a .num { font-size: 11px; color: var(--muted); }
.rfs-toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--signal-ink);
  transform: scale(0);
  transition: transform 0.4s var(--ease);
}
.rfs-toc a[aria-current="true"] { color: var(--ink); }
.rfs-toc a[aria-current="true"]::before { transform: none; }
.rfs-toc a[aria-current="true"] .num { color: var(--signal-ink); }
@media (hover: hover) {
  .rfs-toc a:hover { color: var(--ink); }
}

.rfs-list { grid-column: 5 / span 8; border-bottom: 1px solid var(--line); }
.rfs {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 6fr);
  column-gap: var(--gap);
  padding: clamp(26px, 2.6vw, 36px) 0 clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.rfs:focus { outline: none; }
.rfs__id { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 0.55em; }
.rfs__no { font-size: 14px; font-weight: 450; color: var(--muted); transition: color 0.3s ease; }

/* Their emoji stay, printed in grey on the paper until you reach for them. */
.rfs__emoji { display: inline-grid; font-size: clamp(30px, 2.5vw, 38px); line-height: 1; }
.rfs__e {
  grid-area: 1 / 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  white-space: nowrap;
  transition: opacity 0.5s var(--ease);
}
.rfs__e--g { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: 0.86; }
.rfs__e--c { opacity: 0; }
/* The request at the reading line (every device), or under the pointer, shows its colour. */
.rfs.is-current .rfs__e--c,
.rfs:hover .rfs__e--c,
.rfs:focus-within .rfs__e--c,
.rfs:target .rfs__e--c { opacity: 1; }
.rfs.is-current .rfs__e--g,
.rfs:hover .rfs__e--g,
.rfs:focus-within .rfs__e--g,
.rfs:target .rfs__e--g { opacity: 0; }
.rfs.is-current .rfs__no,
.rfs:hover .rfs__no,
.rfs:focus-within .rfs__no { color: var(--signal-ink); }

.rfs__t {
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: var(--w-display);
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.rfs__x {
  max-width: 33em;
  margin-top: 14px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.rfs__x .link { color: var(--ink); }
.rfs__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.rfs__hash { font-size: 12.5px; }
.rfs__mail {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 450;
  color: var(--ink);
  transition: color 0.25s ease;
}
.rfs__mail span[aria-hidden] { display: inline-block; margin-left: 9px; transform: translate3d(-3px, 0, 0); transition: transform 0.45s var(--ease); }
@media (hover: hover) {
  .rfs__mail:hover { color: var(--signal-ink); }
  .rfs__mail:hover span[aria-hidden] { transform: none; }
}

/* ---------- § 04 Reach out ---------- */

.th-cta { min-height: clamp(360px, 36vw, 520px); display: flex; flex-direction: column; justify-content: flex-end; }
.th-cta__t { position: relative; max-width: 14em; }
.th-cta .cta__actions { position: relative; }
.th-cta__note { position: relative; margin-top: 22px; }
.th-cta__note .link { color: var(--muted); }
/* The mark, very faint, rolls as the page scrolls. */
.th-cta__mark {
  position: absolute;
  top: clamp(-120px, -8vw, -40px);
  right: clamp(-140px, -6vw, -40px);
  width: clamp(280px, 38vw, 560px);
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Choreography: heading first, then supporting lines, then controls ---------- */

.motion .th-head .th-toc { --d: 0.3s; }
.motion .th-head .th-head__label { --d: 0.42s; }
.motion .th-head .th-head__lede { --d: 0.5s; }
.motion .th-head .th-spec { --d: 0.6s; }
.motion [data-th-list] li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.6s ease, transform 0.8s var(--ease); transition-delay: calc(var(--d, 0s) + 0.1s + var(--li, 0) * 0.07s); }
.motion [data-th-list].is-in li { opacity: 1; transform: none; }
.motion [data-th-list] li:nth-child(2) { --li: 1; }
.motion [data-th-list] li:nth-child(3) { --li: 2; }
.motion [data-th-list] li:nth-child(4) { --li: 3; }
.motion .th-focus__body { --d: 0.28s; }
.motion .th-rfs__head .lede { --d: 0.18s; }
.motion .th-ruler__cap { --d: 0.5s; }
.motion .th-cta .cta__actions { --d: 0.36s; }
.motion .th-cta__note { --d: 0.48s; }

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .th-head__t { grid-column: 1 / -1; }
  .th-toc { grid-column: 1 / -1; margin-top: clamp(36px, 6vw, 56px); padding-bottom: 0; }
  .th-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .th-toc a { padding: 13px 0; }
  .th-head__label { grid-column: 1 / -1; padding-top: 0; }
  .th-head__main { grid-column: 1 / -1; }
  .th-focus__t { grid-column: 1 / -1; }
  .th-focus__body { grid-column: 4 / -1; }
  .th-area__t { grid-column: 1 / span 7; }
  .th-area__x { grid-column: 8 / -1; padding-top: 0.3em; }
  .rfs-toc { position: static; grid-column: 1 / -1; margin-bottom: clamp(40px, 6vw, 64px); }
  .rfs-toc__h { position: static; margin: 0 0 12px; }
  .rfs-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: var(--gap); }
  .rfs-toc a { padding-top: 13px; padding-bottom: 13px; }
  .rfs__mail { min-height: 44px; }
  .th-rfs__doc { margin-top: clamp(48px, 7vw, 72px); }
  .rfs-list { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .th-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-spec > div { padding: 14px 12px 14px 0; }
  .th-spec > div + div { padding-left: 0; border-left: 0; }
  .th-spec > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .th-spec > div:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .th-wide { display: none; }
  .th-narrow { display: inline; }
  .th-rfs .index__meta { white-space: nowrap; }

  .th-focus__body { grid-column: 1 / -1; }
  .th-area { row-gap: 16px; }
  .th-area__t,
  .th-area__x { grid-column: 1 / -1; }
  .th-area__x { padding-top: 0; }

  .rfs { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .rfs__id { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-top: 0; }
  .rfs__emoji { font-size: 30px; }

  .th-cta { min-height: 0; }
}

@media (max-width: 480px) {
  .th-toc ol { grid-template-columns: minmax(0, 1fr); }
  .rfs-toc ol { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .rfs-toc li:last-child { border-bottom: 0; }
  .th-ruler__scale span:nth-child(2),
  .th-ruler__scale span:nth-child(4) { display: none; }
}
@media (max-width: 400px) {
  .th-ruler__targetlabel { left: auto; right: 0; }
}