/* N002 Kiln & Quiet - phone build. Same vase, textures and HDRI as desktop; layout and gesture change. */
body{background:radial-gradient(140% 70% at 50% 22%,color-mix(in oklab,var(--c1) 70%,#fff) 0%,var(--c1) 55%,var(--paper-2) 100%) var(--c1)}
.hero{position:relative;display:flex;flex-direction:column;padding-bottom:var(--s5)}
.hero-stage{position:relative;order:-1;height:min(64svh,580px);min-height:400px;margin-top:calc(env(safe-area-inset-top) + 58px)}
.hero-copy{display:grid;gap:var(--s3);padding:0 var(--gutter);margin-top:calc(var(--s4) * -1);position:relative;z-index:2}
.title{font:800 clamp(3.1rem,15.5vw,4.6rem)/.86 var(--f-display);letter-spacing:var(--track-display)}
.title .t1{display:block}
.title .t2{display:block;font-weight:400;font-style:italic;font-size:1.08em;letter-spacing:-.035em;line-height:.92;color:color-mix(in oklab,var(--c2) 88%,var(--c3));padding-left:.3em}
.tag{order:-1}
.lead{font-size:1.06rem}
.controls{display:grid;gap:var(--s3);margin-top:var(--s1)}
.spin-btn{width:100%;min-height:52px;font-size:1rem}
.glaze-wrap{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--spec);background:color-mix(in oklab,var(--c1) 60%,transparent)}
.glaze-wrap .mono{color:var(--ink-3)}
.glaze{display:flex;gap:4px}
.sw{position:relative;width:44px;height:44px;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:3px;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)}
.still{position:absolute;left:50%;bottom:14%;translate:-50% 0;font-size:1.9rem;font-style:italic;color:var(--ink-2);opacity:0;transform:translateY(10px);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;left:50%;top:10px;translate:-50% 0;display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink-3);padding:8px 12px;border-radius:var(--pill);background:color-mix(in oklab,var(--c1) 70%,transparent);transition:opacity var(--dur) var(--ease-out)}
.gesture .icon{width:16px;height:16px}
.hero-stage.has-turned .gesture{opacity:0}
.ledger{display:grid;grid-template-columns:1fr 1fr;margin:var(--s5) var(--gutter) 0;border-top:1px solid var(--line)}
.cell{padding:var(--s3) 0;display:grid;gap:8px;align-content:start;border-bottom:1px solid var(--line)}
.cell:nth-child(odd){padding-right:var(--s3);border-right:1px solid var(--line)}
.cell:nth-child(even){padding-left:var(--s3)}
.cell-speed{grid-column:1 / -1;border-right:0!important;padding-right:0!important}
.cell dt{color:var(--ink-3)}
.cell dd{margin:0}
.cell .v{font:600 .98rem/1.3 var(--f-body)}
.cell .v small{display:block;font-weight:400;font-size:.82rem;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.4rem/1 var(--f-display);letter-spacing:-.04em;min-width:2.2ch}
.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:50px;height:50px;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);padding-block:clamp(4.5rem,18vw,6rem)}
.note-in{display:grid;gap:var(--s4)}
.note .tag{color:var(--on-dark-2)}
.note-quote{color:var(--c1);font-size:clamp(2rem,9vw,2.6rem)}
.note-quote .serif{font-style:italic;font-weight:400;color:color-mix(in oklab,var(--c1) 80%,var(--c3))}
.note .body{color:var(--on-dark-2)}
.note-body{display:grid;gap:var(--s3)}