/* =====================================================================
   Snowball Protocol — the paper.

   Two colours and a ground. Ice is the lit accent and it does every job
   except one: ember is the burn, and it appears nowhere the protocol is
   not destroying something. Prose is the serif. Mono is for figures,
   labels, numerals and furniture, and never for a sentence.
   ===================================================================== */

:root {
  --void:      #080A0F;
  --sheet:     #0D1119;
  --raised:    #121826;
  --ink:       #E6EAF2;
  --ink-2:     #98A3B9;
  --ink-3:     #5C6780;
  --rule:      rgba(230, 234, 242, .13);
  --rule-soft: rgba(230, 234, 242, .06);

  --ice:       #74E0FF;
  --ice-deep:  #2A6E8E;
  --ice-glow:  rgba(116, 224, 255, .22);
  --ember:     #FF8A3D;
  --ember-dim: rgba(255, 138, 61, .18);

  /* Two faces. Serif for prose and only prose, mono for everything that
     is a figure, a label or a piece of furniture. A third display face
     was tried here and pulled: the pixel font made the page read as a
     different, louder thing than the document it is. */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.62;
  font-feature-settings: "onum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ice); color: var(--void); }

/* ---------- the hero band ---------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 72vh, 700px);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--void);
}

.hero canvas { display: block; width: 100%; height: 100%; }

/* the plate needs ground. the bedrock it sits over carries bedding
   planes and the italic loses its edges against them. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,10,15,0) 0%, rgba(8,10,15,.28) 58%, rgba(8,10,15,.66) 100%);
}

.hero-plate {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  right: var(--gutter);
  pointer-events: none;
}

.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ice);
}

.koan {
  margin: .5rem 0 0;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 1.18;
  font-style: italic;
  color: #F2F6FF;
  max-width: 22ch;
  text-shadow: 0 1px 2px rgba(8, 10, 15, .95), 0 2px 34px rgba(8, 10, 15, .85);
}

/* ---------- the masthead ----------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}

.mast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
}

.cell {
  background: var(--sheet);
  padding: 1rem var(--gutter) 1.05rem;
  box-shadow: 1px 0 0 var(--rule-soft), 0 1px 0 var(--rule-soft);
}

.cell .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cell .v {
  display: block;
  margin-top: .42rem;
  font-family: var(--mono);
  font-size: clamp(15px, 2vw, 19px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cell .n {
  display: block;
  margin-top: .18rem;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.cell.lead { background: var(--raised); }
.cell.lead .v { color: var(--ice); font-size: clamp(19px, 3vw, 28px); }
.cell.ember .v { color: var(--ember); }

.regime-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: .45rem;
  vertical-align: middle;
  background: var(--ink-3);
}
.regime-dot[data-r="AVALANCHE"] { background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.regime-dot[data-r="SNOWPACK"]  { background: var(--ice);   box-shadow: 0 0 10px var(--ice); }
.regime-dot[data-r="THAW"]      { background: var(--ice-deep); }

/* ---------- the boot --------------------------------------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--void);
  cursor: pointer;
  transition: opacity .55s ease, visibility .55s;
}
.boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.boot-plate {
  position: absolute;
  left: var(--gutter);
  top: clamp(2rem, 12vh, 6rem);
  pointer-events: none;
}

.boot-mark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ice);
  opacity: 0;
  animation: bootIn .6s ease .1s forwards;
}

.boot-say {
  margin: .7rem 0 0;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-style: italic;
  color: var(--ink);
  max-width: 28ch;
  opacity: 0;
  animation: bootIn .7s ease .35s forwards;
}

.boot-read {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: bootIn .6s ease .8s forwards;
}
.boot-read .boot-r { color: var(--ice); }
.boot-read .boot-sep { margin: 0 .7rem; color: var(--rule); }

.boot-skip {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.2rem, 4vh, 2rem);
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  animation: bootIn .5s ease 1.4s forwards;
}

@keyframes bootIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* ---------- the top bar ------------------------------------------ */

/* The tabs used to sit under the masthead, which meant you had to scroll
   past the whole fold before finding out the document had sections. They
   belong at the top, where a nav belongs, and the world nouns do the same
   job a nav of unexplained lowercase nouns always does: imply a bigger
   system than the page is showing you. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(8, 10, 15, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.topbar-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: 0 1.15rem 0 var(--gutter);
  border: 0;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ice);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-mark span { color: var(--ink-3); font-weight: 400; }
.topbar-mark:hover { border-bottom-color: transparent; }

.tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  padding: .92rem .95rem .78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.tabs button:hover { color: var(--ink-2); background: rgba(116, 224, 255, .05); }
.tabs button[aria-selected="true"] {
  color: var(--ice);
  border-bottom-color: var(--ice);
  background: rgba(116, 224, 255, .06);
}
.tabs button:focus-visible { outline: 1px solid var(--ice); outline-offset: -3px; }

@media (max-width: 620px) {
  .topbar-mark span { display: none; }
  .topbar-mark { padding-right: .8rem; }
}
/* ---------- the paper -------------------------------------------- */

/* Bands, borrowed straight from the original snowball page. A long
   document on one flat ground scrolls as a single undifferentiated
   sheet; alternating the ground gives it sections you can feel going
   past, and the 1px rules take care of themselves. */
.paper { padding: 0; }

/* The section IS the column, so a background on it would paint a narrow
   strip down the middle rather than a band. The section goes full width
   and the measure moves to its children, which is also what lets a
   figure break out of the measure later without restructuring anything. */
.paper > section {
  max-width: none;
  padding: clamp(2.6rem, 6.5vh, 4.2rem) var(--gutter);
  margin-bottom: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.paper > section > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.paper > section.wide > * { max-width: 52rem; }
.paper > section:last-child { border-bottom: none; }

/* Tabs, so only one panel is in the document at a time. The band
   alternation went with the scroll: with a single panel showing there is
   nothing to alternate against, so every panel gets the same sheet
   ground and reads as one page out of a binder. */
.paper > section { display: none; background: var(--sheet); min-height: 42vh; }
.paper > section.on {
  display: block;
  animation: panelIn .34s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* the children arrive a beat after the panel, top to bottom */
.paper > section.on > * { animation: panelChild .42s cubic-bezier(.22,.9,.3,1) both; }
.paper > section.on > *:nth-child(1) { animation-delay: .04s; }
.paper > section.on > *:nth-child(2) { animation-delay: .08s; }
.paper > section.on > *:nth-child(3) { animation-delay: .12s; }
.paper > section.on > *:nth-child(4) { animation-delay: .16s; }
.paper > section.on > *:nth-child(5) { animation-delay: .20s; }
.paper > section.on > *:nth-child(n+6) { animation-delay: .24s; }
@keyframes panelChild {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.col { max-width: var(--measure); margin: 0 auto; }
.col.wide { max-width: 52rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .9rem;
}

h2 {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0 0 .85rem;
  color: var(--ink);
}

h2 .sec {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ice);
  margin-right: .7rem;
  letter-spacing: .1em;
}

/* panels sitting on a banded ground must not use the same fill as the
   band they are on, or they vanish on every second section */
.paper > section:nth-child(even) .eq,
.paper > section:nth-child(even) .prop,
.paper > section:nth-child(even) .log { background: var(--raised); }

p { margin: 0 0 1.05rem; color: var(--ink); }
p.lede { font-size: 1.06rem; color: var(--ink); }
.muted { color: var(--ink-2); }

.abstract {
  border-left: 2px solid var(--ice-deep);
  padding-left: 1.35rem;
}

a { color: var(--ice); text-decoration: none; border-bottom: 1px solid var(--ice-deep); }
a:hover { border-bottom-color: var(--ice); }

sup { font-family: var(--mono); font-size: 9px; color: var(--ice); }

/* ---------- figures ---------------------------------------------- */

figure { margin: 1.7rem 0; }

figcaption {
  font-size: .8rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: .7rem;
}
figcaption b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  margin-right: .5rem;
}

.eq {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ice);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  text-align: center;
  position: relative;
  overflow-x: auto;
}
.eq .no {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 10px;
}

.prop {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ice);
  background: var(--sheet);
  padding: 1.05rem 1.3rem;
  margin: 1.5rem 0;
  border-radius: 0 3px 3px 0;
}
.prop .ph {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ice);
  display: block;
  margin-bottom: .5rem;
}
.prop p { margin: 0; }
.prop .proof { margin-top: .7rem; font-size: .88rem; color: var(--ink-2); }

table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .86rem; }
thead th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  text-align: left;
  padding: 0 .8rem .55rem 0;
  border-bottom: 1px solid var(--rule);
}
tbody td { padding: .62rem .8rem .62rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody td.m { font-family: var(--mono); font-size: 12px; color: var(--ice); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

.scroll-x { overflow-x: auto; }

/* ---------- the log ---------------------------------------------- */

.log { border: 1px solid var(--rule); background: var(--sheet); border-radius: 3px; }
.log-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
}
.live-dot.on { background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.log ul { list-style: none; margin: 0; padding: 0; max-height: 19rem; overflow-y: auto; }
.log li {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  gap: .8rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.log li:last-child { border-bottom: none; }
.log li .t { color: var(--ink-3); }
.log li .a { color: var(--ink); }
.log li[data-k="buy-burn"] .a { color: var(--ember); }
.log-empty { margin: 0; padding: 1.1rem 1rem; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------- notes and foot --------------------------------------- */

.notes { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.notes ol { padding-left: 1.15rem; margin: 0; }
.notes li { font-size: .82rem; color: var(--ink-2); margin-bottom: .8rem; line-height: 1.55; }

/* The contract address, the X link and the buy link. All three live up
   here and are never mentioned again anywhere on the page, which is the
   house rule and also the only placement that survives the document
   being in tabs: buried in a section, the CA is invisible on eight of
   the nine panels. */
.topbar-end {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--rule);
}

.ca {
  appearance: none;
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  padding: 0 .9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.ca:hover { color: var(--ice); background: rgba(116, 224, 255, .05); }
.ca.copied { color: var(--ice); }
.ca[disabled] { cursor: default; color: var(--ink-3); opacity: .55; }
.ca[disabled]:hover { background: none; color: var(--ink-3); }

.topbar-link {
  display: flex;
  align-items: center;
  padding: 0 .95rem;
  border: 0;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
/* `hidden` sets display:none from the UA sheet, and a class selector
   beats it. Without this the unset X and buy links render anyway, which
   is exactly what they were hidden to prevent. */
.topbar-link[hidden] { display: none; }
.topbar-link:last-child { border-right: 0; padding-right: var(--gutter); }
.topbar-link:hover { color: var(--ice); background: rgba(116, 224, 255, .05); border-bottom-color: transparent; }
.topbar-link.buy { color: var(--ice); }
.topbar-link.buy:hover { background: rgba(116, 224, 255, .1); }

@media (max-width: 900px) {
  /* the nouns matter more than the address on a phone, and the address
     is a tap target that scrolls the whole bar out of reach */
  .topbar-end .ca { display: none; }
}

.foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: clamp(3rem, 10vh, 6rem) var(--gutter);
  text-align: center;
}
.foot .end {
  font-family: var(--mono);
  font-size: clamp(13px, 2.4vw, 19px);
  letter-spacing: .16em;
  color: var(--ice);
  margin: 0;
}
.foot .sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1rem 0 0;
}
.foot-sep { margin: 0 .7rem; color: var(--rule); }

/* The pager. With the document in tabs the footer had nothing to do and
   read as the same dead strip on every section; here it carries the
   position and moves you on, so the foot of a plate tells you where you
   are in the set. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin: 0 auto 2.4rem;
  max-width: 44rem;
}
.pager button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: .4rem 0;
  cursor: pointer;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.pager button:hover:not(:disabled) { color: var(--ice); border-bottom-color: var(--ice-deep); }
.pager button:disabled { opacity: .28; cursor: default; }
.pager-pos {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pager-pos span { color: var(--ice); }

@media (max-width: 700px) {
  body { font-size: 17px; }
  /* 72vh of a phone is most of the screen before a single number is
     visible. the figure still leads, it just stops being the whole fold. */
  .hero { height: clamp(300px, 52vh, 440px); }
  .log li { grid-template-columns: 3.6rem 1fr; }
  .log li .s { display: none; }
}

/* a value that has just changed gets a beat of the accent, so a number
   moving on a quiet page is noticed rather than missed */
.cell .v { transition: color .25s ease; }
.cell .v.bumped { color: var(--ice); }
.cell.ember .v.bumped { color: var(--ember); }

@media (prefers-reduced-motion: reduce) {
  .hero canvas { opacity: .9; }
  .paper > section.on,
  .paper > section.on > * { animation: none; }
  .boot { transition: none; }
}