/* Origami — paper register. Hairlines and fold shadows, never an outline or a drop shadow;
   the depth in this page comes from the same place it comes from in a folded sheet, which is
   one edge sitting slightly above another. */
:root {
  --paper:      #f2e3cc;
  --paper-lit:  #faf0dd;
  --paper-deep: #e5ceac;
  --fold:       #d2ba93;
  --sun:        #dfc093;
  --green:      #2f5a36;
  --green-lit:  #496a4d;
  --green-deep: #1f3a24;
  --ink:        #1b2a1d;
  --muted:      #6d7a69;

  --rule:  rgba(47, 90, 54, .18);
  --rule-2: rgba(47, 90, 54, .32);
  --panel: rgba(250, 240, 221, .86);
  --panel-2: rgba(250, 240, 221, .64);

  /* One scale. Nothing on this page is a size that is not on this list. */
  --t11: 11px; --t13: 13px; --t15: 15px; --t18: 18px;
  --t24: 24px; --t32: 32px; --t48: 48px; --t72: 72px;

  --rail: 196px;
  --gut: 28px;
  --max: 1100px;

  --display: 'Poppins', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t15);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3, .num, .btn, .rail b, .chip { font-family: var(--display); }
h1 {
  font-size: clamp(34px, 5.4vw, var(--t72));
  line-height: 1.0; margin: 0 0 18px; font-weight: 600; letter-spacing: -.035em;
}
h2 { font-size: var(--t32); line-height: 1.12; margin: 0 0 12px; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: var(--t11); margin: 0 0 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--green); }
p { margin: 0 0 14px; }
.lede { font-size: var(--t18); color: var(--muted); max-width: 56ch; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dash { color: var(--fold); }

/* ------------------------------------------------------------------- stage --- */
.stage { position: fixed; inset: 0; z-index: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
/* The only full width veil is at the very bottom, where the page ends and nothing is drawn.
   A scrim over the whole frame kills the sun and flattens the mountains. */
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(242,227,204,0) 0%, rgba(242,227,204,.55) 70%, rgba(242,227,204,.9) 100%);
}

/* -------------------------------------------------------------------- chrome --- */
.brand {
  position: fixed; top: 22px; left: var(--gut); z-index: 40;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: var(--t24); letter-spacing: -.03em;
  color: var(--green);
}
.brand svg { width: 30px; height: 30px; display: block; border-radius: 9px; }

.rail {
  position: fixed; top: 96px; left: var(--gut); z-index: 40; width: var(--rail);
  display: flex; flex-direction: column; gap: 1px;
}
.rail a {
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 10px;
  padding: 9px 12px 9px 0; text-decoration: none; color: var(--muted);
  border-top: 1px solid var(--rule);
}
.rail a:last-child { border-bottom: 1px solid var(--rule); }
.rail i { font-family: var(--mono); font-size: var(--t11); font-style: normal; color: var(--fold); }
.rail b { font-size: var(--t15); font-weight: 500; }
.rail a:hover { color: var(--ink); }
.rail a:hover i { color: var(--green-lit); }
.rail a[aria-current='page'] { color: var(--green); }
.rail a[aria-current='page'] i { color: var(--green); }
.rail a[aria-current='page'] b { font-weight: 600; }

.top-right {
  position: fixed; top: 22px; right: var(--gut); z-index: 40;
  display: flex; align-items: center; gap: 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t11); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--rule-2); border-radius: 999px;
  background: var(--panel-2); backdrop-filter: blur(8px); color: var(--green);
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-lit); }
.chip.off i { background: var(--fold); }

.foot {
  position: fixed; left: var(--gut); right: var(--gut); bottom: 14px; z-index: 40;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t11); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  pointer-events: none;
}
.foot a { pointer-events: auto; text-decoration: none; }
.foot a:hover { color: var(--green); }

/* --------------------------------------------------------------------- page --- */
.outlet { position: relative; z-index: 10; padding: 118px var(--gut) 96px calc(var(--rail) + var(--gut) + 56px); }
.screen { max-width: var(--max); outline: none; }

/* One grid for the whole site. Headers, rows and panels all span columns of THIS grid, which
   is why every left edge on the page lands on one of four places instead of nineteen. */
.g { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px var(--gut); }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: 1 / -1; }

