/* Four engraved Moonveil emblems, each with its own quiet motion. */
.join-steps .step-icon { width:104px; height:104px; margin-bottom:28px; color:#dfc3a4; border-color:#b8927c77; background:radial-gradient(circle at 50% 35%,#67354b80,#231421); box-shadow:inset 0 0 22px #b78a7830,0 8px 22px #10091466; }
.join-symbol { width:94%; height:94%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.join-symbol .symbol-ring { stroke:#cfae8b; stroke-dasharray:2 7; transform-origin:48px 48px; animation:emblem-orbit 30s linear infinite paused; }
.join-symbol .symbol-star { fill:#eed0a8; stroke:none; animation:emblem-glint 4s ease-in-out infinite alternate paused; }
.join-symbol .symbol-rose { fill:#723348; stroke:#e3b89f; }
.join-symbol text { fill:#efdec8; stroke:none; font:600 23px var(--serif); text-anchor:middle; }
.join-symbol .symbol-mask { transform-origin:48px 48px; animation:emblem-mask 6s ease-in-out infinite alternate paused; }
.join-symbol .symbol-key { transform-origin:34px 29px; animation:emblem-key 5s ease-in-out infinite alternate paused; }
.join-symbol .symbol-feather { transform-origin:56px 51px; animation:emblem-quill 5s ease-in-out infinite alternate paused; }
.living-in-view .join-symbol * { animation-play-state:running; }
.join-steps li:hover .join-symbol .symbol-star { fill:#fff0d4; }
@keyframes emblem-orbit { to { rotate:360deg; } }
@keyframes emblem-glint { from { opacity:.35; } to { opacity:1; } }
@keyframes emblem-mask { from { rotate:-3deg; } to { rotate:3deg; } }
@keyframes emblem-key { from { rotate:-8deg; } to { rotate:6deg; } }
@keyframes emblem-quill { 0%,100% { rotate:-4deg; } 40%,65% { rotate:5deg; } }

/* The roles header is an interactive album, with native page scrolling. */
body.roles-page .hero.roles-hero .hero-copy { max-width:52%; }
.roles-hero .hero-content { display:block; }
.roles-hero .role-archive { --archive-spread:.55; --archive-progress:0; position:absolute; z-index:1; inset:145px 3% 112px 54%; min-height:490px; border:1px solid #c4a38b77; border-radius:28px 5px; overflow:clip; isolation:isolate; background:#241824; translate:0 var(--scene-drift,0px); }
.archive-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.58; transform:scale(calc(1 + var(--archive-progress) * .07)); }
.role-archive::after { content:''; position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(0deg,#211521 2%,transparent 35%),linear-gradient(90deg,#21152155,transparent 30%,transparent 70%,#21152144); }
.archive-orbit { position:absolute; z-index:1; inset:7%; width:86%; height:76%; fill:none; stroke:#dbbc9b; stroke-width:.7; opacity:.7; transform:rotate(calc(var(--archive-progress) * 30deg)); }
.archive-orbit .archive-orbit-ring { transform-origin:300px 300px; animation:emblem-orbit 42s linear infinite paused; }
.archive-active .archive-orbit-ring { animation-play-state:running; }
.archive-orbit path { stroke-dasharray:1000; stroke-dashoffset:calc(1000 - var(--archive-progress) * 1000); }
.archive-mei { position:absolute; z-index:2; left:51%; bottom:18%; width:92%; aspect-ratio:1; transform:translateX(-50%) translate(var(--archive-look-x,0px),var(--archive-look-y,0px)) rotate(var(--archive-lean,0deg)); transform-origin:54.2% 35.7%; transition:transform 650ms var(--moon-ease); }
.archive-mei-breath { position:absolute; inset:0; animation:archive-breathe 6.5s -1s ease-in-out infinite alternate paused; }
.archive-mei img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.archive-mei .archive-mei-body { mask-image:linear-gradient(#000 75%,transparent); }
.archive-eye { clip-path:ellipse(4.9% 1.35% at 54.2% 35.7%); translate:var(--archive-eye-x,0px) var(--archive-eye-y,0px); transition:translate 250ms; }
.archive-blink { opacity:0; clip-path:ellipse(5.2% 1.8% at 54.2% 35.7%); animation:archive-blink 6s -4s infinite paused; }
.archive-active .archive-mei-breath,.archive-active .archive-blink { animation-play-state:running; }
.archive-book { position:absolute; z-index:4; inset:auto 3% 10%; height:31%; transform:scaleX(calc(.8 + var(--archive-spread) * .2)); }
.archive-book svg { width:100%; height:100%; fill:#c4b3a8; stroke:#765967; stroke-width:2; }
.archive-book .book-cover { fill:#5e293c; stroke:#c7a281; }
.archive-book .book-writing { fill:none; stroke:#775968; stroke-width:1.2; stroke-dasharray:260; stroke-dashoffset:calc(260 - var(--archive-spread) * 260); }
.archive-card { position:absolute; z-index:5; bottom:18%; left:calc(50% + (var(--card-i) - 1.5) * 22% * var(--archive-spread)); width:23%; height:26%; min-height:128px; margin-left:-11.5%; padding:0; border:1px solid #c4a386; border-radius:34% 34% 3px 3px; background:#291d2b; color:#efdbc8; overflow:hidden; transform:rotate(calc((var(--card-i) - 1.5) * 9deg * var(--archive-spread))); transform-origin:50% 120%; cursor:pointer; touch-action:pan-y pinch-zoom; transition:transform 650ms var(--moon-ease),left 650ms var(--moon-ease),border-color 250ms; }
.archive-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; pointer-events:none; }
.archive-card span { position:absolute; inset:auto 0 0; padding:20px 3px 7px; background:linear-gradient(transparent,#231424ed 60%); color:#f3dfce; font:500 14px var(--serif); text-align:center; pointer-events:none; }
.archive-card.is-selected { z-index:6; transform:translateY(-18px) rotate(0deg); border-color:#f0d4b4; box-shadow:0 8px 22px #120b1666; }
.archive-card:hover,.archive-card:focus-visible { z-index:7; transform:translateY(-24px) rotate(0deg); outline:2px solid #d9b391; outline-offset:2px; }
.archive-toggle { position:absolute; top:16px; left:16px; z-index:8; padding:10px 13px; min-height:44px; border:1px solid #c4a38b88; border-radius:30px; background:#241623d9; color:#e9cfb5; font:10px var(--body); cursor:pointer; }
.archive-toggle span { font:22px/1 var(--serif); margin-right:7px; vertical-align:middle; }
.archive-toggle:focus-visible { outline:2px solid #e6c7a5; outline-offset:4px; }
.archive-caption { position:absolute; z-index:8; bottom:16px; left:20px; right:74px; color:#eee0d4; }
.archive-caption small { display:block; margin-bottom:5px; font:7px var(--body); letter-spacing:.13em; color:#cbb2b9; }
.archive-caption strong { display:block; font:500 18px/1.25 var(--serif); }
.archive-seal { position:absolute; z-index:8; right:16px; bottom:15px; display:grid; place-items:center; width:44px; height:44px; border:3px double #d7b598; border-radius:50%; background:#713347; color:#efd1b6; font:500 18px var(--serif); box-shadow:0 3px 9px #110a1566; }
.archive-flower { position:absolute; inset:auto -4% -6% auto; z-index:7; width:35%; aspect-ratio:1; background:url('assets/mms-lace-ornament-v1.webp') right bottom/contain no-repeat; opacity:.5; pointer-events:none; }
@keyframes archive-breathe { from { translate:0 0; } to { translate:0 -5px; } }
@keyframes archive-blink { 0%,91%,100% { opacity:0; } 93%,95% { opacity:1; } }
@media (max-width:1080px) and (min-width:721px) {
  body.roles-page .hero.roles-hero .hero-copy { max-width:50%; }
  .roles-hero .role-archive { left:53%; }
  .archive-card span { font-size:12px; }
  .archive-caption strong { font-size:16px; }
}
@media(max-width:720px) {
  .join-steps .step-icon { width:86px; height:86px; margin-bottom:24px; }
  .roles-hero .role-archive { inset:100px 16px auto; min-height:0; height:360px; max-width:460px; margin-inline:auto; border-radius:22px 4px; }
  body.roles-page .hero.roles-hero .hero-content { padding-top:500px; }
  body.roles-page .hero.roles-hero .hero-copy { max-width:100%; }
  .archive-card { min-height:100px; }
  .archive-card span { font-size:12px; padding-bottom:6px; }
  .archive-toggle { top:12px; left:12px; padding:8px 11px; font-size:9px; }
  .archive-caption { left:16px; right:70px; bottom:13px; }
  .archive-caption strong { font-size:15px; }
  .archive-seal { bottom:13px; right:13px; width:40px; height:40px; font-size:16px; }
}
html.motion-hidden .join-symbol *,html.motion-hidden .role-archive *,html.intro-open .role-archive * { animation-play-state:paused!important; }
html.motion-paused .join-symbol *,html.motion-paused .role-archive * { animation:none!important; transition:none!important; }
html.motion-paused .role-archive { translate:none; }
@media(prefers-reduced-motion:reduce) { .join-symbol *,.role-archive * { animation:none!important; transition:none!important; } .role-archive { translate:none; } }