/* The World, direction B. Written Wed 4 Nov 2026 by Claude (builder B). Prefix bw-. */
.bw-hero { position: relative; min-height: max(640px, calc(100svh - var(--b-nav) - 50px)); overflow: hidden; }
.bw-stage { position: absolute; inset: 0; touch-action: pan-y; cursor: pointer; }
.bw-stage canvas { display: block; width: 100%; height: 100%; }
.bw-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--b-bg) 0%, rgba(233, 230, 223, .92) 34%, rgba(233, 230, 223, 0) 56%); }
.bw-hero-in { position: relative; z-index: 2; min-height: inherit; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; pointer-events: none; padding: 56px 0 48px; }
.bw-copy { pointer-events: auto; max-width: 640px; }
.bw-copy .b-h1 { font-size: clamp(64px, 8.4vw, 150px); }
.bw-who { margin: 18px 0 0; max-width: 46ch; font-size: 16px; color: var(--b-mute); }
.bw-who b { color: var(--b-fg); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; margin-right: 4px; }
.bw-price { margin: 22px 0 0; max-width: 50ch; padding-top: 14px; border-top: 2px solid var(--b-fg); font-size: 16px; }
.bw-price b { font-weight: 600; }
.bw-price .b-date { display: block; margin-top: 6px; }
.bw-cap { align-self: end; justify-self: end; margin: 0; max-width: 360px; padding: 18px 20px; background: rgba(233, 230, 223, .94); border-top: 3px solid var(--b-fg); pointer-events: none; }
.bw-cap-h { margin: 0; font: 900 34px/.92 var(--b-disp); text-transform: uppercase; }
.bw-cap-p { margin: 8px 0 8px; font-size: 14px; line-height: 1.45; color: var(--b-mute); }
@media (max-width: 900px) {
  .bw-hero::before { display: none; }
  .bw-hero { min-height: 0; display: flex; flex-direction: column; }
  .bw-stage { position: relative; inset: auto; order: 2; height: 360px; }
  .bw-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--b-bg) 0%, rgba(233, 230, 223, .92) 34%, rgba(233, 230, 223, 0) 56%); }
.bw-hero-in { display: contents; }
  .bw-copy { order: 1; width: min(var(--b-max), 100% - 2 * var(--b-gut)); margin: 0 auto; padding: 36px 0 8px; }
  .bw-copy .b-h1 { font-size: clamp(60px, 17vw, 120px); }
  .bw-cap { order: 3; justify-self: auto; width: min(var(--b-max), 100% - 2 * var(--b-gut)); max-width: none; margin: 0 auto 28px; padding: 14px 0 0; background: none; }
  .bw-cap-h { font-size: 28px; }
}

/* tokeniser */
.bw-tok-in input { width: 100%; min-height: 76px; padding: 0 20px; border: 3px solid var(--b-fg); border-radius: 4px; background: var(--b-card); color: var(--b-fg); font: 600 clamp(18px, 2vw, 28px)/1.2 var(--b-sans); }
.bw-tok-in input:focus { outline: none; border-color: var(--b-acc); }
.bw-tok-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; margin-top: 28px; }
.bw-tok-n { margin: 0; display: grid; }
.bw-tok-n b { font: 900 clamp(90px, 11vw, 180px)/.8 var(--b-disp); color: var(--b-acc); }
.bw-tok-n span { font: 900 28px/1 var(--b-disp); text-transform: uppercase; }
.bw-tok-list { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bw-t { display: inline-flex; align-items: baseline; padding: 8px 12px; font: 600 clamp(18px, 1.7vw, 24px)/1.1 var(--b-sans); background: var(--b-card); border: 2px solid var(--b-fg); }
.bw-t[data-k="1"] { background: var(--b-fg); color: var(--b-bg); }
.bw-t[data-k="2"] { background: var(--b-acc); color: var(--b-acc-ink); border-color: var(--b-acc); }
.bw-t i { font-style: normal; opacity: .55; margin-right: 2px; }
.bw-tok-empty { color: var(--b-mute); }
.bw-tok-note { margin: 22px 0 0; }
@media (max-width: 760px) { .bw-tok-out { grid-template-columns: 1fr; } }

/* map */
.bw-stage-row + .bw-stage-row { margin-top: 40px; }
.bw-stage-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: 900 clamp(26px, 2.6vw, 40px)/1 var(--b-disp); text-transform: uppercase; }
.bw-stage-h span { font: 400 13px/1 var(--b-mono); letter-spacing: .16em; color: var(--b-mute); }
.bw-map-note { margin: 22px 0 0; }

/* made with this */
.bw-made-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.bw-m { margin: 0; }
.bw-m-img { aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--b-fg); background: var(--b-bg2); }
.bw-m-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bw-m figcaption { padding-top: 12px; }
.bw-m .b-h3 { margin-top: 6px; }
.bw-m figcaption > p:last-child { margin: 6px 0 0; font-size: 15px; color: var(--b-mute); }
@media (max-width: 1000px) { .bw-made-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bw-made-row { grid-template-columns: 1fr 1fr; gap: 14px; } .bw-m figcaption > p:last-child { font-size: 13px; } }

/* steps */
.bw-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--b-fg); border: 2px solid var(--b-fg); }
.bw-steps li { background: var(--b-bg); padding: clamp(20px, 2.4vw, 34px); }
.bw-steps span { display: block; font: 900 clamp(56px, 6vw, 96px)/.8 var(--b-disp); color: var(--b-acc); margin-bottom: 20px; }
.bw-steps p { margin: 10px 0 0; color: var(--b-mute); }
@media (max-width: 760px) { .bw-steps { grid-template-columns: 1fr; } }