/* BOUT uses type, a seam and facing readings. */
:root {
  --bout-steel: #0d1512;
  --bout-tight: 8px;
  --bout-group: 24px;
  --bout-section: clamp(64px, 8vw, 128px);
  --bout-inset: clamp(20px, 4vw, 64px);
  --bout-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bout-small: 12px;
  --bout-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --bout-subhead: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --bout-heading: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --bout-display: clamp(2.75rem, 1.7rem + 5vw, 6.5rem);
}
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--card); color: var(--ink); font: 400 var(--bout-body)/1.55 "Jost", sans-serif; overflow-wrap: anywhere; }
h1, h2, h3, p, figure, dl, dd, ol { margin: 0; }
h1, h2, h3 { font-family: "Bodoni Moda", serif; font-weight: 500; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--bout-display); }
h2 { font-size: var(--bout-heading); }
h3 { font-size: var(--bout-subhead); }
p { max-width: 70ch; }
a { color: inherit; text-underline-offset: .25em; }
button, input, select, summary { font: inherit; color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button, select, input:not([type=range]) { border: 1px solid var(--line); border-radius: 0; padding: 12px 16px; background: var(--card); color: var(--ink); min-height: 44px; max-width: 100%; }
input, select { min-width: 0; width: 100%; }
input[type=range] { accent-color: currentColor; min-height: 44px; cursor: ew-resize; }
button:hover, summary:hover { text-decoration: underline; text-underline-offset: .25em; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .65; }
[aria-invalid=true] { outline: 1px solid currentColor; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { color: var(--card); background: var(--ink); }
[hidden] { display: none !important; }
img, svg, canvas { max-width: 100%; display: block; }
.kicker, .mono-label { font: 400 var(--bout-small)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.mono, code, dd, output, time { font: 400 var(--bout-small)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
dt { font-size: .875rem; }
dd { overflow-wrap: anywhere; }
.btn { display: inline-flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 24px; border: 1px solid currentColor; background: var(--ink); color: var(--card); text-decoration: none; font: 400 1rem/1.4 "Jost", sans-serif; }
.btn:hover { text-decoration: underline; }
.btn-ghost { color: inherit; background: transparent; border-color: currentColor; }
.visually-hidden, .bout-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bout-skip:focus { display: block; position: fixed; inset: 8px auto auto 8px; z-index: 100; padding: 16px; background: var(--card); color: var(--ink); }
details { border-block: 1px solid var(--line); padding-block: 8px; }
summary { min-height: 44px; padding-block: 12px; }
details[open] { display: grid; gap: 16px; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th, td { padding: 16px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lab-out { display: grid; gap: 0; }
.lab-out > div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.lab-out dd { text-align: right; }
.field { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }