/* ==========================================================================
   CallerHub.org, night edition
   1 Tokens  2 Base  3 Type  4 Chrome  5 Components  6 Pages  7 Motion
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Reenie Beanie";
  src: url("../fonts/reenie-beanie-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* 1 Tokens ---------------------------------------------------------------- */

:root {
  --bg: #000000;
  --bg-2: #0a0a0a;        /* footer, inputs, panels */
  --bg-3: #171717;
  --ink: #ffffff;         /* text, 21:1 on bg */
  --ink-2: #b4b4b4;       /* secondary text, 10:1 */
  --ink-3: #4d4d4d;       /* decoration only: dim glyphs, empty bars */
  --mute: #8c8c8c;        /* meta text, 6.2:1 */
  --line: #222222;        /* rules between rows */
  --line-2: #3d3d3d;      /* stronger rules, box edges */
  --paper: #ffffff;       /* toasts and dialogs */
  --paper-ink: #000000;
  --paper-mute: #595959;  /* 7:1 on paper */
  --signal: #ff5a36;      /* the one colour: marks, never big fills */
  --error: #ff8a76;

  --f-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-hand: "Reenie Beanie", "Bradley Hand", cursive;

  --gut: clamp(16px, 2vw, 28px);
  --bar-h: 49px;
  --ease: cubic-bezier(.16, .84, .24, 1);
  color-scheme: dark;
}

/* 2 Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-color: var(--line-2) var(--bg);
  scroll-padding-top: calc(var(--bar-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { flex: 1; outline: none; }
/* Pages are finished by script. Show them once complete so nothing pops in;
   if a script ever fails, the page still appears after a second. */
html:not(.is-ready) body { visibility: hidden; animation: show-anyway 0s 1s forwards; }
@keyframes show-anyway { to { visibility: visible; } }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, blockquote, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: var(--signal); color: var(--bg); }
[hidden] { display: none !important; }

.wrap { padding-inline: var(--gut); }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gut); top: -40px; z-index: 95;
  background: var(--paper); color: var(--paper-ink); padding: 6px 10px; font: 11px var(--f-mono);
}
.skip:focus { top: 8px; }

/* 3 Type ------------------------------------------------------------------ */

.label, .micro {
  font: 400 11px/1.5 var(--f-mono);
  color: var(--mute);
  letter-spacing: .03em;
}
.label { text-transform: uppercase; letter-spacing: .07em; }
.micro b { color: var(--ink); font-weight: 400; }