.section { margin-top: 56px; }
.section > h3 { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------- panels --- */
/* A panel is a sheet laid on the scene: paper, one hairline, and a corner turned up. */
.panel {
  position: relative; background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--rule); padding: 20px 22px;
}
.panel::after {
  content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  background: linear-gradient(225deg, var(--paper) 0 50%, var(--fold) 50% 100%);
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.panel.plain::after { display: none; }

/* A reading, never a card: a label on a rule and the figure under it. */
.read { border-top: 1px solid var(--rule); padding-top: 10px; }
.read .k { font-size: var(--t11); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.read .v { font-family: var(--mono); font-size: var(--t24); line-height: 1.25; margin-top: 2px; }
.read .v.sm { font-size: var(--t18); }

/* ------------------------------------------------------------------- tables --- */
table { width: 100%; border-collapse: collapse; font-size: var(--t15); }
th {
  text-align: left; font-family: var(--display); font-weight: 600;
  font-size: var(--t11); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 0 0 8px; border-bottom: 1px solid var(--rule-2);
}
td { padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
td + td { padding-left: 16px; }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------- paths --- */
.paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule-2); }
.path {
  padding: 16px 18px 18px 0; border-right: 1px solid var(--rule); cursor: default;
}
.path:last-child { border-right: 0; }
.path .n { font-family: var(--mono); font-size: var(--t11); color: var(--fold); }
.path .t { font-family: var(--display); font-size: var(--t18); font-weight: 600; margin: 2px 0 6px; }
.path .d { font-size: var(--t13); color: var(--muted); line-height: 1.5; }
.path .cap { font-family: var(--mono); font-size: var(--t11); color: var(--green-lit); margin-top: 8px; }
.path.on .t { color: var(--green); }

/* ------------------------------------------------------------------ controls --- */
.btn {
  appearance: none; border: 1px solid var(--green); background: var(--green); color: var(--paper-lit);
  font-size: var(--t15); font-weight: 500; padding: 11px 20px; border-radius: 2px; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.btn:hover:not(:disabled) { background: var(--green-deep); border-color: var(--green-deep); }
.btn.ghost { background: var(--panel-2); color: var(--green); border-color: var(--rule-2); backdrop-filter: blur(8px); }
.btn.ghost:hover:not(:disabled) { background: var(--paper-lit); color: var(--green-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { font-size: var(--t13); padding: 8px 14px; }

.field { display: flex; align-items: stretch; border: 1px solid var(--rule-2); background: var(--paper-lit); }
.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 12px 14px;
  font-family: var(--mono); font-size: var(--t18); color: var(--ink);
}
.field .unit { display: flex; align-items: center; padding: 0 14px; font-family: var(--mono); font-size: var(--t13); color: var(--muted); border-left: 1px solid var(--rule); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.note { font-size: var(--t13); color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 16px); z-index: 60;
  background: var(--green); color: var(--paper-lit); padding: 11px 18px; font-size: var(--t13);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 80vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------- sheets --- */
.sheetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--gut); }
.sheetcard { border: 1px solid var(--rule); background: var(--paper-lit); padding: 8px; text-decoration: none; display: block; }
.sheetcard img { width: 100%; display: block; background: var(--paper); }
.sheetcard .id { font-family: var(--mono); font-size: var(--t11); color: var(--muted); margin-top: 8px; display: flex; justify-content: space-between; }
.sheetcard.on { border-color: var(--green); }

/* ---------------------------------------------------------------- the ladder --- */
.ladder { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 110px; }
.ladder span { background: linear-gradient(180deg, var(--green-lit), var(--green)); display: block; }
.ladder-x { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 6px; font-family: var(--mono); font-size: var(--t11); color: var(--muted); }
.ladder-x b { font-weight: 400; text-align: center; }

/* --------------------------------------------------------------------- docs --- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 40px; }
.prose ul { margin: 0 0 14px; padding-left: 18px; }
.prose li { margin-bottom: 7px; }
.prose code { font-family: var(--mono); font-size: .92em; background: var(--paper-deep); padding: 1px 5px; }

/* ------------------------------------------------------------------ responsive --- */
@media (max-width: 1020px) {
  :root { --gut: 20px; }
  .outlet { padding: 104px var(--gut) 150px; }
  .brand { top: 16px; }
  .top-right { top: 16px; }
  .rail {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none;
    background: var(--panel); backdrop-filter: blur(14px); border-top: 1px solid var(--rule-2);
    padding: 0 10px;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail a { border-top: 0; display: flex; gap: 7px; padding: 13px 12px; white-space: nowrap; }
  .rail a:last-child { border-bottom: 0; }
  .foot { bottom: 64px; }
  .paths { grid-template-columns: repeat(2, 1fr); }
  .paper-sheet { margin-top: 10vh; }
  .path { border-bottom: 1px solid var(--rule); padding-right: 14px; }
  .path:nth-child(2n) { border-right: 0; }
  .c4, .c5, .c6, .c7, .c8 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  h1 { font-size: var(--t32); }
  h2 { font-size: var(--t24); }
  .paths { grid-template-columns: 1fr; }
  .path { border-right: 0; }
  .ladder { height: 84px; }
  .ladder-x b:nth-child(even) { visibility: hidden; }
}

/* ----------------------------------------------------------- the page sheet --- */
/* The hero floats on the valley; everything under it rides on a sheet of paper laid over the
   scene. This is the scrim — and it follows the GRID, so the sky and the sun stay sky and sun
   instead of disappearing under a veil thrown across the whole frame. */
.paper-sheet {
  position: relative;
  margin: 48px calc(var(--gut) * -1) 0;
  padding: 36px var(--gut) 56px;
  background: rgba(250, 240, 221, .93);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule-2);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .6) inset;
}
.paper-sheet::before {
  content: ''; position: absolute; top: 0; right: var(--gut); width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--paper) 0 50%, var(--fold) 50% 100%);
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.paper-sheet > .g:first-child, .paper-sheet > .section:first-child { margin-top: 0; }
.paper-sheet .panel { background: rgba(255, 250, 238, .9); }

/* ----------------------------------------------------------- the page sheet --- */
/* The hero floats on the valley; everything under it rides on a sheet of paper laid over the
   scene. This IS the scrim — and it follows the grid, so the sky and the sun stay sky and sun
   instead of disappearing under a veil thrown across the whole frame. */
.paper-sheet {
  position: relative;
  margin: 19vh calc(var(--gut) * -1) 0;
  padding: 36px var(--gut) 60px;
  background: rgba(250, 240, 221, .94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule-2);
}
.paper-sheet::before {
  content: ''; position: absolute; top: 0; right: var(--gut); width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--paper) 0 50%, var(--fold) 50% 100%);
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.paper-sheet > .g:first-of-type, .paper-sheet > .section:first-of-type { margin-top: 0; }
.paper-sheet .panel { background: rgba(255, 250, 238, .92); }