/* Heat field showpiece, in the Craftwild kit (~/Dev/parts/kits.json "craftwild"): a white page on a faint 9px grid,
   calm black type set large but light (Geist standing in for Sneak), tiny tracked mono labels, square corners. */
:root { --ink: #0a0a0a; --ink-2: #2a2a2a; --muted: #8b8b8b; --line: rgba(10, 10, 10, .12); --cell: 9px;
  --mono: "Geist Mono", "SFMono-Regular", ui-monospace, Menlo, monospace; --gutter: clamp(16px, 5vw, 54px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: #fff; color: var(--ink); overflow-x: hidden; font: 400 16px/1.5 Geist, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

.page { position: relative; z-index: 1; }

/* the hero: a white head bar on top, then the open field (the canvas shows through the transparent hero) */
.hero { position: relative; min-height: 100vh; }
.hhead {
  position: relative; background: #fff; padding: calc(var(--cell) * 4) var(--gutter) calc(var(--cell) * 4);
  display: grid; grid-template-columns: 2.1fr 1fr; gap: calc(var(--cell) * 3); border-bottom: 1px solid var(--line);
}
.hl { font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 7.4vw, 78px); line-height: .92; letter-spacing: -.035em; align-self: start; }
.hcol { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--cell) * 3); padding-left: calc(var(--cell) * 3); }
.hcol::before { content: ""; position: absolute; left: 0; top: calc(var(--cell) * -4); bottom: calc(var(--cell) * -4); width: 1px; background: var(--line); }
.hdesc { text-transform: uppercase; font-size: clamp(14px, 1.9vw, 20px); line-height: 1.18; letter-spacing: -.01em; }
.htag { font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }

/* below the hero: white page, the field has frayed out */
.next { padding: calc(var(--cell) * 8) var(--gutter) 60vh; max-width: 1176px; }
.kick { font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: calc(var(--cell) * 3); }
.next h2 { font-weight: 400; font-size: clamp(32px, 6.6vw, 70px); line-height: 1; letter-spacing: -.03em; max-width: 14ch; }
.next .body { margin-top: calc(var(--cell) * 3); max-width: 44ch; font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-2); }

@media (max-width: 640px) {
  .hhead { grid-template-columns: 1fr; }
  .hcol { padding-left: 0; }
  .hcol::before { display: none; }
}