.h1 {
  font-size: clamp(48px, 8.8vw, 148px);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.h1--sm { font-size: clamp(34px, 5.2vw, 80px); line-height: .95; letter-spacing: -.04em; }
.h2 {
  font: italic 400 clamp(26px, 2.6vw, 40px)/1.02 var(--f-serif);
  letter-spacing: -.015em;
}
.h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.lede {
  font: 400 clamp(19px, 1.7vw, 25px)/1.32 var(--f-serif);
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.prose { max-width: 64ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.prose p + p { margin-top: .85em; }
.big-num {
  font: 300 clamp(56px, 7vw, 112px)/.85 var(--f-serif);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Links that do something carry an arrow; plain links in text are underlined. */
.arrow {
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.arrow::before { content: "\2192"; display: inline-block; margin-right: .3em; text-decoration: none; transition: transform .25s var(--ease); }
.arrow:hover::before { transform: translateX(4px); }
.u, .bk, .prose a, .post__body a, .feed a, .note a, .empty a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.u:hover, .bk:hover { text-decoration-thickness: 2px; }
.bk { font: 12px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* Handwriting: margin notes in pencil, written in when they scroll into view. */
.hand {
  font: 400 30px/.92 var(--f-hand);
  color: var(--ink-2);
  transform: rotate(-4deg);
  display: inline-block;
}
.hand__ink { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.sq { display: inline-block; width: 8px; height: 8px; background: var(--signal); margin-right: 9px; vertical-align: .05em; flex: none; }

/* 4 Chrome ---------------------------------------------------------------- */

#chrome { position: sticky; top: 0; z-index: 40; }
.chrome { background: var(--bg); border-bottom: 1px solid var(--line-2); }
.bar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--bar-h);
  padding: 10px var(--gut);
  font: 11px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.brand {
  font: 400 23px/1 var(--f-serif);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand span { color: var(--ink-2); }
.brand sup, .wordmark sup, .foot__copy sup { font-size: .42em; vertical-align: top; position: relative; top: .12em; margin-left: .06em; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__list, .nav__me { display: flex; align-items: center; gap: 18px; margin: 0; }
.nav__a {
  color: var(--ink-2);
  white-space: nowrap;
  padding: 2px 4px;
  margin: -2px -4px;
  background: none;
  border: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  transition: color .15s, background-color .15s;
}
.nav__a:hover { color: var(--ink); }
.nav__a[aria-current] { background: var(--ink); color: var(--bg); }
.nav__post { color: var(--signal); }
.bar__menu { display: none; }

@media (max-width: 899px) {
  .bar { justify-content: space-between; }
  .bar__menu {
    display: block;
    background: none;
    border: 1px dashed var(--line-2);
    border-radius: 999px;
    padding: 5px 12px;
    min-width: 6.2em;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
  }
  .nav {
    display: none;
    position: fixed;
    inset: var(--bar-h) 0 0;
    z-index: 39;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 24px var(--gut) 32px;
    overflow-y: auto;
  }
  .menu-open .nav { display: flex; }
  .menu-open body { overflow: hidden; }
  .nav__list, .nav__me { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__list .nav__a {
    display: block;
    font: 500 clamp(34px, 10vw, 52px)/1.12 var(--f-sans);
    letter-spacing: -.035em;
    text-transform: none;
    color: var(--ink);
    margin: 0;
    padding: 2px 0;
  }
  .nav__list .nav__a[aria-current] { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
  .nav__list .nav__post { color: var(--signal); }
  .nav__me { flex-direction: row; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line-2); margin-top: 32px; }
}

/* Footer: six ruled columns, the house style of a shop footer. */
.foot { margin-top: 80px; background: var(--bg-2); border-top: 1px solid var(--line-2); }
.foot__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.foot__grid > section { padding: 18px 16px 44px; border-right: 1px solid var(--line-2); min-height: 250px; }
.foot__grid > section:last-child { border-right: 0; }
.foot__h { font: 400 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 18px; color: var(--ink); }
.foot__n { color: var(--signal); margin-left: 4px; }
.foot__grid li + li { margin-top: 8px; }
.foot__grid a, .foot__grid p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.foot__grid p + p { margin-top: 12px; }
.foot__grid a:hover { color: var(--ink); }
.foot__online .handle { font-size: 14px; }
.foot__legal { padding: 16px var(--gut); border-bottom: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; color: var(--mute); }
.foot__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px 24px;
  padding: 14px var(--gut) 18px;
  font: 11px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
}
.foot__copy { color: var(--ink-2); text-transform: none; font: 14px/1 var(--f-sans); letter-spacing: 0; }
.foot__toggles { justify-self: end; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; transition: opacity .2s; }
.keys[data-off] { opacity: .35; }
kbd {
  font: 10px/1 var(--f-mono);
  border: 1px solid var(--line-2);
  padding: 2px 5px;
  margin-right: 6px;
  color: var(--ink-2);
}
.tog {
  background: none;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--mute);
}
.tog[aria-pressed="true"] { border-style: solid; color: var(--ink); }
.tog:hover { color: var(--ink); }
.counter { font-variant-numeric: tabular-nums; letter-spacing: .12em; margin-left: 6px; }

@media (max-width: 1100px) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid > section { min-height: 0; border-bottom: 1px solid var(--line-2); }
  .foot__grid > section:nth-child(3n) { border-right: 0; }
  .foot__grid > section:nth-last-child(-n+3) { border-bottom: 0; }
  .foot__base { grid-template-columns: 1fr; justify-items: start; }
  .foot__toggles { justify-self: start; justify-content: flex-start; }
  .foot__copy { order: 3; }
}
@media (max-width: 640px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid > section { border-bottom: 1px solid var(--line-2) !important; padding-bottom: 28px; }
  .foot__grid > section:nth-child(3n) { border-right: 1px solid var(--line-2); }
  .foot__grid > section:nth-child(2n) { border-right: 0; }
  .foot__grid > section:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .keys { display: none; }
}
@media (hover: none) { .keys { display: none; } }

/* 5 Components ------------------------------------------------------------ */

.ph { padding-block: 40px 40px; }
.ph__no { font: 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin-bottom: 22px; display: flex; align-items: center; }
.ph__no::before { content: ""; width: 8px; height: 8px; background: var(--signal); margin-right: 10px; }
.ph__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.ph .lede { margin-top: 22px; }
.ph .btn-row { margin-top: 26px; }
.crumbs { padding-top: 22px; font: 11px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--mute); }

.sec { padding-block: 56px 16px; }
.sec--tight { padding-top: 24px; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
  margin-bottom: 22px;
}
.sec-head .arrow, .sec-head .bk { font: 12px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }

/* Buttons: solid for the one thing to do, dashed pills for the rest. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px 12px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 0;
  font: 400 12px/1.2 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ink); color: var(--bg); }
.btn--line { background: transparent; color: var(--ink); border: 1px dashed var(--ink-2); border-radius: 999px; }
.btn--line:hover { background: var(--ink); color: var(--bg); border-style: solid; border-color: var(--ink); }
.btn--line:disabled:hover { background: transparent; color: var(--ink); border-style: dashed; border-color: var(--ink-2); }
.btn--sm { padding: 8px 13px 7px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }

.tag { font: 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tag::before { content: "["; }
.tag::after { content: "]"; }
.tag--mark { color: var(--signal); }

.who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.handle { color: var(--ink-2); }
a.handle:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.handle.t1, .handle.t2 { color: var(--ink); }
.handle.t3, .handle.t4, .handle.t5 { color: var(--ink); font-weight: 600; }
.av { background: var(--bg-3); color: var(--ink); flex: none; }
.av path { fill: currentColor; }
.bars { color: var(--ink-2); flex: none; }
.bars rect { fill: currentColor; }
.bars .off { opacity: .25; }
.vf { flex: none; }
.vf rect { fill: var(--ink); }
.vf path { fill: none; stroke: var(--bg); stroke-width: 1.6; }

/* Listing index. */
.list--c2 { --c: 2; }
.list--c3 { --c: 3; }
.list__head, .list__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 3.2fr) repeat(var(--c, 3), minmax(0, 1fr)) 7.5rem;
  column-gap: 20px;
}
.list__head {
  padding: 0 10px 9px;
  margin: 0 -10px;
  border-bottom: 1px solid var(--line-2);
  font: 10.5px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mute);
}
.list__row {
  position: relative;
  align-items: baseline;
  padding: 15px 10px 14px;
  margin: 0 -10px;
  border-bottom: 1px solid var(--line);
  transition: background-color .16s, color .16s;
}
.list__no, .list__cell, .list__by { font: 12px/1.45 var(--f-mono); color: var(--ink-2); }
.list__no { color: var(--mute); }
.list__title { font-size: 17px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.list__title::after { content: ""; position: absolute; inset: 0; }
.list__title:focus-visible { outline: none; }
.list__row:has(.list__title:focus-visible) { outline: 2px solid var(--signal); outline-offset: -2px; }
.list__by { display: block; margin-top: 5px; color: var(--mute); }
.list__by .tag { color: inherit; }
.list__label { display: none; }
.list__when small { display: block; color: var(--mute); font-size: 11px; }
.is-promo .list__title::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--signal); margin-right: 9px; vertical-align: .14em; }
.is-staff .list__by .tag { color: var(--signal); }
@media (hover: hover) {
  .list__row:hover { background: var(--ink); color: var(--bg); }
  .list__row:hover :is(.list__title, .list__cell, .list__no, .list__by, .list__when small) { color: var(--bg); }
  .list__row:hover .list__by .tag { color: var(--bg); }
}
@media (max-width: 760px) {
  .list__head { display: none; }
  .list__row { grid-template-columns: 30px minmax(0, 1fr); row-gap: 3px; padding-block: 16px; }
  .list__main { margin-bottom: 6px; }
  .list__cell { grid-column: 2; display: flex; gap: 10px; }
  .list__label { display: inline; color: var(--mute); min-width: 6.5em; }
  .list__when small { display: inline; margin-left: 8px; }
}

/* Forms. */
.form { display: grid; gap: 22px; max-width: 780px; }
.field > label, .field > legend {
  display: block;
  margin-bottom: 8px;
  font: 11px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-2);
}
.field > label .hint { display: inline; text-transform: none; }
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  padding: 12px 14px;
  font: 16px/1.4 var(--f-sans);
  transition: border-color .15s, background-color .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--mute); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); background: var(--bg); outline: none; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.input:disabled { opacity: .45; cursor: not-allowed; }
.input::placeholder, .textarea::placeholder { color: var(--mute); }
.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b4b4b4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.textarea { min-height: 190px; resize: vertical; line-height: 1.55; }
.hint { margin-top: 7px; font: 11px/1.5 var(--f-mono); color: var(--mute); }
.field__err { margin-top: 7px; font-size: 14px; color: var(--error); }
.field__err::before { content: "! "; font-family: var(--f-mono); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .form__grid, .form__grid--3 { grid-template-columns: 1fr; } }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: block;
  height: 100%;
  border: 1px solid var(--line-2);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s;
}
.choice small { display: block; margin-top: 3px; font: 11px/1.4 var(--f-mono); font-weight: 400; color: var(--mute); }
.choice:hover span { border-color: var(--ink-2); }
.choice input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.choice input:checked + span small { color: var(--paper-mute); }
.choice input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.choice input:disabled + span { opacity: .35; }
.choice input:disabled { cursor: not-allowed; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* Boxes: dashed for facts, washed for notices. */
.note { border: 1px dashed var(--line-2); padding: 18px 20px; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 780px; }
.note b { color: var(--ink); font-weight: 600; }
.note--wash { background: var(--bg-2); }
.empty { padding: 26px 0; font: italic 400 20px/1.4 var(--f-serif); color: var(--ink-2); }
.dbox, .spec, .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px 24px;
  border: 1px dashed var(--line-2);
  padding: 16px 18px 18px;
}
.dbox dt, .spec dt, .stats dt {
  font: 10.5px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mute);
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--line-2);
}
.dbox dd, .stats dd { margin-top: 10px; font: 300 clamp(30px, 3vw, 48px)/1 var(--f-serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.spec dd { margin-top: 9px; font: 13px/1.45 var(--f-mono); color: var(--ink); }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font: 12px/1.45 var(--f-mono); }
.tbl th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mute);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.tbl td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: baseline; }
.tbl td a { color: var(--ink); }
.tbl td a:hover { text-decoration: underline; text-underline-offset: .2em; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl .is-me { background: var(--bg-3); }
.tbl .is-me td:first-child { box-shadow: inset 3px 0 0 var(--signal); padding-left: 8px; }
.tbl .who { font-family: var(--f-sans); font-size: 14px; }

.curs { display: flex; align-items: center; gap: 6px; }
.curs .label { margin-right: 6px; }
.cur {
  background: none;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  padding: 6px 12px;
  font: 11px/1.2 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.cur:hover { color: var(--ink); border-color: var(--ink-2); }
.cur.is-on { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }

.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding: 22px 0; border-block: 1px dashed var(--line-2); color: var(--ink-2); }
.total b { color: var(--ink); font-weight: 400; }
.total .bk { margin-left: auto; }

.toast {
  position: fixed;
  left: var(--gut);
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  max-width: min(440px, calc(100vw - 2 * var(--gut)));
  margin: 0;
  padding: 12px 16px 12px 14px;
  background: var(--paper);
  color: var(--paper-ink);
  font: 12px/1.45 var(--f-mono);
  transform: translateY(150%);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .3s;
  pointer-events: none;
}
.toast::before { content: ""; width: 8px; height: 8px; background: var(--signal); margin-right: 10px; flex: none; }
.toast.is-on { transform: none; opacity: 1; }

.dlg {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--paper-ink);
}
.dlg::backdrop { background: rgba(0, 0, 0, .78); }
.dlg__in { padding: 15px 18px 20px; }
.dlg__bar { display: flex; align-items: center; font: 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.dlg__title { flex: 1; }
.dlg__x { background: none; border: 0; padding: 2px 0; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.dlg__body { margin-top: 30px; font-size: 17px; line-height: 1.45; }
.dlg__body p + p { margin-top: .7em; }
.dlg__body .micro { color: var(--paper-mute); font-size: 12px; }
.dlg__price { font: 300 56px/1 var(--f-serif); letter-spacing: -.03em; margin-top: 12px; }
.dlg__price small { font: 11px var(--f-mono); color: var(--paper-mute); margin-left: 12px; letter-spacing: .04em; text-transform: uppercase; }
.dlg__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dlg .btn { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.dlg .btn:hover { background: transparent; color: var(--paper-ink); }
.dlg .btn--line { background: transparent; color: var(--paper-ink); border: 1px dashed var(--paper-ink); }
.dlg .btn--line:hover { background: var(--paper-ink); color: var(--paper); }
.dlg :focus-visible { outline-color: var(--paper-ink); }

/* 6 Pages ----------------------------------------------------------------- */

/* Home: hello waves, wordmark. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gut);
  min-height: max(620px, calc(100svh - var(--bar-h)));
  padding: 16px var(--gut) 0;
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.hero__art { grid-column: 1 / -1; grid-row: 1 / -1; position: relative; min-height: 460px; margin: -16px calc(var(--gut) * -1) 0; }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair;
  /* Fades out under the wordmark so the logo stays clean. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
}
.hero__readout {
  position: absolute;
  right: var(--gut);
  top: 20px;
  display: grid;
  justify-items: end;
  gap: 4px;
  font: 11px/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mute);
  pointer-events: none;
  text-shadow: 0 0 6px #000, 0 0 12px #000;
}
.hero__readout span:first-child { color: var(--ink); }
.hero__note { grid-column: 1 / span 3; grid-row: 2; align-self: center; justify-self: start; z-index: 3; position: relative; pointer-events: none; color: var(--ink); text-shadow: 0 0 6px #000, 0 0 14px #000, 0 0 22px #000; }
.hero__note .hand__ink { position: absolute; left: 100%; top: 4px; margin-left: 4px; }
.wordmark {
  grid-column: 1 / -1;
  grid-row: 3;
  z-index: 2;
  margin: 0 0 -.08em -.04em;
  font: 300 clamp(64px, 14.2vw, 240px)/.86 var(--f-serif);
  letter-spacing: -.04em;
  white-space: nowrap;
  pointer-events: none;
}
.wordmark__line { display: block; overflow: hidden; padding: .04em 0 .08em; }
.wordmark__line > span, .wordmark__line > sup { display: inline-block; }
.wordmark__tld { color: var(--ink-2); }
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; padding-top: 12px; }
  .hero__art { height: min(110vw, 560px); min-height: 0; margin: -12px calc(var(--gut) * -1) 0; }
  .hero__hint { display: none; }
  .hero__readout { top: auto; bottom: 10px; }
  .hero__note { display: none; }
  .wordmark { font-size: clamp(40px, 13.2vw, 140px); margin-top: 12px; }
}

.intro { padding-block: 72px 24px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 30px var(--gut); align-items: center; }
.intro__copy { display: grid; gap: 30px; }
.intro__pillar { position: relative; height: clamp(440px, 46vw, 700px); }
.intro__pillar .hand { position: absolute; left: 0; bottom: 16%; }
@media (max-width: 899px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .intro__pillar { height: min(110vw, 480px); }
}
.intro__text {
  font-size: clamp(24px, 3.1vw, 48px);
  line-height: 1.12;
  letter-spacing: -.025em;
  max-width: 24em;
  hyphens: auto;
  text-wrap: pretty;
}
.intro__go { display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: clamp(18px, 1.6vw, 22px); }

.room { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 56px; align-items: start; }
.room__text { margin-top: 22px; color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 46ch; }
.legend { display: flex; gap: 22px; margin: 6px 0 20px; font: 12px var(--f-mono); color: var(--ink-2); }
.achart, .abars { font: 13px/1.2 var(--f-mono); color: var(--ink); overflow-x: auto; }
.achart span, .abars span { display: block; white-space: pre; }
.room__note { margin: 26px 0 0 auto; display: block; width: max-content; }
.room__note .hand__ink { margin: -6px 0 0 120px; }
@media (max-width: 899px) { .room { grid-template-columns: 1fr; } .achart { font-size: 11px; } }

/* Board. */
.wave { margin-bottom: 36px; }
.wave__canvas { width: 100%; height: 118px; border-block: 1px solid var(--line-2); }
.wave__cap { display: flex; justify-content: space-between; gap: 20px; padding-top: 8px; font: 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--mute); }
.board { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px 52px; align-items: start; }
.board__side { position: sticky; top: calc(var(--bar-h) + 20px); }
.board__nav .label { margin-bottom: 8px; }
.board__nav a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
  transition: color .15s;
}
.board__nav a:hover { color: var(--ink); }
.board__nav a span { font: 11px var(--f-mono); color: var(--mute); }
.board__nav a[aria-current] { color: var(--ink); font-weight: 600; }
.board__nav a[aria-current]::before { content: ""; width: 7px; height: 7px; background: var(--signal); align-self: center; margin-right: 9px; }
.board__nav a[aria-current] { justify-content: flex-start; }
.board__nav a[aria-current] span { margin-left: auto; }
.filters { margin-top: 30px; }
.filters__box > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.filters__box > summary::-webkit-details-marker { display: none; }
.filters__box > summary::after { content: "+"; }
.filters__box[open] > summary::after { content: "\2013"; }
.filters__group { margin-top: 18px; }
.filters__group .label { margin-bottom: 6px; }
.filters__group a { display: block; padding: 3px 0; font: 12px/1.45 var(--f-mono); color: var(--ink-2); transition: color .15s; }
.filters__group a:hover { color: var(--ink); }
.filters__group a[aria-current] { color: var(--ink); }
.filters__group a[aria-current]::before { content: "\25A0  "; color: var(--signal); white-space: pre; }
.board__count { margin-bottom: 16px; font: 12px/1.5 var(--f-mono); color: var(--ink-2); }
.board__count b { color: var(--ink); font-weight: 400; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; font: 12px var(--f-mono); color: var(--mute); }
.pager a { color: var(--ink-2); }
.pager a:hover { color: var(--ink); }
.pager strong { font-weight: 400; background: var(--ink); color: var(--bg); padding: 0 6px; }
@media (max-width: 899px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .board > *, .dash > * { min-width: 0; }
  .board__side { position: static; }
  .board__nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .board__nav .label { display: none; }
  .board__nav a, .board__nav a[aria-current] { flex: none; gap: 8px; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
  .board__nav a[aria-current] { border-style: solid; border-color: var(--ink); }
  .board__nav a[aria-current] span { margin-left: 0; }
  .filters { margin-top: 18px; }
  .filters__box[open] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 20px; }
  .filters__box[open] > summary { grid-column: 1 / -1; }
}

/* Thread. */
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 24px; font: 12px var(--f-mono); color: var(--ink-2); }
.thread-meta .who { font: 15px var(--f-sans); }
.thread-meta .micro { font-size: 12px; }
.ph > .tag { display: block; margin-bottom: 14px; font-size: 12px; }
.spec { margin-inline: var(--gut); }
.posts { margin-top: 44px; }
.post {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "bar bar" "who body";
  column-gap: 48px;
  padding: 16px 0 36px;
  border-top: 1px solid var(--line-2);
  scroll-margin-top: calc(var(--bar-h) + 20px);
}
.post__bar { grid-area: bar; display: flex; justify-content: space-between; margin-bottom: 20px; font: 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.post__bar a { color: var(--ink-2); }
.post__bar a:hover { color: var(--ink); }
.post__who { grid-area: who; display: grid; gap: 8px; align-content: start; justify-items: start; }
.post__who .who { font-size: 16px; }
.post__title { font: 11px var(--f-mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.post__facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin-top: 8px; font: 11px/1.4 var(--f-mono); width: 100%; max-width: 180px; }
.post__facts dt { color: var(--mute); }
.post__facts dd { color: var(--ink-2); text-align: right; }
.post__body { grid-area: body; font-size: 17px; line-height: 1.6; max-width: 66ch; color: var(--ink); }
.post__body p + p { margin-top: .85em; }
.post--op .post__body { font-size: 19px; line-height: 1.55; }
.reply { padding-top: 34px; }
@media (max-width: 760px) {
  .post { grid-template-columns: 1fr; grid-template-areas: "bar" "who" "body"; }
  .post__who { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; margin-bottom: 18px; }
  .post__who .av { width: 40px; height: 40px; grid-row: span 2; }
  .post__facts { display: none; }
}

/* Leaderboard. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.tabs a { border: 1px dashed var(--ink-2); border-radius: 999px; padding: 7px 14px; font: 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); transition: background-color .15s, color .15s; }
.tabs a:hover { color: var(--ink); border-style: solid; }
.tabs a[aria-current] { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.podium li { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 16px; padding: 22px 22px 26px 0; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line); }
.podium li + li { padding-left: 22px; }
.podium li:last-child { border-right: 0; }
.podium .r { grid-column: 1 / -1; font: 300 clamp(64px, 7.5vw, 124px)/.8 var(--f-serif); letter-spacing: -.04em; }
.podium li:first-child .r { color: var(--signal); }
.podium__who a { display: block; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.podium__who a:hover { text-decoration: underline; text-underline-offset: .18em; }
.podium__who small, .podium .n small { display: block; margin-top: 4px; font: 11px var(--f-mono); color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.podium .n { grid-column: 1 / -1; font: 14px var(--f-mono); font-variant-numeric: tabular-nums; }
.abars i { font-style: normal; color: var(--ink-3); }
.abars b { font-weight: 400; color: var(--mute); }
@media (max-width: 760px) {
  .podium { grid-template-columns: 1fr; }
  .podium li, .podium li + li { padding: 18px 0; border-right: 0; }
  .podium .r { grid-column: auto; grid-row: span 2; font-size: 64px; }
  .abars { font-size: 10px; }
}

/* Credits and promote. */
.crows { border-top: 1px solid var(--line-2); }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px var(--gut); border-bottom: 1px solid var(--line); }
.crows--sm .crow { padding-inline: 0; }
.crow__what { font-size: 18px; letter-spacing: -.01em; }
.crow__n { font: 300 clamp(30px, 3vw, 46px)/1 var(--f-serif); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); letter-spacing: -.02em; }
.crow__n.is-plus { color: var(--ink); }
.crow__n small { font: 11px var(--f-mono); color: var(--mute); margin-left: 8px; text-transform: uppercase; letter-spacing: .05em; }
.crows--sm .crow__what { font-size: 15px; }
.crows--sm .crow__n { font-size: 28px; }

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: var(--gut); border-block: 1px solid var(--line-2); }
.place { padding: 22px 24px 26px; border-right: 1px solid var(--line-2); }
.place:first-child { padding-left: 0; }
.place:last-child { border-right: 0; }
.place__name { font: italic 400 clamp(28px, 2.6vw, 40px)/1 var(--f-serif); letter-spacing: -.015em; }
.place--highlight .place__name span::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--signal); margin-right: 12px; vertical-align: .14em; }
.place > p:not(.place__p) { margin: 14px 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.place__p { display: grid; grid-template-columns: 70px auto 1fr; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line-2); }
.place__p b { font: 300 30px/1 var(--f-serif); font-weight: 300; letter-spacing: -.02em; }
.place__p .micro:last-child { justify-self: end; }
@media (max-width: 899px) {
  .places { grid-template-columns: 1fr; }
  .place, .place:first-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .place:last-child { border-bottom: 0; }
}

