@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=Barlow:wght@400;500;600;700&family=Architects+Daughter&display=swap");

/* Buxton — the sketchbook: page, bar, masthead with fidelity, steps, terms, spectrum, scribbles, funnel. Values come from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); }

/* ---------- Page ---------- */
.bx-page {
  --fs: 18px; --lh: var(--baseline);
  container-type: inline-size; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-serif); font-size: var(--fs); line-height: var(--lh); font-weight: 400;
  font-optical-sizing: auto; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.bx-page *, .bx-page *::before, .bx-page *::after { box-sizing: border-box; }
.bx-page__inner { display: flow-root; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-3) var(--space-7); }
.bx-page__inner > * { max-width: var(--measure); margin-inline: auto; }
.bx-page__inner > .bx-wide { max-width: none; }
.bx-page figure { margin-inline: 0; }
.bx-page__inner > figure:not(.bx-wide) { margin-inline: auto; }
.bx-page__inner > p { margin-block: 0; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }
.bx-page__inner > p + p { text-indent: 1.4em; }
@container (min-width: 32rem) { .bx-page__inner > p { text-align: justify; text-justify: inter-word; } }
.bx-page__inner > h2 { margin-block: calc(var(--lh) * 2) calc(var(--lh) / 2); font: 600 15px/24px var(--font-sans); letter-spacing: .03em; }
.bx-page__inner > h3 { margin-block: var(--lh) 0; font: 700 18px/28px var(--font-sans); }
.bx-page__inner > ul, .bx-page__inner > ol { margin-block: calc(var(--lh) / 2); padding-left: 1.4em; }
.bx-page em, .bx-page i { font-style: italic; }
.bx-page strong, .bx-page b { font-weight: 700; }
.bx-page a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.bx-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-page code { font-size: .85em; }

/* ---------- Running bar ---------- */
.bx-bar { display: flex; gap: .7em; align-items: baseline; margin: 0 calc(50% - 50cqw) var(--space-6) !important; padding: 10px max(var(--space-3), calc(50cqw - 50% + var(--space-3))); background: var(--bar); color: var(--on-bar); font: 500 13px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; max-width: none !important; }
.bx-bar__sep { opacity: .7; }

