/* Simone36: a still portrait, and a spatial contour drawing of the craft. */
.s33-hero-image img { transform:none; transition:none; }
.s36-hero-links { display:flex; gap:32px; align-items:center; pointer-events:auto; }
.s36-hero-links .s33-down { gap:28px; }
.s36-hero-links .s33-down:last-child { color:#e6d9ba; }
.s36-metal { position:relative; isolation:isolate; scroll-margin-top:33px; color:#363b30; background:#edeade; }
.s36-metal-stage { position:relative; overflow:hidden; min-height:860px; padding:46px var(--gutter) 38px; background:radial-gradient(ellipse at 58% 37%,#faf8ec 0,transparent 56%),linear-gradient(120deg,#e8e7dc,#efeade 82%); }
.s36-metal-stage::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(0deg,#e8e5d980,transparent 30%); }
.s36-metal-heading { position:relative; z-index:2; width:31%; pointer-events:none; }
.s36-metal-heading .eyebrow { color:#8a7857; font-size:9px; letter-spacing:.14em; }
.s36-metal-heading h2 { font-size:clamp(57px,6.15vw,96px); line-height:.97; letter-spacing:-.06em; margin:27px 0 24px; }
.s36-metal-heading h2 span { color:#878671; }
.s36-metal-heading > p:last-child { max-width:255px; font-size:12px; line-height:1.8; white-space:pre-line; color:#767b69; }
.s36-metal-art { position:absolute; inset:0 8% 134px 22%; z-index:1; outline-offset:-18px; touch-action:pan-y; }
.s36-metal-art[data-state=ready] { cursor:grab; }
.s36-metal-art[data-dragging=true] { cursor:grabbing; }
.s36-metal-art canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .65s; }
.s36-metal-art[data-state=ready] canvas { opacity:1; }
.s36-metal-fallback { width:100%; height:100%; object-fit:contain; opacity:1; }
.s36-metal-art[data-state=ready] .s36-metal-fallback { opacity:0; }
.s36-fallback-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:8px; color:#747a66; }
.s36-fallback-caption a { text-decoration:underline; text-underline-offset:3px; }
.s36-metal-art[data-state=ready] .s36-fallback-caption { display:none; }
.s36-metal-copies { position:relative; z-index:2; margin-top:300px; margin-left:81%; pointer-events:none; }
.s36-metal-copy { margin-bottom:26px; }
.s36-metal-copy > span { display:block; border-top:1px solid #94886d60; padding-top:17px; font-size:8px; letter-spacing:.10em; color:#8c7752; }
.s36-metal-copy h3 { font-size:28px; line-height:1.13; letter-spacing:-.03em; margin:17px 0; }
.s36-metal-copy p { color:#737969; font-size:11px; line-height:1.8; }
.s36-metal-bottom { position:relative; z-index:2; display:flex; justify-content:space-between; gap:25px; margin-top:45px; }
.s36-metal-caption > span { font-size:10px; color:#70644a; }
.s36-metal-caption p { max-width:330px; font-size:8px; line-height:1.7; color:#7a816c; margin-top:9px; }
.s36-metal-hint { font-size:9px; color:#737e66; align-self:end; }
.s36-metal-controls { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:42px; position:relative; z-index:3; padding-top:24px; margin-top:25px; border-top:1px solid #9ca08a66; }
.s36-metal-controls[hidden] { display:none; }
.s36-phase-controls { display:flex; gap:36px; }
.s36-phase-controls button { color:#737968; min-height:44px; position:relative; display:flex; gap:11px; align-items:center; font-size:11px; }
.s36-phase-controls button span { color:#8b7350; font-size:8px; }
.s36-phase-controls button::after { content:''; position:absolute; height:1px; width:100%; background:#8d7550; bottom:3px; left:0; transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.s36-phase-controls button[aria-pressed=true] { color:#343d30; }
.s36-phase-controls button[aria-pressed=true]::after { transform:scaleX(1); }
.s36-turn-controls { display:flex; gap:14px; align-items:center; }
.s36-turn-controls button { width:44px; height:44px; border:1px solid #8b927960; border-radius:50%; font-size:20px; color:#5c604e; }
.s36-turn-controls button:hover { background:#69744c0c; border-color:#8b805e; }
.s36-turn-controls button:disabled { opacity:.25; cursor:default; }
.s36-turn-controls span { font-size:8px; text-transform:uppercase; letter-spacing:.06em; color:#737d64; }
.s36-motion { min-height:44px; min-width:138px; padding:0 17px; font-size:10px; color:#61563e; border:1px solid #98886366; background:#a0906605; transition:background .3s; }
.s36-motion:hover,.s36-motion[aria-pressed=true] { background:#a0906618; }
.s36-motion[hidden] { display:none; }
.s36-metal.is-enhanced .s36-metal-stage { height:calc(100svh - var(--header) - 58px); min-height:580px; max-height:860px; }
.s36-metal.is-enhanced .s36-metal-copies { position:absolute; top:51%; right:var(--gutter); width:172px; margin:0; }
.s36-metal.is-enhanced .s36-metal-copy { position:absolute; inset:0; opacity:0; transform:translateY(10px); transition:opacity .4s,transform .4s; }
.s36-metal.is-enhanced .s36-metal-copy.is-current { opacity:1; transform:none; }
.s36-metal.is-enhanced .s36-metal-bottom { position:absolute; left:var(--gutter); right:var(--gutter); bottom:123px; margin:0; }
.s36-metal.is-enhanced .s36-metal-controls { position:absolute; left:var(--gutter); right:var(--gutter); bottom:30px; margin:0; }
.s36-metal.is-pinned { height:245svh; }
.s36-metal.is-pinned .s36-metal-stage { position:sticky; top:calc(var(--header) + 58px); height:calc(100svh - var(--header) - 58px); min-height:610px; max-height:none; }
.s36-metal-progress { position:absolute; z-index:4; bottom:0; left:0; right:0; height:2px; background:#74836b25; }
.s36-metal-progress span { display:block; width:100%; height:100%; background:#96815b; transform-origin:left; transform:scaleX(var(--metal-progress,0)); }
.s36-metal button:focus-visible,.s36-metal-art:focus-visible { outline:2px solid #76613e; outline-offset:5px; }
@media(min-width:980px) and (min-height:760px) and (prefers-reduced-motion:no-preference) {
 .s36-metal.is-pending { height:245svh; }
 .s36-metal.is-pending .s36-metal-stage { position:sticky; top:calc(var(--header) + 58px); height:calc(100svh - var(--header) - 58px); min-height:610px; }
 .s36-metal.is-pending .s36-metal-copies { display:none; }
}
@media(max-width:1100px) {
 .s36-metal-heading h2 { font-size:clamp(44px,5.5vw,62px); }
 .s36-metal-heading > p:last-child { font-size:11px; }
 .s36-metal.is-enhanced .s36-metal-copies { width:140px; top:56%; }
 .s36-metal-copy h3 { font-size:25px; }
 .s36-metal-controls { gap:25px; }
 .s36-phase-controls { gap:23px; }
 .s36-turn-controls span { display:none; }
 .s36-motion { min-width:127px; }
 .s36-metal-art { left:17%; right:5%; }
}
@media(min-width:761px) and (max-height:820px) {
 .s36-metal.is-enhanced .s36-metal-copies { top:44%; }
 .s36-metal-hint { display:none; }
}
@media(max-width:760px) {
 .s36-hero-links { width:100%; gap:22px; }
 .s36-hero-links .s33-down { flex:1; gap:12px; font-size:9px; }
 .s33-hero-image .o22-zoom { bottom:164px; }
 .s33-hero-copy > .eyebrow { max-width:150px; }
 .s36-metal { scroll-margin-top:24px; }
 .s36-metal-stage,.s36-metal.is-enhanced .s36-metal-stage { min-height:0; max-height:none; height:auto; padding:37px var(--gutter) 30px; display:flex; flex-direction:column; overflow:clip; }
 .s36-metal-heading { width:100%; }
 .s36-metal-heading .eyebrow { font-size:8px; }
 .s36-metal-heading h2 { font-size:clamp(50px,15vw,78px); margin:20px 0; }
 .s36-metal-heading > p:last-child { font-size:11px; max-width:290px; }
 .s36-metal-art { position:relative; inset:auto; height:465px; margin:0 -24px -28px; order:2; }
 .s36-metal.is-enhanced .s36-metal-copies,.s36-metal-copies { position:relative; inset:auto; width:100%; margin:15px 0 0; order:3; }
 .s36-metal.is-enhanced .s36-metal-copy { position:relative; inset:auto; display:none; }
 .s36-metal.is-enhanced .s36-metal-copy.is-current { display:block; }
 .s36-metal-copy { margin-bottom:0; }
 .s36-metal-copy h3 { font-size:30px; margin:15px 0 12px; }
 .s36-metal-copy p { font-size:12px; max-width:320px; }
 .s36-metal.is-enhanced .s36-metal-bottom,.s36-metal-bottom { position:relative; inset:auto; margin-top:28px; order:4; }
 .s36-metal-hint { display:none; }
 .s36-metal.is-enhanced .s36-metal-controls,.s36-metal-controls { position:relative; inset:auto; margin-top:24px; padding-top:14px; order:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
 .s36-metal-controls[hidden] { display:none; }
 .s36-metal.is-enhanced .s36-metal-controls { position:sticky; top:calc(var(--header) + 49px); background:#ece9dff5; backdrop-filter:blur(14px); padding-bottom:12px; border-bottom:1px solid #82906733; }
 .s36-phase-controls { width:100%; justify-content:space-between; gap:13px; }
 .s36-phase-controls button { font-size:10px; gap:9px; }
 .s36-turn-controls { gap:10px; }
 .s36-turn-controls span { display:block; font-size:7px; max-width:50px; line-height:1.4; }
 .s36-motion { min-width:125px; font-size:9px; }
}
@media(max-width:360px) { .s36-turn-controls span { display:none; } .s36-phase-controls button { font-size:9px; gap:6px; } }
@media(prefers-reduced-motion:reduce) { .s36-metal-art canvas,.s36-metal-copy,.s36-phase-controls button::after,.s36-motion { transition:none!important; } }