/* Upgrade: tiers in ruled columns. */
.tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-inline: var(--gut); border-block: 1px solid var(--line-2); }
.tier { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 22px; border-right: 1px solid var(--line-2); transition: background-color .2s; }
.tier:last-child { border-right: 0; }
.tier.is-current { background: var(--bg-2); box-shadow: inset 0 2px 0 var(--signal); }
.tier__name { display: grid; gap: 4px; }
.tier__name b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.tier--badge .tier__name b .vf { width: 13px; height: 13px; }
.tier__price { font: 300 clamp(36px, 3.2vw, 54px)/.9 var(--f-serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tier__price small { display: block; margin-top: 10px; font: 11px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .03em; }
.tier__perks { flex: 1; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.tier .btn { width: 100%; }
@media (max-width: 1280px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier { border-bottom: 1px solid var(--line-2); }
  .tier:nth-child(3n) { border-right: 0; }
  .tier:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 700px) {
  .tiers { grid-template-columns: 1fr; }
  .tier, .tier:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--line-2); padding-inline: 0; }
  .tier.is-current { padding-inline: 12px; }
  .tier:last-child { border-bottom: 0; }
}
.matrix td:first-child { color: var(--ink); white-space: nowrap; }
.matrix td.no { color: var(--mute); }
.matrix td.yes { color: var(--ink); }
.matrix b { font-weight: 400; color: var(--ink); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.split .h3 { margin-bottom: 10px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Member pages: a soft grey haze behind the header. */
.ph:has(> .me) {
  background:
    radial-gradient(42% 120% at 12% 40%, #2a2a2a 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(30% 90% at 64% 110%, #1c1c1c 0%, rgba(0, 0, 0, 0) 75%);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 36px;
}
.me { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.me .av { width: clamp(88px, 10vw, 136px); height: auto; aspect-ratio: 1; }
.me__name { font-size: clamp(40px, 6.4vw, 104px); font-weight: 500; line-height: .9; letter-spacing: -.05em; }
.me__name .who { gap: 14px; }
.me__name .handle { color: var(--ink); }
.me__name .bars { width: 28px; height: 22px; }
.me__name .vf { width: 20px; height: 20px; }
.me__sub { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.me__sub a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.me__sub b { font-weight: 400; color: var(--ink); }
.me__sub b::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--signal); margin-right: 7px; }
.stats { margin-bottom: 4px; }
.dash { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px 52px; align-items: start; }
.dash__nav { display: grid; position: sticky; top: calc(var(--bar-h) + 20px); }
.dash__nav a { display: flex; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font: 12px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); transition: color .15s; }
.dash__nav a:hover { color: var(--ink); }
.dash__nav a[aria-current] { color: var(--ink); }
.dash__nav a[aria-current]::before { content: ""; width: 7px; height: 7px; background: var(--signal); margin-right: 9px; align-self: center; }
.dash__nav .n { margin-left: auto; color: var(--mute); }
.panel + .panel { margin-top: 48px; }
.panel .sec-head { margin-top: 0; }
.dash .btn-row { margin-bottom: 44px; }
.feed li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.feed .when { font: 11px/1.6 var(--f-mono); color: var(--mute); }
.feed li > div { color: var(--ink-2); font-size: 15px; }
.feed a { color: var(--ink); }
.feed q { display: block; margin-top: 6px; font: italic 400 19px/1.35 var(--f-serif); color: var(--ink); }
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px 18px; margin-top: 26px; }
.kv dt { font: 10.5px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--mute); }
.kv dd { font: 13px/1.5 var(--f-mono); color: var(--ink-2); }
.kv dd a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.vouch li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--mute); font-size: 14px; }
.vouch q { font: italic 400 21px/1.35 var(--f-serif); color: var(--ink); }
.vouch .who { margin-top: 8px; }
@media (max-width: 899px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash__nav { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .dash__nav a { flex: none; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 12px; gap: 8px; }
  .dash__nav a[aria-current] { border-style: solid; border-color: var(--ink); }
  .feed li { grid-template-columns: 1fr; gap: 4px; }
}

/* Join: the eye beside the log-in form. */
.join { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gut); }
.join__eye { grid-column: 1 / span 6; position: relative; align-self: start; }
.join__canvas { width: 100%; height: clamp(240px, 28vw, 420px); }
.join__eye .hand { position: absolute; right: 4%; bottom: -8px; }
.join > section { grid-column: 8 / -1; }
.join > #register { grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding-top: 22px; }
.join .h2 { margin-bottom: 22px; }
.join #login-form + .note { margin-top: 26px; }
#register .form { max-width: 900px; }
@media (max-width: 899px) {
  .join { display: block; }
  .join__canvas { height: 62vw; }
  .join > section { margin-top: 36px; }
}