/* ---------- Masthead ---------- */
.bx-masthead { margin-bottom: var(--space-7) !important; }
.bx-kicker { margin: 0 0 var(--space-3); font: 600 13px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.bx-title { margin: 0 0 var(--space-3); font: 700 36px/42px var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
.bx-deck { margin: 0; font-size: 20px; line-height: var(--lh); font-style: italic; text-wrap: pretty; }
.bx-byline { margin: var(--space-3) 0 0; font: 500 14px/21px var(--font-sans); color: var(--graphite); }
.bx-fidelity { display: block; margin-top: var(--space-4); max-width: 22rem; }
.bx-fidelity svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Sketch primitives ---------- */
.bx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bx-svg .s1 { fill: none; stroke: var(--ink); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bx-svg .s2 { fill: none; stroke: var(--ink); stroke-width: 1.1px; stroke-linecap: round; stroke-linejoin: round; opacity: .7; vector-effect: non-scaling-stroke; }
.bx-svg .soft { stroke: var(--graphite); }
.bx-svg .mark { stroke: var(--marker); }
.bx-svg .f-ink { fill: var(--ink); stroke: none; }
.bx-svg .f-sketch { fill: var(--sketch); stroke: none; }
.bx-svg .f-prototype { fill: var(--prototype); stroke: none; }
.bx-svg .f-paper { fill: var(--paper-2); stroke: none; }
.bx-svg .f-mark { fill: var(--marker); stroke: none; }
.bx-svg .f-field { fill: var(--ink-on-field); stroke: none; }
.bx-svg .hand { font-family: var(--font-hand); fill: var(--ink); letter-spacing: .02em; }
.bx-svg .label { font-family: var(--font-sans); font-weight: 700; fill: var(--ink); }
.bx-svg .label-field { font-family: var(--font-sans); font-weight: 700; fill: var(--ink-on-field); }
.bx-svg .on-field { stroke: var(--ink-on-field); }
.bx-svg .label-soft { font-family: var(--font-sans); font-weight: 500; fill: var(--graphite); }

/* ---------- Figure frame (Scribble, Thumbnails, Funnel) ---------- */
.bx-fig { margin-block: var(--space-5); }
.bx-fig__art { padding: var(--space-4) var(--space-3); background: var(--paper-2); }
.bx-fig--bare .bx-fig__art { padding: 0; background: none; }
.bx-fig__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: var(--space-2); }
.bx-fig figcaption { margin: 0; max-width: 36em; font: 500 14px/21px var(--font-sans); letter-spacing: .02em; color: var(--graphite); }
.bx-fig figcaption b { color: var(--ink); font-weight: 700; margin-right: .35em; }
.bx-button { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; }
.bx-button:hover { background: var(--ink); color: var(--paper); }

/* ---------- Thumbnails ---------- */
.bx-thumbs { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-3) var(--space-3); margin: 0; padding: 0; list-style: none; }
.bx-thumbs li { background: var(--paper); padding: var(--space-2); }
.bx-thumbs__n { display: block; margin-top: 4px; font: 400 14px/18px var(--font-hand); letter-spacing: .03em; }
@container (max-width: 40rem) { .bx-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Step: the workbook's numbered walkthrough ---------- */
.bx-step { display: grid; grid-template-columns: 1fr; margin-block: var(--space-5) !important; }
.bx-step__n { font: 700 56px/56px var(--font-sans); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.bx-step__body > p { margin: 0; text-wrap: pretty; }
.bx-step__body > p + p { margin-top: calc(var(--lh) / 2); }
@container (min-width: 52rem) {
  .bx-step { grid-template-columns: var(--hang) minmax(0, 1fr); margin-left: calc(50% - var(--measure) / 2 - var(--hang)) !important; max-width: calc(var(--measure) + var(--hang)) !important; }
  .bx-step__n { margin: -6px 0 0; }
}

/* ---------- Terms: run-in definitions ---------- */
.bx-terms { margin-block: var(--space-4) !important; padding-left: 1.4em; }
.bx-terms p { margin: 0 0 calc(var(--lh) / 2); text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
.bx-terms b { font-weight: 700; font-style: italic; margin-right: .25em; }

/* ---------- Spectrum: sketch → prototype pairs, hand-lettered ---------- */
.bx-spectrum { margin-block: var(--space-5) !important; display: grid; grid-template-columns: max-content 6rem max-content; gap: 6px var(--space-3); align-items: center; font-family: var(--font-hand); font-size: 20px; line-height: 26px; letter-spacing: .03em; text-transform: uppercase; }
.bx-spectrum__head { font-size: 24px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; margin-bottom: 6px; }
.bx-spectrum__arrow { height: 20px; }
.bx-spectrum__arrow svg { display: block; width: 6rem; height: auto; overflow: visible; }

/* ---------- Callout: the highlighter box ---------- */
.bx-callout { margin-block: var(--space-4) !important; padding: var(--space-4); background: var(--prototype); color: var(--ink-on-field); font: 500 16px/24px var(--font-sans); }
.bx-callout p { margin: 0 0 calc(var(--lh) / 2); }
.bx-callout p:last-child { margin-bottom: 0; }
.bx-callout b { font-weight: 700; }

/* ---------- Thumbnails voting ---------- */
.bx-fig__buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-thumbs__pick { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bx-thumbs--vote li:hover { outline: 1.5px solid var(--ink); }
.bx-dot { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: var(--radius-round); background: var(--marker); }
.bx-votes { margin-left: .4em; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bx-button:disabled { opacity: .4; cursor: default; }
.bx-button:disabled:hover { background: transparent; color: var(--ink); }
.bx-button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Resolve: sketch → prototype slider ---------- */
.bx-resolve { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font: 400 15px/18px var(--font-hand); letter-spacing: .03em; text-transform: uppercase; }
.bx-range { width: 100%; accent-color: var(--marker); }

/* ---------- Sketchpad ---------- */
.bx-pad { padding: 0; }
.bx-pad__canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; touch-action: none; cursor: crosshair; }

/* ---------- Field ---------- */
.bx-field__canvas { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 9); background: var(--paper-2); touch-action: pan-y; }