/* Retain compact sticky navigation.
   Kiln scene size and placement use the original stylesheets again. */
body[data-page=kiln]>.site-header{
 position:sticky;inset:auto;top:0;height:104px;background:var(--paper);
 padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line);z-index:30;
}
body[data-page=kiln]>.site-header .identity b{font-size:28px}
body[data-page=kiln]>.site-header .identity small{font-size:11px}
body[data-page=kiln]>.site-header .identity-slogan{font-size:13px}
body[data-page=kiln]>.site-header .identity-mark{width:56px}

#main,#contact,#contact-methods,.brand-life{scroll-margin-top:116px}
@media(max-width:1000px){
 body[data-page=kiln]>.site-header{height:104px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 28px;gap:4px 12px;padding:10px 20px}
 body[data-page=kiln]>.site-header .identity{grid-column:1;grid-row:1;gap:10px}
 body[data-page=kiln]>.site-header .identity-mark{width:38px}
 body[data-page=kiln]>.site-header .identity b{font-size:22px}
 body[data-page=kiln]>.site-header .identity small{font-size:9px}
 body[data-page=kiln]>.site-header .identity-slogan{font-size:11px;margin-top:0}
 body[data-page=kiln]>.site-header nav{grid-column:1/-1;grid-row:2;justify-self:center;padding:0;gap:24px;font-size:13px}
 body[data-page=kiln]>.site-header nav a+a:before{display:none}
 body[data-page=kiln]>.site-header .lang-switch{grid-column:2;grid-row:1}
}

/* Mobile progress follows the wood and its instructions. Keep the artwork size. */
@media(max-width:760px){
 .kiln-experience{height:calc(662px + var(--scene-height))}
 .kiln-experience[data-stage='4']{height:calc(1017px + var(--scene-height))}
 .fuel-control{bottom:140px}
 .firing-stages{top:auto;bottom:62px;height:48px}
}

/* The sticky header already reserves its own space. */
.kiln-copy,html[lang=en] .kiln-copy{top:48px}
@media(max-width:760px){.kiln-copy,html[lang=en] .kiln-copy{top:32px}}
/* Close the gap left when the mobile timeline moved below the wood. */
@media(max-width:760px){
 .kiln-experience{height:calc(456px + var(--scene-height))}
 .kiln-experience[data-stage='4']{height:calc(811px + var(--scene-height))}
 .kiln-temperature{top:196px}
 .kiln-art{top:236px}
 .drop-zone{top:calc(236px + var(--scene-height)*.72)}
 .kiln-reveal{top:calc(246px + var(--scene-height))}
}

