/* Plot Desk — paper-cutout bands. Tokens first, then components. */
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/fraunces-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/fraunces-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #efe6d2;
  --surface: #f8f3e6;
  --text: #2b2f1a;
  --muted: #5d6044;
  --accent: #55661f;
  --accent-text: #f8f3e6;
  --highlight: #d9a283;
  --sage: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --sage-deep: color-mix(in srgb, var(--accent) 62%, var(--bg));
  --clay: var(--highlight);
  --clay-deep: color-mix(in srgb, var(--highlight) 62%, var(--text));
  --clay-num: color-mix(in srgb, var(--highlight) 80%, var(--text));
  --olive-deep: color-mix(in srgb, var(--accent) 72%, var(--text));
  --field: color-mix(in srgb, var(--surface) 55%, white);
  --field-line: color-mix(in srgb, var(--accent) 70%, var(--text));
  --fibre: var(--surface);
  --line: color-mix(in srgb, var(--text) 28%, var(--bg));
  --error-bg: color-mix(in srgb, var(--highlight) 38%, var(--surface));
  --ok-bg: color-mix(in srgb, var(--accent) 16%, var(--surface));

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-label: clamp(0.85rem, 0.82rem + 0.1vw, 0.92rem);
  --fs-small: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem);
  --fs-display: clamp(2.7rem, 1.4rem + 5.8vw, 6.6rem);
  --fs-numeral: clamp(15rem, 112vw, 40rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  --radius: 3px;
  --radius-pill: 999px;
  --border: 2px solid var(--text);
  --shadow: 0 2px 0 color-mix(in srgb, var(--text) 18%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--text) 40%, transparent);
  --dur: 160ms;
  --dur-rise: 250ms;
  --tear-h: 44px;
  --tear-foot: var(--tear-6);
  --tear-1: polygon(0.0% 6px, 1.7% 9px, 3.0% 20px, 5.9% 3px, 8.6% 3px, 10.2% 21px, 11.9% 9px, 13.8% 14px, 16.3% 10px, 18.4% 18px, 20.4% 3px, 23.1% 21px, 24.3% 8px, 25.7% 15px, 26.9% 10px, 30.0% 22px, 32.7% 26px, 33.9% 10px, 36.7% 2px, 38.3% 22px, 39.8% 8px, 42.8% 21px, 46.0% 20px, 47.4% 12px, 49.8% 15px, 51.8% 8px, 54.3% 12px, 55.5% 21px, 56.9% 2px, 59.5% 10px, 61.9% 8px, 65.2% 4px, 66.6% 2px, 68.9% 8px, 70.7% 20px, 72.9% 6px, 75.2% 6px, 77.7% 10px, 79.1% 2px, 81.7% 27px, 82.9% 8px, 84.8% 21px, 86.7% 9px, 89.9% 15px, 92.5% 22px, 93.7% 18px, 95.7% 4px, 97.6% 24px, 99.8% 26px, 100% 24px, 100% 100%, 0% 100%);
  --tear-2: polygon(0.0% 7px, 2.9% 16px, 6.4% 21px, 10.9% 8px, 15.0% 6px, 19.8% 7px, 23.1% 2px, 27.5% 8px, 30.0% 7px, 33.9% 8px, 35.8% 12px, 39.1% 23px, 43.9% 21px, 47.0% 22px, 49.6% 2px, 52.4% 24px, 56.1% 15px, 58.9% 3px, 63.5% 9px, 65.5% 19px, 70.4% 2px, 73.9% 13px, 77.7% 28px, 79.9% 7px, 83.3% 4px, 87.2% 16px, 92.1% 2px, 95.3% 8px, 97.2% 18px, 100% 2px, 100% 100%, 0% 100%);
  --tear-3: polygon(0.0% 10px, 1.8% 5px, 2.7% 2px, 3.9% 10px, 5.6% 12px, 7.5% 19px, 8.4% 26px, 9.4% 14px, 11.4% 12px, 13.6% 14px, 15.2% 2px, 16.5% 7px, 18.8% 12px, 20.6% 5px, 23.0% 14px, 25.3% 2px, 27.3% 0px, 29.4% 24px, 31.5% 10px, 33.2% 7px, 35.6% 12px, 36.4% 10px, 37.8% 14px, 38.8% 26px, 41.1% 10px, 42.8% 10px, 45.2% 26px, 46.6% 12px, 48.7% 5px, 50.1% 12px, 51.5% 2px, 53.1% 5px, 54.2% 17px, 56.0% 5px, 57.3% 29px, 59.6% 24px, 61.9% 12px, 64.2% 10px, 66.4% 5px, 68.7% 7px, 70.4% 2px, 71.8% 2px, 73.7% 14px, 75.3% 12px, 77.4% 22px, 79.2% 19px, 80.8% 2px, 81.8% 10px, 82.7% 12px, 84.9% 31px, 86.5% 14px, 88.8% 26px, 90.8% 29px, 92.0% 31px, 92.8% 10px, 94.6% 31px, 96.7% 17px, 97.9% 31px, 100% 24px, 100% 100%, 0% 100%);
  --tear-4: polygon(0.0% 9px, 6.3% 30px, 9.2% 23px, 12.4% 0px, 15.4% 12px, 21.4% 13px, 26.9% 22px, 32.9% 12px, 37.6% 33px, 43.6% 21px, 45.7% 29px, 50.4% 29px, 53.3% 28px, 57.0% 19px, 59.4% 22px, 63.3% 14px, 67.0% 29px, 70.1% 10px, 74.2% 24px, 79.9% 26px, 84.4% 9px, 88.9% 18px, 93.7% 28px, 96.3% 12px, 100% 16px, 100% 100%, 0% 100%);
  --tear-5: polygon(0.0% 6px, 3.2% 5px, 6.9% 18px, 10.4% 20px, 13.8% 13px, 17.9% 14px, 19.7% 6px, 21.2% 13px, 22.6% 20px, 24.6% 0px, 28.7% 8px, 32.2% 25px, 34.9% 25px, 37.3% 9px, 41.1% 6px, 44.1% 0px, 46.0% 5px, 47.8% 12px, 49.4% 4px, 52.7% 26px, 54.6% 12px, 57.6% 16px, 60.9% 18px, 62.6% 13px, 64.6% 22px, 67.1% 13px, 71.0% 23px, 74.0% 21px, 77.8% 9px, 81.4% 1px, 84.4% 9px, 88.1% 3px, 91.2% 16px, 92.9% 4px, 95.2% 22px, 98.6% 16px, 100% 3px, 100% 100%, 0% 100%);
  --tear-6: polygon(0.0% 7px, 2.7% 21px, 4.3% 1px, 5.7% 21px, 7.6% 16px, 10.0% 24px, 12.3% 24px, 14.0% 18px, 16.0% 23px, 17.7% 4px, 19.4% 25px, 21.5% 9px, 23.4% 15px, 25.3% 20px, 27.4% 15px, 28.8% 7px, 30.4% 19px, 32.5% 26px, 35.4% 3px, 36.7% 15px, 38.1% 19px, 39.1% 12px, 40.9% 4px, 42.0% 2px, 44.1% 1px, 45.8% 4px, 48.5% 15px, 50.4% 24px, 52.5% 23px, 54.8% 9px, 56.9% 10px, 59.0% 3px, 61.5% 4px, 63.0% 9px, 65.0% 19px, 66.2% 1px, 68.0% 1px, 70.6% 22px, 72.0% 24px, 74.4% 12px, 76.0% 13px, 77.5% 15px, 79.0% 13px, 80.6% 19px, 82.3% 12px, 85.0% 6px, 86.2% 19px, 88.5% 7px, 89.8% 26px, 92.6% 11px, 94.6% 25px, 96.5% 15px, 97.7% 2px, 99.4% 14px, 100% 9px, 100% 100%, 0% 100%);
  --tear-bottom: polygon(0% 0%, 100% 0%, 100.0% calc(100% - 3px), 97.5% calc(100% - 1px), 96.2% calc(100% - 0px), 93.4% calc(100% - 6px), 92.2% calc(100% - 8px), 89.1% calc(100% - 1px), 87.7% calc(100% - 5px), 85.3% calc(100% - 8px), 81.9% calc(100% - 6px), 79.0% calc(100% - 6px), 77.0% calc(100% - 4px), 74.0% calc(100% - 4px), 70.9% calc(100% - 7px), 68.6% calc(100% - 5px), 66.4% calc(100% - 1px), 64.5% calc(100% - 8px), 62.9% calc(100% - 0px), 60.4% calc(100% - 2px), 57.8% calc(100% - 6px), 54.2% calc(100% - 7px), 50.9% calc(100% - 9px), 49.6% calc(100% - 5px), 47.3% calc(100% - 0px), 45.9% calc(100% - 2px), 42.4% calc(100% - 4px), 39.4% calc(100% - 6px), 37.2% calc(100% - 5px), 34.7% calc(100% - 2px), 33.4% calc(100% - 2px), 30.1% calc(100% - 8px), 28.5% calc(100% - 0px), 25.6% calc(100% - 1px), 23.0% calc(100% - 0px), 21.4% calc(100% - 4px), 18.6% calc(100% - 6px), 16.9% calc(100% - 2px), 13.9% calc(100% - 4px), 10.7% calc(100% - 6px), 8.5% calc(100% - 3px), 7.0% calc(100% - 6px), 5.2% calc(100% - 2px), 2.3% calc(100% - 9px), 0% calc(100% - 5px));


}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  overflow-x: hidden; font-variant-numeric: tabular-nums;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; }
p { margin: 0 0 var(--s4); text-wrap: pretty; max-width: 66ch; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, var(--text)); }
.band--olive a:hover, .footer a:hover { color: var(--highlight); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 5px var(--bg); }
.band--olive :focus-visible, .footer :focus-visible { outline-color: var(--surface); box-shadow: 0 0 0 5px var(--accent); }
.skip { position: absolute; left: var(--s4); top: -100px; background: var(--accent); color: var(--accent-text); padding: var(--s3) var(--s4); z-index: 20; }
.skip:focus { top: var(--s2); }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); }
.hint, .fine { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.band--sage .hint, .band--sage .fine, .footer .hint, .footer .fine, .panel--sage .hint { color: var(--text); }
.wash { background: linear-gradient(transparent 12%, var(--highlight) 12% 92%, transparent 92%); padding: 0 0.12em; margin: 0 -0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- bands ---------- */
.band { --band-bg: var(--bg); background: var(--band-bg); position: relative; padding: calc(var(--tear-h) + var(--s12)) var(--s5) var(--s16); overflow: hidden; isolation: isolate; }
.band + .band { margin-top: calc(var(--tear-h) * -0.6); }
.band > * { position: relative; z-index: 1; }
.band--oat { --band-bg: var(--bg); }
.band--sage { --band-bg: var(--sage); }
.band--clay { --band-bg: var(--clay); }
.band--olive { --band-bg: var(--accent); color: var(--accent-text); }
.band--deep { --band-bg: var(--olive-deep); color: var(--accent-text); }
.band--surface { --band-bg: var(--surface); }
.t1 { --tear: var(--tear-1); }
.t2 { --tear: var(--tear-2); }
.t3 { --tear: var(--tear-3); }
.t4 { --tear: var(--tear-4); }
.t5 { --tear: var(--tear-5); }
.t6 { --tear: var(--tear-6); }
.band.t1, .band.t2, .band.t3, .band.t4, .band.t5, .band.t6 { clip-path: var(--tear); background: var(--fibre); }
.band.t1::before, .band.t2::before, .band.t3::before, .band.t4::before, .band.t5::before, .band.t6::before { content: ""; position: absolute; inset: 6px 0 0; background: var(--band-bg); clip-path: var(--tear); z-index: 0; }
.wrap { max-width: 74rem; margin-inline: auto; }

/* nav + hero */
.hero { padding-top: var(--s5); padding-bottom: var(--s20); }
.nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); max-width: 74rem; margin: 0 auto var(--s10); }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; }
.nav ul { display: flex; gap: 0 var(--s4); list-style: none; margin: 0; padding: 0; }
.nav li a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.nav .opt { display: none; }
.nav li a:hover, .nav li a[aria-current] { text-decoration: underline; }
.hero-grid { display: grid; gap: var(--s10); max-width: 74rem; margin-inline: auto; align-items: center; }
.hero h1 { margin-bottom: var(--s6); }
.hero .lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; }
.hero-art { position: relative; justify-self: center; width: min(100%, 52rem); transform: rotate(-2.5deg); filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--text) 16%, transparent)) drop-shadow(0 18px 16px color-mix(in srgb, var(--text) 30%, transparent)); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* numbered steps */
.step { min-height: 88vw; display: flex; align-items: flex-end; padding-top: calc(var(--tear-h) + 36vw); padding-bottom: var(--s10); }
.step-copy { width: 100%; }
.step .numeral { position: absolute; z-index: 0; left: -0.2em; top: calc(var(--tear-h) * 0.2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-numeral); line-height: 0.82; letter-spacing: -0.06em; user-select: none; pointer-events: none; }
.band--sage .numeral { color: var(--sage-deep); }
.band--clay .numeral { color: var(--clay-num); }
.band--clay .numeral { left: auto; right: -0.2em; }
.step-copy { display: grid; }
.step-copy h2 { margin-bottom: var(--s4); font-size: var(--fs-h2); font-weight: 800; }
.step-copy p { font-size: var(--fs-lead); line-height: 1.5; margin-bottom: 0; max-width: 36ch; }
.step-copy p, .step-copy h2 { position: relative; }

