/* ========================= RESET + BASE ========================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}

html,body{overflow-x:clip}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* faint graph-paper ground: this is a page about ledgers */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 55% at 50% -10%,rgba(255,214,10,.055),transparent 60%);
}

/* ========================= TYPE ========================= */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:var(--lh-head);letter-spacing:-.018em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.01em}

p{text-wrap:pretty}
strong,b{font-weight:600;color:#fff}
em{font-style:italic}

.label{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}

/* ========================= SKIP + FOCUS ========================= */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--focus);border-radius:var(--radius);
}
.skip{
  position:absolute;left:0;top:0;transform:translateY(-140%);
  background:var(--yellow);color:#000;padding:.7rem 1.1rem;z-index:999;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  transition:transform var(--dur-1) var(--ease);
}
.skip:focus{transform:translateY(0)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ========================= LAYOUT ========================= */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.wrap--full{max-width:var(--full)}
.wrap--narrow{max-width:calc(var(--measure) + 2*var(--gut))}

.band{padding-block:var(--band);position:relative;z-index:1}
.band--tight{padding-block:calc(var(--band)*.6)}

.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.05em}
.prose p{color:var(--text-2)}
.prose p.lead{font-size:var(--t-lede);color:var(--text);line-height:1.5}

.hr{height:1px;background:var(--line);border:0;margin:0}

/* Grid and flex items take min-content as their automatic minimum size, which
   is how a long unbreakable label ends up widening a whole section on a phone.
   Every figure opts out of that floor by default. */
.fig__frame,.fig__frame > *{min-width:0}
.fig__frame > *{max-width:100%}

/* ========================= REVEAL ========================= */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}