/* Slow Burn: a dark room, one flame, soft-edged type. */
body { --bg: #1b0912; --fg: #f7e6d1; --display: Fraunces, serif; --display-w: 300; --body: "Albert Sans", system-ui, sans-serif; --strip-bg: #1b0912; --strip-fg: #c49b6e; --why-bg: #24101a; }
.buy { background: #ffb347; border: 0; border-radius: 999px; color: #1b0912; font-weight: 700; padding: 0.7rem 1.4rem; }
.ctl { background: #1b0912aa; border: 1px solid #ffb347; border-radius: 999px; color: #ffb347; padding: 0.55rem 1.1rem; }
.b-hero { height: calc(100svh - 1.8rem); min-height: 38rem; overflow: clip; position: relative; }
.b-stage { inset: 0; position: absolute; }
.b-over { background: linear-gradient(#1b0912cc, transparent 30%, transparent 55%, #1b0912ee); display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: 0.75rem var(--gutter) 1rem; pointer-events: none; position: relative; z-index: 2; }
.b-over a, .b-over button { pointer-events: auto; }
.b-top { display: flex; justify-content: space-between; }
.shopname { font-family: Fraunces, serif; font-size: 1.4rem; font-style: normal; }
.cartline { font-size: 0.85rem; }
.b-over h1 { font-family: Fraunces, serif; font-size: clamp(2.6rem, 7.6vw, 8.4rem); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 300; line-height: 0.95; margin: 0.5rem 0 auto; max-width: 15ch; }
.b-foot { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.b-name { font-family: Fraunces, serif; font-size: 1.8rem; margin: 0; }
.b-price { font-size: 1.2rem; margin: 0; }
.b-ctl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.b-grid { padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.b-grid h2 { font-family: Fraunces, serif; font-size: clamp(2.4rem, 6.5vw, 6.5rem); font-weight: 300; line-height: 1; margin: 0 0 1.5rem; }
.b-grid .panes-demo img { aspect-ratio: 1; }
.b-grid > .ctl { margin-block-start: 1rem; }
.b-hero { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; height: auto; min-height: calc(100svh - 1.8rem); }
.b-stage { --sq: min(100svh - 1.8rem, 58vw); grid-column: 2; grid-row: 1; height: var(--sq); inset: auto; position: relative; width: var(--sq); }
.b-over { background: none; grid-column: 1; grid-row: 1; height: auto; pointer-events: auto; }
.b-over h1 { font-size: clamp(2.4rem, 5vw, 6rem); }
@media (max-width: 760px) { .b-hero { grid-template-columns: minmax(0, 1fr); } .b-stage { grid-column: 1; height: auto; width: 100%; } .b-stage .gs { aspect-ratio: 1; } .b-over { grid-row: 2; } }