/* tool */
.band--tool { padding: var(--s6) 0 0; min-height: 100vh; }
.band--tool > .tool-sheet { color: var(--text); background: var(--bg); clip-path: var(--tear-4); padding: calc(var(--tear-h) + var(--s8)) var(--s5) var(--s16); margin-top: var(--s2); min-height: 100vh; }
.tool-head { max-width: 80rem; margin: 0 auto var(--s8); display: grid; gap: var(--s3); }
.tool-grid { max-width: 80rem; margin: 0 auto; display: grid; gap: var(--s10); }
.tool-grid > .cell { min-width: 0; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--text) 16%, transparent)) drop-shadow(0 12px 12px color-mix(in srgb, var(--text) 22%, transparent)); }
.panel { background: var(--surface); padding: var(--s8) var(--s5); border-radius: var(--radius); transform: rotate(-0.4deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 94% 100%, 80% calc(100% - 5px), 61% 100%, 43% calc(100% - 4px), 24% 100%, 9% calc(100% - 5px), 0 calc(100% - 2px)); padding-bottom: var(--s8); }
.panel > h3 { margin-bottom: var(--s4); }
.panel--tilt { transform: rotate(0.5deg); background: color-mix(in srgb, var(--clay) 28%, var(--surface)); }
.panel--sage { background: color-mix(in srgb, var(--sage) 75%, var(--surface)); transform: rotate(0.4deg); }
.panel--sage input, .panel--sage select { background: var(--field); }
.step-tag { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.step-tag b { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 0.8; letter-spacing: -0.04em; color: var(--accent); }
.empty--grain { display: flex; gap: var(--s4); align-items: center; }
.empty--grain .grain { flex: none; color: var(--accent); width: 72px; height: 72px; }
.fields { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s1); }
.field label, .legend { font-weight: 600; font-size: 1.0625rem; }
.field .hint { margin: 0; }
input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  font: inherit; font-size: 1.0625rem; color: var(--text); background: var(--field); border: 1.5px solid var(--field-line); border-radius: var(--radius);
  padding: var(--s3); min-height: 48px; width: 100%; transition: background var(--dur), border-color var(--dur);
}
textarea { min-height: 9rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1rem; line-height: 1.5; resize: vertical; }
input:hover, select:hover, textarea:hover { background: var(--field); border-color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--surface); background: var(--surface); }
input:disabled { opacity: 0.5; cursor: not-allowed; }
button:disabled, button:disabled:hover { opacity: 1; cursor: not-allowed; background: transparent; color: var(--muted); border: 1.5px dashed var(--muted); text-decoration: none; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: var(--clay-deep); background: var(--error-bg); }
input[type=file] { font: inherit; font-size: var(--fs-small); min-height: 44px; padding: var(--s2) 0; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; background: transparent; border: var(--border); border-radius: var(--radius); padding: var(--s2) var(--s4); min-height: 44px; margin-right: var(--s3); cursor: pointer; color: var(--text); }
input[type=file]::file-selector-button:hover { background: var(--bg); }
.two { display: grid; gap: var(--s4); }
.check { display: flex; gap: var(--s3); align-items: flex-start; min-height: 44px; padding: var(--s2) 0; cursor: pointer; }
.check input { width: 24px; height: 24px; min-height: 0; flex: none; accent-color: var(--accent); margin: 2px 0 0; }
.check span { font-size: var(--fs-small); }