/* Rules: the column in dots, the rules beside it. */
.rules-wrap { display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 7fr); gap: 32px calc(var(--gut) * 2); align-items: start; }
.pillar { position: sticky; top: calc(var(--bar-h) + 16px); height: min(760px, calc(100svh - var(--bar-h) - 40px)); }
.pillar__canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pillar .hand { position: absolute; right: 2%; bottom: 14%; }
.rules { counter-reset: rule; }
.rules > li { counter-increment: rule; display: grid; grid-template-columns: 76px minmax(0, 1fr); padding: 22px 0 28px; border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--bar-h) + 16px); }
.rules > li::before { content: counter(rule, decimal-leading-zero) "."; font: 300 40px/.9 var(--f-serif); color: var(--ink-2); letter-spacing: -.02em; }
.rules > li:target::before { color: var(--signal); }
.rules h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 10px; }
.rules p { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.rules ul { margin-top: 8px; display: grid; gap: 5px; max-width: 62ch; }
.rules ul li { padding-left: 1.3em; position: relative; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.rules ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--mute); }
@media (max-width: 899px) {
  .rules-wrap { grid-template-columns: 1fr; }
  .pillar { position: relative; top: 0; height: min(110vw, 460px); }
  .rules > li { grid-template-columns: 52px minmax(0, 1fr); }
  .rules > li::before { font-size: 30px; }
}

