/* Actual hand-rolled clay. Nine-slicing preserves the empty centre. */
.scene-page :is(.role-button,.button,.filter,.progress-peg,.option,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link,.search-wrap)::before{content:'';position:absolute;box-sizing:border-box;inset:-8px;border:18px solid transparent;border-image-source:url('assets/v4/clay-outline-rough.webp');border-image-slice:230;border-image-width:1;border-image-outset:0;border-image-repeat:round;border-radius:0;background:none;opacity:0;pointer-events:none;animation:none;filter:brightness(.84) saturate(.88);z-index:3}
.scene-page.clay-rim-ready :is(.text-button,.detail-link,summary,.skip-link)::before{inset:-9px -12px;border-width:16px}
.scene-page .progress-track .progress-peg::before{inset:-9px;border:0;border-image:none;background:url('assets/v4/clay-outline-circle.webp') center/100% 100% no-repeat;mask-image:radial-gradient(circle closest-side,transparent 66%,#000 69%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 66%,#000 69%)}
.scene-page:not(.interior) .site-nav :is(a,.motion-toggle)::before{border-image-source:url('assets/v4/clay-outline-cream.webp');filter:none}
.scene-page .button-outline{--control-shadow:inset 0 2px 3px #fff8,0 3px 6px #14214a19}
.scene-page .search-wrap{isolation:isolate}
@media(hover:hover) and (pointer:fine){.scene-page :is(.role-button,.button,.filter,.progress-peg,.option,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link,.search-wrap):hover:not(:disabled)::before{animation:clay-contour-breath 1.9s ease-in-out infinite;opacity:1}}
@keyframes clay-contour-breath{0%,100%{opacity:.74}50%{opacity:1}}
/* Focus uses the same material; the ordinary outline is retained on load failure. */
.scene-page.clay-rim-ready :is(.role-button,.button,.filter,.progress-peg,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link):focus-visible{outline:none!important}
.scene-page.clay-rim-ready .option:has(input:focus-visible),.scene-page.clay-rim-ready .search-wrap input:focus-visible{outline:none!important}
.scene-page.clay-rim-ready :is(.role-button,.button,.filter,.progress-peg,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link):focus-visible::before,.scene-page.clay-rim-ready .option:has(input:focus-visible)::before,.scene-page.clay-rim-ready .search-wrap:focus-within::before{opacity:1;animation:none!important}
.scene-page.motion-paused :is(.role-button,.button,.filter,.progress-peg,.option,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link,.search-wrap):hover::before{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.scene-page :is(.role-button,.button,.filter,.progress-peg,.option,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link,.search-wrap):hover::before{animation:none!important;opacity:1}}
@media(max-width:760px){.scene-page :is(.role-button,.button,.filter,.option,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.search-wrap)::before{border-width:15px;inset:-7px}.scene-page .progress-track .progress-peg::before{border:0;inset:-8px}}
.scene-page:not(.clay-rim-ready) :is(.role-button,.button,.filter,.progress-peg,.answer-link,.catalog-role button,.site-nav a,.motion-toggle,.text-button,.detail-link,summary,.skip-link,input):focus-visible,.scene-page:not(.clay-rim-ready) .option:has(input:focus-visible){outline:3px solid var(--pulse-color,#2836b8)!important;outline-offset:5px}
/* Capsule ends use the circular cord; the middle retains the coarse straight grain. */
.clay-rim{display:none}
@media(min-width:761px){
 .scene-page .landing :is(.home-start,.home-catalog)::before{display:none}
 .scene-page .landing .clay-rim{display:block;position:absolute;inset:-8px;pointer-events:none;--clay-overlap:5px;opacity:0;z-index:3;filter:brightness(.84) saturate(.88)}
 .clay-rim__rails{position:absolute;inset:0;border:18px solid transparent;border-image:url('assets/v4/clay-outline-rough.webp') 230 /18px /0 round;clip-path:inset(0 var(--clay-half))}
 .clay-rim__cap{position:absolute;top:0;bottom:0;width:calc(var(--clay-half) + var(--clay-overlap));background:url('assets/v4/clay-outline-circle.webp') no-repeat;background-size:var(--clay-height) var(--clay-height)}
 .clay-rim__cap--left{left:0;background-position:left center;mask-image:linear-gradient(90deg,#000 0 var(--clay-half),transparent 100%)}
 .clay-rim__cap--right{right:0;background-position:right center;mask-image:linear-gradient(90deg,transparent 0,#000 var(--clay-overlap) 100%)}
 .scene-page.clay-rim-ready .landing :is(.home-start,.home-catalog):focus-visible>.clay-rim{opacity:1;animation:none!important}
}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 .scene-page .landing :is(.home-start,.home-catalog):hover:not(:disabled)>.clay-rim{opacity:1;animation:clay-contour-breath 1.9s ease-in-out infinite}
 .scene-page.motion-paused .landing :is(.home-start,.home-catalog):hover>.clay-rim{opacity:1;animation:none!important}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){
 .scene-page .landing :is(.home-start,.home-catalog):hover>.clay-rim{opacity:1;animation:none!important}
}