/* buttons */
.btn { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s6); border-radius: var(--radius); border: var(--border); border-color: var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; transition: background var(--dur), color var(--dur), transform var(--dur); }
.btn:hover { background: var(--text); border-color: var(--text); color: var(--accent-text); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn--secondary:hover { background: var(--text); color: var(--bg); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--s3); }
.btn--quiet:hover { background: var(--bg); color: var(--text); border-color: transparent; }
.band--olive .btn--secondary, .footer .btn--secondary { color: var(--accent-text); border-color: var(--accent-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* slips, tags, banners */
.slips { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.slip { background: var(--error-bg); border-left: 10px solid var(--clay-deep); padding: var(--s3) var(--s4); font-size: var(--fs-small); line-height: 1.45; clip-path: polygon(0 0, 100% 0, 98% 35%, 100% 70%, 97% 100%, 0 100%); transform: rotate(-0.3deg); animation: rise var(--dur-rise) ease-out both; }
.slip--warn { background: var(--surface); border-left-color: var(--line); }
.slip b { display: block; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.banner { background: var(--ok-bg); border-left: 10px solid var(--accent); padding: var(--s3) var(--s4); font-size: var(--fs-small); margin-top: var(--s4); animation: rise var(--dur-rise) ease-out both; }
.banner[hidden], .slips:empty { display: none; }
.tag { display: inline-block; font-size: var(--fs-label); font-weight: 600; padding: 2px var(--s3); border-radius: var(--radius-pill); border: 1.5px solid var(--text); line-height: 1.5; }
.tag--high { background: var(--clay); }
.tag--low { background: var(--ok-bg); }
.empty { border: 2px dashed var(--line); border-radius: var(--radius); padding: var(--s6) var(--s4); color: var(--muted); font-size: var(--fs-small); text-align: left; }
.empty strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--s1); }

/* plot preview */
.preview { margin-top: var(--s4); border: var(--border); border-radius: var(--radius); background: var(--sage); }
.preview svg { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.preview figcaption { font-size: var(--fs-label); padding: var(--s2) var(--s3); background: var(--surface); border-top: var(--border); color: var(--muted); }

/* supplier list */
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.row { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); align-items: center; border-bottom: 1.5px solid var(--line); padding: var(--s2) 0; }
.row .check { padding: 0; }
.row .meta { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--muted); }
.row .name { font-weight: 600; }

/* results */
.sheet { background: var(--surface); padding: var(--s6) var(--s5) var(--s10); transform: rotate(0.5deg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 95% 100%, 86% calc(100% - 6px), 72% calc(100% - 1px), 58% calc(100% - 8px), 41% 100%, 27% calc(100% - 6px), 12% calc(100% - 2px), 0 calc(100% - 7px)); animation: rise var(--dur-rise) ease-out both; margin-top: var(--s6); }
.sheet:nth-of-type(even) { transform: rotate(-0.4deg); }
.sheet h3 { margin-bottom: var(--s3); }
.sheet pre { margin: var(--s3) 0 0; max-height: 16rem; overflow: auto; background: var(--bg); padding: var(--s3); font-size: 0.78rem; line-height: 1.45; border: 1.5px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); display: block; overflow-x: auto; }
th, td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); font-size: var(--fs-small); }
.kv dt { color: var(--muted); font-weight: 600; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.hash { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; }
.worksheet { padding-left: var(--s5); font-size: var(--fs-small); }
.worksheet li { margin-bottom: var(--s3); }
.worksheet .line { display: block; border-bottom: 1.5px solid var(--text); height: 1.6rem; }
.results-empty { margin-top: var(--s6); }
.loading::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: var(--s2); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -0.1em; }

