*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#app { position: relative; z-index: 1; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--brass); color: var(--brass-ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.01em; }
h2 { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.08; }
h3 { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.15; }
h4 { font-family: var(--f-ui-sc); font-weight: 700; font-size: var(--t-sm); letter-spacing: .09em; color: var(--ink-2); }
p { margin: 0; }
p + p { margin-top: .8em; }
ul, ol { margin: 0; padding-left: 1.2em; }
em { font-style: italic; }
strong { font-weight: 700; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--brass) 55%, transparent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brass-hi); text-decoration-color: currentColor; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s-6) 0; }
table { border-collapse: collapse; }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-1); }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--brass); color: var(--brass-ink); padding: 8px 14px; border-radius: var(--r-2);
  font-family: var(--f-ui); font-weight: 700; text-decoration: none; transition: top var(--dur-1);
}
.skip-link:focus { top: 10px; }

.sc { font-family: var(--f-ui-sc); font-weight: 500; letter-spacing: .08em; }
.ui { font-family: var(--f-ui); }
.num { font-family: var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }
.display { font-family: var(--f-display); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.chip-past, .chip-present, .chip-future {
  display: inline-block; font-family: var(--f-ui-sc); font-weight: 700; font-size: .78em; letter-spacing: .08em;
  padding: .12em .6em .18em; border-radius: var(--r-pill); vertical-align: .08em; margin-right: .35em;
}
.chip-past { color: var(--past); background: var(--past-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--past) 45%, transparent); }
.chip-present { color: var(--present); background: var(--present-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--present) 45%, transparent); }
.chip-future { color: var(--future); background: var(--future-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--future) 45%, transparent); }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--ground); }
::-webkit-scrollbar-track { background: transparent; }

::view-transition-group(root) { background: var(--ground); animation-duration: 280ms; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-out 110ms ease-in both; }
::view-transition-new(root) { animation: vt-in 170ms cubic-bezier(.2, .7, .3, 1) 110ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}