/* Hallmark · macrostructure: Catalogue · nav: N7 slab · footer: Ft1 · tone: brutalist, cheerful · theme: custom "Scherf" · anchor hue: 95 */
@font-face { font-family: "Bricolage Grotesque"; src: url("../../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../../fonts/space-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../../fonts/space-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --color-paper: oklch(98% 0.005 95);
  --color-ink: oklch(18% 0.01 95);
  --color-yellow: oklch(89% 0.17 97);
  --color-blue: oklch(72% 0.11 240);
  --color-clay: oklch(70% 0.13 45);
  --color-green: oklch(76% 0.12 150);
  --color-demo: oklch(88% 0.13 92);
  --font-display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --font-body: "Space Mono", "Courier New", monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --text-display: clamp(2.6rem, 0.8rem + 8.6vw, 8rem);
  --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --rule: 3px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 140ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.55 var(--font-body); }
h1, h2 { font-family: var(--font-display); font-style: normal; font-weight: 800; line-height: 0.95; margin: 0; letter-spacing: -0.03em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); text-transform: uppercase; max-width: 10em; }
h2 { font-size: var(--text-h2); line-height: 1.05; }
p { margin: 0 0 var(--space-4); max-width: 46ch; }
a { color: var(--color-ink); }
:focus-visible { outline: var(--rule) solid var(--color-ink); outline-offset: 3px; }
.demo-bar { margin: 0; max-width: none; background: var(--color-demo); font-size: var(--text-sm); padding: var(--space-2) var(--gutter); text-align: center; border-bottom: var(--rule) solid var(--color-ink); }
.demo-bar a { white-space: nowrap; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--gutter); border-bottom: var(--rule) solid var(--color-ink); }
.name { font: 800 1.3rem/1 var(--font-display); text-decoration: none; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: var(--space-6); }
.top nav a { font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.top nav a:hover { text-decoration: underline; }
.top nav a.go, button { background: var(--color-ink); color: var(--color-paper); padding: 0.6em 1em; font: 700 var(--text-sm)/1.2 var(--font-body); border: var(--rule) solid var(--color-ink); white-space: nowrap; cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.top nav a.go:hover, button:hover { background: var(--color-yellow); color: var(--color-ink); text-decoration: none; }
@media (max-width: 36rem) { .top nav a:not(.go) { display: none; } }
.hero { background: var(--color-yellow); padding: clamp(2rem, 6vw, 5rem) var(--gutter); border-bottom: var(--rule) solid var(--color-ink); }
.hero p { margin: var(--space-6) 0 0; font-size: 1.1rem; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule) solid var(--color-ink); }
.item { border-right: var(--rule) solid var(--color-ink); border-bottom: var(--rule) solid var(--color-ink); margin-bottom: calc(var(--rule) * -1); display: flex; flex-direction: column; }
.item:nth-child(3n) { border-right: 0; }
.item svg { display: block; width: 100%; aspect-ratio: 1; border-bottom: var(--rule) solid var(--color-ink); fill: var(--color-ink); }
.item .line { fill: none; stroke: var(--color-ink); stroke-width: 10; stroke-linecap: round; }
.item.c3 .line { stroke: var(--color-clay); }
.c1 svg { background: var(--color-blue); } .c2 svg { background: var(--color-clay); } .c3 svg { background: var(--color-green); } .c4 svg { background: var(--color-yellow); }
.item div { padding: var(--space-4) var(--gutter) var(--space-6); }
.item p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.item .pr { font: 800 1.6rem/1 var(--font-display); margin-top: var(--space-4); }
.facts, .order { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
.facts h2, .order h2 { font-size: clamp(2rem, 1rem + 4vw, 4rem); text-transform: uppercase; margin-bottom: var(--space-8); }
dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
dl div { border-top: var(--rule) solid var(--color-ink); padding-top: var(--space-4); }
dt { font-weight: 700; margin-bottom: var(--space-2); }
dd { margin: 0; font-size: var(--text-sm); }
.order { background: var(--color-blue); border-top: var(--rule) solid var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); }
.addr { overflow-wrap: anywhere; }
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); min-width: 0; }
input, textarea { font: inherit; font-weight: 400; color: var(--color-ink); background: var(--color-paper); border: var(--rule) solid var(--color-ink); border-radius: 0; padding: 0.6em 0.7em; width: 100%; min-width: 0; }
button { justify-self: start; font-size: var(--text-base); padding: 0.8em 1.4em; }
.status { background: var(--color-demo); border: var(--rule) solid var(--color-ink); padding: var(--space-4); margin: 0; font-size: var(--text-sm); }
.end { padding: var(--space-6) var(--gutter); font-size: var(--text-sm); border-top: var(--rule) solid var(--color-ink); }
.end p { margin: 0; max-width: none; }
[hidden] { display: none !important; }
@media (max-width: 59.99rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .item:nth-child(3n) { border-right: var(--rule) solid var(--color-ink); } .item:nth-child(2n) { border-right: 0; } dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .order { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 26rem) { .grid, dl { grid-template-columns: minmax(0, 1fr); } .item { border-right: 0 !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 1ms !important; } }