/* limits, footer */
.t5.band--deep { padding-top: calc(var(--tear-h) + var(--s20)); padding-bottom: var(--s24); }
.limits { display: grid; gap: var(--s10); max-width: 74rem; margin-inline: auto; }
.limits h2 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); }
.limits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
.limits li { padding-left: var(--s8); position: relative; max-width: 60ch; font-size: 1.1875rem; line-height: 1.6; color: var(--accent-text); }
.limits li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 18px; height: 3px; background: var(--highlight); }
.limits li b { font-weight: 600; }
.footer { padding: calc(var(--tear-h) + var(--s10)) var(--s5) var(--s10); margin-top: calc(var(--tear-h) * -0.6); clip-path: var(--tear-foot); position: relative; }
.footer-grid { max-width: 74rem; margin-inline: auto; display: grid; gap: var(--s10); }
.footer h2 { margin-bottom: var(--s3); }
.footer small { display: block; color: var(--text); font-size: var(--fs-small); }
.footer { --band-bg: var(--sage-deep); background: var(--fibre); }
.footer::before { content: ""; position: absolute; inset: 6px 0 0; background: var(--sage-deep); clip-path: var(--tear-foot); z-index: 0; }
.footer > * { position: relative; z-index: 1; }
.footer--slim .footer-grid { gap: var(--s4); }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.hero--tight { padding-bottom: var(--s4); }
.hero--flush { padding-bottom: 0; }
.band--sage.pad-tight { padding-bottom: var(--s16); }
.footer ul a { white-space: nowrap; display: inline-flex; min-height: 44px; align-items: center; }

