/* N025 Bathtime Duck - phone build. Same duck model, water shader and HDRI as desktop; tap anywhere on the water. */
body{background:var(--c1)}
.hero{position:relative;display:flex;flex-direction:column;padding-bottom:var(--s5)}
.hero-stage{position:relative;order:-1;height:min(54svh,480px);min-height:360px;margin-top:calc(env(safe-area-inset-top) + 58px)}
.plate{padding:0 var(--gutter);position:relative;z-index:2}
.title{font-size:clamp(3rem,14vw,4.2rem)}
.gesture{left:50%;bottom:10px;translate:-50% 0;white-space:nowrap;padding:8px 12px;border-radius:var(--pill);background:color-mix(in oklab,var(--c1) 70%,transparent)}
.readout{grid-template-columns:1fr 1fr 1fr;margin:var(--s4) var(--gutter) 0}
.readout>div{padding:var(--s3) var(--s2) var(--s3) 0}
.readout .ro-btn{grid-column:1 / -1}.readout .ro-btn .btn{width:100%;min-height:52px;justify-content:center}
.readout b{font-size:1.8rem}

.title{font:800 clamp(3.6rem,1.2rem + 5.6vw,7.6rem)/.86 var(--f-display);letter-spacing:var(--track-display);color:var(--ink)}
.title .serif{display:block;font-weight:400;font-style:italic;letter-spacing:-.03em;color:color-mix(in oklab,var(--c2) 75%,var(--c3))}
.plate{display:grid;gap:var(--s3);align-content:start}
.plate-no{color:var(--ink-3);border-top:1px solid var(--line-strong);padding-top:var(--s2)}
.latin{font-style:italic;font-size:1.2rem;color:var(--ink-2)}
.gesture{position:absolute;display:flex;align-items:center;gap:8px;color:var(--ink-3);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.gesture .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.hero-stage.has-turned .gesture{opacity:0}
.hero-stage{cursor:crosshair}
.readout{display:grid;margin:0;border-top:1px solid var(--line-strong)}
.readout>div{display:grid;gap:6px;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.readout dt{color:var(--ink-3)}.readout dd{margin:0;display:flex;align-items:baseline;gap:6px}
.readout b{font:800 2.1rem/1 var(--f-display);letter-spacing:-.04em;color:var(--ink);min-width:3ch}
.readout small{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--ink-3)}
.readout .ro-btn{border-bottom:0}
.notes{background:var(--c2);color:var(--c1)}
.notes .tag{color:var(--on-dark-2)}.notes .h2{color:var(--c1)}.notes .h2 .serif{font-style:italic;font-weight:400;color:color-mix(in oklab,var(--c1) 70%,var(--c3))}
.nt-list{margin:0;display:grid;gap:0}
.nt-item{padding:var(--s4) 0;border-top:1px solid var(--line-dark);display:grid;gap:8px}
.nt-item dt{color:var(--c3)}.nt-item dd{margin:0;color:var(--on-dark-2)}
.sz-row{display:grid;gap:var(--s4);margin-top:var(--s6)}
.sz{display:grid;gap:6px;justify-items:start}
.sz svg{width:100%;max-width:220px;height:auto}
.sz .duck{fill:color-mix(in oklab,var(--c3) 70%,var(--c1));stroke:var(--c2);stroke-width:2.4;stroke-linejoin:round}
.sz .bill{stroke:var(--c2);stroke-width:5;stroke-linecap:round}
.sz .line{stroke:var(--line-strong);stroke-width:1.4}
.sz-n{font:700 1.5rem/1.1 var(--f-display);letter-spacing:var(--track-h)}
.sz .mono{color:var(--ink-3)}

.nt-in{display:grid;gap:var(--s4)}.nt-head{display:grid;gap:var(--s3)}
.sz-head{display:grid;gap:var(--s3)}
.sz-row{grid-template-columns:1fr;gap:var(--s5)}
.sz svg{max-width:160px}