/* N002 Kiln & Quiet - desktop build. Tokens: ../../_kit/concept.css. Palette: sand #F7EDD7 / indigo #1E264C / tomato #D74A4D. */
body{background:radial-gradient(120% 90% at 72% 38%,color-mix(in oklab,var(--c1) 70%,#fff) 0%,var(--c1) 46%,var(--paper-2) 100%) fixed var(--c1)}
.hero{position:relative;min-height:max(100svh,760px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:var(--grid-gap);
  padding:0 var(--gutter);max-width:1680px;margin-inline:auto}
.hero-copy{grid-column:1 / span 5;grid-row:1;align-self:center;display:grid;gap:var(--s4);padding-top:var(--s8);position:relative;z-index:2}
.title{font:800 clamp(4rem,1.2rem + 7.4vw,9.6rem)/.84 var(--f-display);letter-spacing:var(--track-display);color:var(--ink)}
.title .t1{display:block}
.title .t2{display:block;font-weight:400;font-style:italic;font-size:1.08em;letter-spacing:-.035em;line-height:.9;color:color-mix(in oklab,var(--c2) 88%,var(--c3));padding-left:.32em}
.lead{max-width:30ch}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s2)}
.spin-btn .icon{transition:transform var(--dur) var(--ease-out)}
.spin-btn:active .icon{transform:rotate(-120deg)}
.glaze-wrap{display:flex;align-items:center;gap:var(--s3)}
.glaze-wrap .mono{color:var(--ink-3)}
.glaze{display:flex;gap:10px}
.sw{position:relative;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center}
.sw::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--sw);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -6px 10px -6px rgba(30,38,76,.35),0 0 0 1px var(--line);transition:transform var(--dur-fast) var(--ease-out)}
.sw::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;transform:scale(.8);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur) var(--ease-out)}
.sw[aria-checked=true]::after{opacity:1;transform:none}
.sw:active::before{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.sw:hover::before{transform:scale(1.08)}}

.hero-stage{grid-column:5 / span 8;grid-row:1;position:relative;min-height:600px;margin-right:calc(var(--gutter) * -1)}
.still{position:absolute;left:50%;bottom:22%;translate:-50% 0;font-size:clamp(1.6rem,1rem + 1.4vw,2.6rem);font-style:italic;color:var(--ink-2);opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);pointer-events:none}
.hero-stage.is-still .still{opacity:1;transform:none}
.gesture{position:absolute;right:calc(var(--gutter) + 8px);top:calc(var(--s8) + 8px);display:flex;align-items:center;gap:8px;color:var(--ink-3);opacity:1;transition:opacity var(--dur) var(--ease-out)}
.gesture .icon{width:18px;height:18px}
.hero-stage.has-turned .gesture{opacity:0}

.ledger{grid-column:1 / span 12;grid-row:2;position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr 1.2fr 1.2fr;margin:0 0 var(--s6);border-top:1px solid var(--line);
  background:color-mix(in oklab,var(--c1) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cell{padding:var(--s4) var(--s4) var(--s3) 0;display:grid;gap:10px;align-content:start;border-right:1px solid var(--line);padding-left:var(--s4)}
.cell:first-child{padding-left:0}.cell:last-child{border-right:0}
.cell dt{color:var(--ink-3)}
.cell dd{margin:0}
.cell .v{font:600 1.06rem/1.3 var(--f-body);color:var(--ink)}
.cell .v small{display:block;font-weight:400;font-size:.875rem;color:var(--ink-2);margin-top:2px}
.cell-speed dd{display:flex;align-items:center;gap:var(--s3)}
.rpm{display:flex;align-items:baseline;gap:6px}
.rpm b{font:800 2.6rem/1 var(--f-display);letter-spacing:-.04em;min-width:2.2ch;color:var(--ink)}
.rpm small{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--ink-3)}
.dial{width:54px;height:54px;flex:none;overflow:visible}
.dial-ring{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.dial-ticks line{stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.dial-ticks line.major{stroke:var(--ink)}
.dial-needle{stroke:var(--c3);stroke-width:3.5;stroke-linecap:round}

.note{background:var(--c2);color:var(--c1)}
.note-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6) var(--grid-gap);align-items:end}
.note .tag{grid-column:1 / -1;color:var(--on-dark-2)}
.note-quote{grid-column:1 / span 7;color:var(--c1)}
.note-quote .serif{font-style:italic;font-weight:400;color:color-mix(in oklab,var(--c1) 80%,var(--c3))}
.note-body{grid-column:9 / span 4;display:grid;gap:var(--s3)}
.note .body{color:var(--on-dark-2)}
@media (max-width:1100px){.hero-copy{grid-column:1 / span 6}.hero-stage{grid-column:5 / span 8}.ledger{grid-template-columns:1fr 1fr}.cell:nth-child(2){border-right:0}.cell:nth-child(3){padding-left:0}.note-quote{grid-column:1 / -1}.note-body{grid-column:1 / span 8}}