/* prose pages */
.prose-grid { max-width: 74rem; margin: 0 auto; display: grid; gap: var(--s8); }
.prose h2 { font-size: var(--fs-h3); margin: var(--s8) 0 var(--s3); }
.prose ul { padding-left: var(--s5); max-width: 62ch; }
.big404 { font-family: var(--font-display); font-weight: 800; font-size: clamp(8rem, 36vw, 24rem); line-height: 0.82; letter-spacing: -0.06em; color: var(--clay-num); margin: 0; max-width: none; }
.nf { padding-bottom: var(--s16); }
.nf-grid { grid-template-columns: minmax(0, 1fr); display: grid; gap: var(--s6); align-items: center; }
.nf h1 { font-size: var(--fs-h2); margin-bottom: var(--s4); }
.wash--oat { background: linear-gradient(transparent 12%, var(--bg) 12% 92%, transparent 92%); }
.slip-card { background: var(--surface); padding: var(--s6) var(--s5) var(--s8); transform: rotate(-1deg); filter: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 90% 100%, 74% calc(100% - 7px), 55% 100%, 36% calc(100% - 6px), 18% 100%, 0 calc(100% - 4px)); border-left: 12px solid var(--clay-deep); align-self: start; }
.slip-card .slip-lead { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.1; max-width: 16ch; }
.slip-card ul { margin: 0; padding-left: var(--s5); font-size: var(--fs-small); }
.slip-card li { margin-bottom: var(--s2); }

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > footer { background: var(--fibre); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { translate: 0 -6px; } }