/* Smoke fallback shares the artwork coordinates, including the mobile crop. */
.kiln-smoke-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.kiln-smoke-fallback path{stroke:#a770b6;stroke-width:22;opacity:.26;transform-box:view-box;transform-origin:61% 14%;animation:chimney-wisp 7s ease-in-out infinite}
.kiln-smoke-fallback path:nth-child(2){stroke:#d1b6d9;stroke-width:32;opacity:.32;animation-delay:-3s;animation-duration:9s}
.kiln-smoke-fallback path:nth-child(3){stroke:#9564a4;stroke-width:14;opacity:.18;animation-delay:-5s;animation-duration:11s}
.has-shader .kiln-smoke-fallback{display:none}
@keyframes chimney-wisp{0%,100%{transform:translate(0,0) scaleX(.9)}50%{transform:translate(14px,-16px) scaleX(1.12)}}
@media(prefers-reduced-motion:reduce){.kiln-smoke-fallback path{animation:none}}

/* Mobile trial: a large centered kiln with a compact, contiguous interaction. */
@media(max-width:760px){
 body[data-page=kiln]>.site-header{height:88px;grid-template-rows:38px 26px;padding:8px 20px;gap:4px 12px}
 body[data-page=kiln]>.site-header .identity-mark{width:34px}
 body[data-page=kiln]>.site-header .identity b{font-size:20px}
 body[data-page=kiln]>.site-header .identity small{font-size:8px}
 body[data-page=kiln]>.site-header .identity-slogan{display:none}
 body[data-page=kiln]>.site-header .identity-wordmark{gap:4px}
 .kiln-experience,.kiln-experience[data-stage='4']{
  --mobile-scene-top:128px;--mobile-art-width:175vw;--scene-height:117vw;
  height:calc(var(--mobile-scene-top) + var(--scene-height) + 184px);min-height:0;
 }
 .kiln-copy,html[lang=en] .kiln-copy{top:20px;left:20px;right:20px;width:auto}
 .kiln-copy h1{font-size:24px;line-height:1.4;letter-spacing:0}
 html[lang=zh-CN] .kiln-copy h1 br{display:none}
 html[lang=en] .kiln-copy h1{font-size:26px;line-height:1.25}
 .kiln-copy p{font-size:14px;line-height:1.6;margin-top:8px}
 .kiln-art{left:calc(50% - var(--mobile-art-width)*.56);right:auto;top:var(--mobile-scene-top);bottom:auto;width:var(--mobile-art-width);height:var(--scene-height)}
 .drop-zone{left:calc(50% - var(--mobile-art-width)*.16);right:auto;top:calc(var(--mobile-scene-top) + var(--scene-height)*.685);bottom:auto;width:calc(var(--mobile-art-width)*.28);height:calc(var(--scene-height)*.26)}
 .fuel-control{left:20px;right:20px;top:calc(var(--mobile-scene-top) + var(--scene-height) + 12px);bottom:auto;width:auto}
 .fuel-control .wood{width:190px;height:48px}
 .fuel-control p{font-size:14px;line-height:1.6;margin-top:8px;max-width:100%}
 .wood.is-held{filter:brightness(1.12) drop-shadow(0 8px 9px #34243840)}
 .is-dragging .drop-zone{border:2px dashed #83458f;background:#83458f14}
 .is-over-mouth .drop-zone{border:2px solid #83458f;background:#e9d4ef55;box-shadow:0 0 22px #b67ac866}
 .drop-zone span{top:50%;font-size:14px;padding:8px 12px}
 .firing-stages{left:20px;right:20px;top:calc(var(--mobile-scene-top) + var(--scene-height) + 104px);bottom:auto;width:auto;height:46px;gap:4px}
 .firing-stages li,.firing-stages li:first-child,.firing-stages li:last-child,html[lang=en] .firing-stages li{font-size:12px;line-height:1.4;gap:8px}
 .kiln-temperature{left:auto;right:20px;top:calc(var(--mobile-scene-top) + var(--scene-height) + 74px);bottom:auto;width:76px;height:20px;display:block}
 .kiln-temperature .temperature-track,.kiln-temperature:before,.kiln-temperature:after{display:none}
 .kiln-temperature strong{position:static;display:block;text-align:right;font-size:12px;line-height:20px}
 .kiln-temperature strong b{font-size:12px}
 .skip-kiln{left:20px;right:auto;bottom:5px;font-size:14px}
 .motion-toggle{right:20px;bottom:5px;font-size:12px}
 .kiln-reveal{left:20px;right:20px;top:calc(var(--mobile-scene-top) + 42px);bottom:auto;width:auto;max-width:320px;padding:16px;margin:0 auto;background:#f4f1edf2;border:1px solid #c8c0c9;border-radius:8px}
 .kiln-reveal .reveal-orbit{width:144px;margin:10px auto}
 .kiln-reveal h2,html[lang=en] .kiln-reveal h2{font-size:20px;line-height:1.4}
 .kiln-reveal>p{font-size:13px}
 .kiln-reveal .primary-link,html[lang=en] .kiln-reveal .primary-link{width:auto;min-width:0;margin-top:10px;padding:10px 16px;font-size:14px}
 .kiln-reveal>button{font-size:14px;margin-top:8px}
 .kiln-experience[data-stage='4'] .fuel-control{display:none}
 #main,.brand-life{scroll-margin-top:100px}
}

/* Results follow the kiln again, with direct links on the product itself. */
.reveal-orbit:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.reveal-title a:hover{color:var(--purple)}
@media(max-width:760px){
 .kiln-experience[data-stage='4']{height:calc(var(--mobile-scene-top) + var(--scene-height) + 560px)}
 .kiln-reveal{top:calc(var(--mobile-scene-top) + var(--scene-height) + 20px);max-width:340px;padding:0;background:none;border:0;border-radius:0}
 .kiln-reveal .reveal-orbit{width:176px}
 .kiln-experience[data-stage='4'] .firing-stages{top:calc(var(--mobile-scene-top) + var(--scene-height) + 444px)}
 .kiln-experience[data-stage='4'] .kiln-temperature{top:calc(var(--mobile-scene-top) + var(--scene-height) + 414px)}
}

/* Center the mobile log without transforming its drag coordinates. */
@media(max-width:760px){
 .fuel-control{text-align:center}
 .fuel-control .wood{display:block;margin-inline:auto}
 .fuel-control p{text-align:center;margin-inline:auto}
}