/* Loudsole: the paper follows the pair, the type never lowers its voice. */
@property --paper { syntax: "<color>"; inherits: true; initial-value: #ff3b00; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #fff; }
body { --bg: #ff3b00; --fg: #120066; --display: "Rubik Mono One", sans-serif; --body: "Barlow Condensed", system-ui, sans-serif; --strip-bg: #120066; --strip-fg: #fff; --why-bg: #fff; font-size: 1.15rem; font-weight: 500; }
.buy { background: #120066; border: 0; color: #fff; font-family: "Rubik Mono One", sans-serif; font-size: 0.95rem; padding: 0.8rem 1.2rem; rotate: -1.5deg; transition: rotate 0.1s; }
@media (hover: hover) { .buy:hover { rotate: 1.5deg; } }
.ctl { background: #fff; border: 3px solid #120066; color: #120066; font-weight: 700; padding: 0.5rem 0.9rem; }
.k-hero { background: var(--paper); color: var(--ink); display: grid; gap: 0 var(--gutter); grid-template: "tape tape" auto "h1 h1" auto "stack side" minmax(0, 1fr) "note note" auto / minmax(0, 2.4fr) minmax(14rem, 1fr); height: calc(100svh - 1.8rem); min-height: 40rem; overflow: clip; padding-block-end: 0.5rem; position: relative; transition: --paper 0.25s steps(3), --ink 0.25s steps(3); }
.k-tape { background: #120066; color: #fff; font-family: "Rubik Mono One", sans-serif; font-size: 1rem; grid-area: tape; margin-inline: -2vw; overflow: hidden; padding-block: 0.25rem; rotate: -1deg; white-space: nowrap; }
.k-tape span { display: inline-block; }
.k-hero h1 { font-family: "Rubik Mono One", sans-serif; font-size: clamp(2rem, 6.2vw, 7rem); font-weight: 400; grid-area: h1; line-height: 0.92; margin: 0.5rem 0; padding-inline: var(--gutter); position: relative; z-index: 2; }
.k-stack { grid-area: stack; margin-inline-start: var(--gutter); min-height: 0; position: relative; rotate: -1.2deg; }
.k-burst { align-items: center; background: #ffe600; clip-path: polygon(50% 0, 61% 14%, 79% 6%, 81% 24%, 100% 28%, 90% 45%, 100% 62%, 81% 68%, 78% 88%, 61% 80%, 50% 100%, 39% 80%, 21% 88%, 19% 68%, 0 62%, 10% 45%, 0 28%, 19% 24%, 21% 6%, 39% 14%); color: #120066; display: flex; font-family: "Rubik Mono One", sans-serif; font-size: clamp(1.4rem, 2.8vw, 2.8rem); height: clamp(7rem, 15vw, 14rem); inset: -1.5rem -1.5rem auto auto; justify-content: center; position: absolute; rotate: 12deg; width: clamp(7rem, 15vw, 14rem); z-index: 3; }
.k-side { align-content: end; display: grid; gap: 0.5rem; grid-area: side; justify-items: start; padding-inline-end: var(--gutter); }
.k-name { font-family: "Rubik Mono One", sans-serif; font-size: clamp(1.3rem, 2.2vw, 2.3rem); line-height: 1; margin: 0; }
.k-next { font-size: 1.3rem; }
.k-hero .sample-note { grid-area: note; padding-inline: var(--gutter); }
.k-fling { background: #fff; color: #120066; overflow: clip; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.k-fling h2 { font-family: "Rubik Mono One", sans-serif; font-size: clamp(3rem, 12vw, 13rem); font-weight: 400; line-height: 0.85; margin: 0 0 1.5rem; padding-inline: var(--gutter); }
.k-fling .row-demo { margin-inline-start: var(--gutter); --gap: 12px; }
.k-fling .pd .buy { font-size: 0.75rem; }
.k-fling figcaption { display: flex; font-size: 1.15rem; justify-content: space-between; padding-block: 0.3rem; }
.k-fling .buy { font-size: 0.75rem; width: 100%; }
@media (max-width: 760px) {
	.k-hero { grid-template: "tape" auto "h1" auto "stack" 52vh "side" auto "note" auto / minmax(0, 1fr); height: auto; }
	.k-stack { margin-inline: var(--gutter); }
	.k-burst { inset: -1rem -0.5rem auto auto; }
	.k-side { padding: 1.25rem var(--gutter) 0; }
}
@media (prefers-reduced-motion: reduce) { .k-hero, .buy { transition: none; } }
.k-hero { grid-template-columns: auto minmax(14rem, 1fr); height: auto; min-height: calc(100svh - 1.8rem); }
.k-hero h1 { font-size: clamp(1.8rem, 4vw, 4.4rem); }
.k-stack { --sq: min(100svh - 14rem, 56vw); height: var(--sq); width: var(--sq); }
@media (max-width: 760px) { .k-hero { grid-template-columns: minmax(0, 1fr); } .k-stack { height: auto; width: calc(100% - 2 * var(--gutter)); } .k-stack .gs { aspect-ratio: 1; } }