@media (min-width: 48em) {
  .band { padding-inline: var(--s12); }
  .nav ul { gap: 0 var(--s6); }
  .step { padding-top: calc(var(--tear-h) + var(--s16)); padding-bottom: var(--s20); min-height: 26rem; align-items: center; }
  .step .numeral { top: 50%; translate: 0 -48%; left: -0.1em; font-size: min(40vw, 40rem); }
  .band--clay .numeral { left: auto; right: -0.1em; }
  .step-copy { width: 100%; max-width: none; margin: 0; padding-left: calc(min(40vw, 40rem) * 0.42 + var(--s12)); }
  .band--clay .step-copy { padding-left: 0; padding-right: calc(min(40vw, 40rem) * 0.42 + var(--s12)); justify-content: end; }
  .step-copy h2 { font-size: clamp(2.2rem, 1rem + 3vw, 3.8rem); }
  .step-copy p { max-width: 38ch; }
  .nf-grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--s12); }
  .two { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .nav .opt { display: block; }
  .limits { column-gap: var(--s8); }
  .panel { padding-inline: var(--s8); }
  .band--tool > .tool-sheet { padding-inline: var(--s12); }
  .footer { padding-inline: var(--s12); }
  .limits { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; column-gap: var(--s16); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer--slim .foot-links { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 var(--s5); }
}
@media (min-width: 64em) {
  .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--s12); }
  .cell-out { grid-column: 2; }
  .panel { padding-inline: var(--s10); }
}
@media (min-width: 80em) {
  .prose-grid { grid-template-columns: 1fr 2fr; }
  .slip-card { position: sticky; top: var(--s8); }
  .footer--slim .footer-grid { grid-template-columns: 1fr 2fr; gap: var(--s8); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .step .numeral { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    .hero-art { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: #fff; }
  .band, .footer, .nav, .panel, .tool-head, .skip, .btn-row, .no-print { display: none !important; }
  .band--tool, .band--tool > .tool-sheet { display: block !important; background: #fff; clip-path: none; padding: 0; min-height: 0; }
  .band--tool .tool-grid, .cell { display: block !important; }
  .cell:not(.cell-out) { display: none !important; }
  .sheet { box-shadow: none; transform: none; clip-path: none; animation: none; }
}
main:has(.nf) { background: var(--clay); }