.header{position:sticky;top:0;background:var(--paper);z-index:40;transition:box-shadow 260ms ease,border-color 260ms ease}
.header::before{content:"";position:absolute;inset:0 calc(-1 * var(--gutter));background:var(--paper);z-index:-1}
.has-scrolled .header{box-shadow:0 9px 24px #242a260d;border-bottom-color:transparent}
.header .brand{transform-origin:left center;transition:transform 260ms ease}
[dir=rtl] .header .brand{transform-origin:right center}
.has-scrolled .header .brand{transform:scale(.94)}
.reading-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:80;pointer-events:none}
.reading-progress i{display:block;height:100%;background:var(--sage);transform:scaleX(0);transform-origin:left center}
[dir=rtl] .reading-progress i{transform-origin:right center}
.back-to-top{position:fixed;inset-inline-end:24px;bottom:24px;z-index:35;width:46px;height:46px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 16px #242a2612;transition:background 200ms ease,transform 200ms ease}
.back-to-top[hidden]{display:none}
.back-to-top:hover{background:var(--pale);transform:translateY(-3px)}
.back-to-top svg{width:21px;height:21px}
.hero-toolbar{justify-content:flex-end}
.craft-list>li{display:block;padding:0}
.craft-step{border:0}
.craft-step summary{gap:22px;padding:21px 0;min-height:70px;list-style:none}
.craft-step summary .number{font-size:25px;flex-shrink:0;min-width:28px}
.craft-step[open] summary .number{transform:none}
.craft-step summary h3{flex:1;font-size:27px}
.craft-step summary svg{width:20px;height:20px;color:var(--sage);transition:transform 240ms ease}
.craft-step[open] summary svg{transform:rotate(45deg)}
.craft-step[open] summary h3{color:#526548}
.craft-step-body{padding:0 26px 22px 50px}
[dir=rtl] .craft-step-body{padding-inline:50px 26px}
.craft-step-body p{font-size:14px;margin:0;padding:0;max-width:430px}
.gallery-panel{position:relative;aspect-ratio:4/5;background:#e8e4dc;overflow:hidden}
.detail-image .gallery-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity 450ms ease,visibility 0s 450ms}
.detail-image .gallery-image.is-active{opacity:1;visibility:visible;transition:opacity 450ms ease,visibility 0s}
.gallery-controls{display:flex;gap:12px;margin-top:16px}
.gallery-controls[hidden]{display:none}
.gallery-controls button{position:relative;width:76px;height:82px;padding:4px;background:transparent;border:1px solid var(--line);transition:border-color 200ms ease,background 200ms ease}
.gallery-controls button[aria-pressed=true]{border-color:var(--sage);background:var(--pale)}
.gallery-controls button:hover{border-color:var(--ink)}
.gallery-controls button img{width:100%;height:100%;object-fit:contain}
.gallery-controls button span{position:absolute;bottom:4px;inset-inline-end:5px;background:var(--paper);font-size:9px;padding:0 3px}
@media(hover:hover) and (pointer:fine){.button svg{transition:transform 240ms ease}.button:hover svg{transform:translateX(4px)}[dir=rtl] .button:hover svg{transform:translateX(-4px)}}
@media(max-width:680px){.hero-toolbar{padding:5px 18px}.back-to-top{inset-inline-end:16px;bottom:16px}.craft-step summary{gap:16px}.craft-step summary h3{font-size:25px}.craft-step-body{padding-inline-start:44px}.gallery-controls button{width:68px;height:74px}}
@media(prefers-reduced-motion:reduce){.header,.header .brand,.back-to-top,.craft-step summary svg,.gallery-image,.gallery-controls button{transition:none!important}.back-to-top:hover{transform:none}}
