/* Mainspring: true black, brushed steel type, one dial. */
body { --bg: #000; --fg: #d9dde0; --display: Italiana, serif; --body: "Ibm Plex Sans Condensed", system-ui, sans-serif; --strip-bg: #000; --strip-fg: #8d9296; --why-bg: #0b0c0d; }
.buy { background: #f0a43a; border: 0; color: #000; font-weight: 600; letter-spacing: 0.02em; padding: 0.6rem 1.3rem; }
.ctl { background: none; border: 1px solid #5a5e62; color: inherit; padding: 0.5rem 0.9rem; }
.w-hero { display: grid; grid-template: "top top top" auto "h1 h1 h1" auto "l dial r" minmax(0, 1fr) "n n n" auto / minmax(0, 1fr) auto minmax(0, 1fr); height: calc(100svh - 1.8rem); min-height: 38rem; overflow: clip; padding: 0.5rem var(--gutter) 0.75rem; position: relative; }
.w-top { display: flex; grid-area: top; justify-content: space-between; }
.shopname { font-family: Italiana, serif; font-size: 1.6rem; letter-spacing: 0.04em; }
.cartline { font-size: 0.85rem; }
.w-hero h1 { font-family: Italiana, serif; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 400; grid-area: h1; margin: 0.25rem 0 0.75rem; text-align: center; }
.w-dial { aspect-ratio: 1; align-self: center; grid-area: dial; height: min(100%, 92vw); position: relative; }
.w-dial > .gs { border-radius: 50%; clip-path: circle(46.5% at 50% 50%); }
.w-ring { fill: none; inset: 0; position: absolute; rotate: 0deg; stroke: #d9dde0; transition: rotate 280ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.w-ring circle { stroke-dasharray: 0.6 5.4; stroke-width: 3; }
.w-ring circle.five { stroke: #f0a43a; stroke-dasharray: 1.2 28.8; stroke-width: 5; }
.w-left, .w-right { align-self: center; min-width: 0; padding-inline: 1rem; }
.w-left { grid-area: l; text-align: end; }
.w-right { grid-area: r; }
.w-name { font-family: Italiana, serif; font-size: clamp(1.8rem, 3.2vw, 3.4rem); line-height: 1; margin: 0; }
.w-count { color: #8d9296; margin: 0.5rem 0 0; }
.w-price { font-family: Italiana, serif; font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: 1; margin: 0 0 0.75rem; }
.w-ctl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.6rem; }
.w-hero .sample-note { grid-area: n; text-align: center; }
.w-bench { border-block-start: 1px solid #2a2c2e; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.w-bench h2 { font-family: Italiana, serif; font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 400; line-height: 1; margin: 0; padding-inline: var(--gutter); }
.w-bench p { margin: 0.5rem 0 1.5rem; padding-inline: var(--gutter); }
.w-bench .row-demo { margin-inline-start: var(--gutter); }
@media (max-width: 820px) {
	.w-hero { grid-template: "top" auto "h1" auto "dial" auto "l" auto "r" auto "n" auto / minmax(0, 1fr); height: auto; }
	.w-dial { height: auto; margin-inline: auto; width: min(92vw, 60svh); }
	.w-left { text-align: center; padding-block: 0.75rem 0.25rem; }
	.w-right { text-align: center; }
	.w-ctl { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .w-ring { transition: none; } }
.w-hero { height: auto; min-height: calc(100svh - 1.8rem); }
.w-dial { --sq: min(100svh - 9rem, 60vw); height: var(--sq); width: var(--sq); }
@media (max-width: 820px) { .w-dial { height: auto; width: min(92vw, 60svh); } }