/* 7 Motion ---------------------------------------------------------------- */
/* Everything here is skipped with html.no-motion, which follows the system setting
   until the member uses the Motion switch in the footer. */


/* The one orchestrated moment: the wordmark rises letter by letter on the home page. */
html:not(.no-motion) .wordmark__line > * {
  transform: translateY(104%);
  animation: rise 1.05s var(--ease) forwards;
  animation-delay: calc(160ms + var(--i) * 45ms);
}
html:not(.no-motion) .wordmark__line > sup { transform: none; opacity: 0; animation-name: fade-in; animation-duration: .6s; }
html:not(.no-motion) .hero__art { animation: wipe 1.2s var(--ease) .2s both; }
@keyframes rise { to { transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Page titles: same rise, one masked word at a time; the lede follows the title in. */
.rise { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.rise > span { display: inline-block; }
html:not(.no-motion) .rise > span {
  transform: translateY(105%);
  animation: rise .9s var(--ease) forwards;
  animation-delay: calc(60ms + var(--i) * 30ms);
}
html:not(.no-motion) .ph .lede { animation: lede-in .7s var(--ease) .32s both; }
@keyframes lede-in { from { opacity: 0; transform: translateY(8px); } }

/* Listing rows settle in once, top to bottom. */
html:not(.no-motion) .list__row { animation: row-in .5s var(--ease) both; animation-delay: calc(var(--r, 1) * 35ms); }
html:not(.no-motion) .field__err { animation: nudge .22s var(--ease); }
html:not(.no-motion) .is-swapping :is(.tier__price, .place__p b, .matrix b) { animation: nudge .3s var(--ease); }
html:not(.no-motion) .post.is-new { animation: fresh 1.6s var(--ease); }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes nudge { from { opacity: 0; transform: translateY(-3px); } }
@keyframes fresh { from { background: var(--bg-3); } }

/* Scroll reveals. */
html:not(.no-motion) .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
html:not(.no-motion) .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
html:not(.no-motion) .ph__no.reveal:not(.is-in) { transform: none; }

/* Handwritten notes are written in, then the pencil line follows. */
.hand__ink path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html:not(.no-motion) .hand { transition: clip-path 1.1s cubic-bezier(.5, 0, .3, 1) .2s, opacity .4s; }
html:not(.no-motion) .hand.reveal:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: 1; transform: rotate(-4deg); }
html:not(.no-motion) .hand.reveal { clip-path: inset(-60% -220% -60% -20%); }
html:not(.no-motion) .hand.reveal .hand__ink path { stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) 1.1s; }
html:not(.no-motion) .hand.reveal.is-in .hand__ink path { stroke-dashoffset: 0; }

/* Text charts build up row by row. */
html:not(.no-motion) .reveal .achart span,
html:not(.no-motion) .sec.reveal .abars span { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); transition-delay: calc(var(--l, 0) * 55ms + 150ms); }
html:not(.no-motion) .reveal.is-in .achart span,
html:not(.no-motion) .sec.reveal.is-in .abars span { clip-path: inset(0 -2px 0 0); }
html:not(.no-motion) .dlg[open] { animation: dlg-in .24s var(--ease); }
html:not(.no-motion) .dlg.is-closing { animation: dlg-out .16s ease forwards; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(6px); } }

html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}