/* Moonveil: illustrated surfaces and one motion language across all six chapters. */
:root {
  --moon-ivory: #efddc5;
  --moon-silver: #c7cbdc;
  --moon-wine: #91384e;
  --moon-ease: cubic-bezier(.2,.75,.2,1);
  --sans: var(--body);
}
body { background-color:#100d12; }
html,body { overflow-x:clip; }
[hidden] { display:none!important; }
.site-header { border-bottom-color:#c5a89336; background:linear-gradient(180deg,#170f18ed,#170f18bb); }
.site-nav a { position:relative; }
.site-nav a[aria-current="page"]::after { content:'✧'; position:absolute; bottom:-15px; left:calc(50% - 4px); color:var(--moon-ivory); font-size:12px; }
.button { border-radius:8px 2px 8px 2px; transition:transform 220ms var(--moon-ease),border-color 220ms,background 220ms,box-shadow 220ms; }
.button-primary { background:linear-gradient(115deg,#ead7c3,#dcbab9); color:#24161e; border-color:#f2ddc5; box-shadow:inset 0 0 0 3px #39232a10,0 4px 18px #e4c5b310; }
.button:hover { box-shadow:0 6px 30px #d6acb52b; }
.button:active { transform:translateY(2px) scale(.97); }
.button-arrow { transition:transform 250ms var(--moon-ease); }
.button:hover .button-arrow { transform:translate(3px,-2px); }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:where(button,a,summary):focus-visible { outline:2px solid var(--moon-ivory); outline-offset:5px; }

/* The frame is a separate inert layer so portraits, links and copy keep their layout. */
.moon-panel { position:relative; isolation:isolate; border-color:#d4b69e59; box-shadow:0 18px 55px #0004,inset 0 0 0 4px #e0c3b407; }
.moon-frame { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:2; }
.moon-frame::before { content:''; position:absolute; inset:0; background:url('assets/mms-tracery.svg') center/100% 100% no-repeat; opacity:.55; }
.moon-frame::after { content:''; position:absolute; right:-3px; bottom:-3px; width:clamp(110px,20vw,220px); aspect-ratio:1; background:url('assets/mms-lace-ornament-v1.webp') right bottom/contain no-repeat; opacity:.38; }
.moon-panel:nth-child(3n+2) .moon-frame::after { transform:scaleX(-1); right:auto; left:-3px; opacity:.28; }
.moon-panel:where(.owner-card,.media-link-card,.bento-card) .moon-frame::after { width:150px; opacity:.36; }
.moon-panel:where(.rule-card,.role-catalog-card,.rules-detail-card) { padding:32px; background:linear-gradient(125deg,#2c1d2cec,#19131fe8),url('assets/mms-scene-room-v2.webp') center/cover; }
.moon-panel:where(.rule-card,.role-catalog-card,.rules-detail-card) h3 { position:relative; z-index:3; padding-right:20px; }
.moon-panel p,.moon-panel li { position:relative; z-index:3; }
.role-catalog-card .occupied-role-tags { padding-bottom:14px; padding-right:15px; }
.role-catalog-card .occupied-role-tags li { background:#18121de6; border-color:#caabb651; color:#f1dfe8; }
.role-catalog-card[hidden] { display:none; }
.role-catalog-card { transition:transform 400ms var(--moon-ease),border-color 300ms,box-shadow 300ms; }
.role-catalog-card:hover { transform:translateY(-5px); border-color:#dfc6b19c; }
.roles-search { border:1px solid #c4a48d57; border-radius:16px; background:linear-gradient(120deg,#2d1d2de8,#18131edb); padding:28px; }
.roles-search-field { border-radius:8px; background:#100c16a8; }
.role-search-clear { flex:0 0 40px; width:40px; height:40px; margin-right:6px; border:1px solid #d4b9c533; border-radius:50%; background:#2c1d2d; color:#f0dce7; font-size:20px; cursor:pointer; }
.role-search-clear[hidden] { display:none; }
.hero-stamp { background:linear-gradient(130deg,#302030db,#1b141fe8); border-color:#d4b69e66; }
.hero-stamp::after { border-color:#d4b69e55; }
.scene-hero { box-shadow:0 24px 70px #0006,0 0 0 7px #c8afbb09!important; }
.hero-media img { transition:translate 700ms var(--moon-ease); }
.hero-media { translate:0 var(--scene-drift,0px); }
.section-label span { color:var(--moon-ivory); }
.section-label { border-color:#d0b5a54a; }
.section-label::after { content:'☾'; margin-left:auto; color:#ceb1b5; font:24px var(--serif); }
.has-ornaments > .section-decoration { opacity:.29; }
.has-ornaments::after { content:'✧'; position:absolute; bottom:-24px; left:calc(50% - 8px); color:#c1a1a3; font:26px var(--serif); pointer-events:none; }
.site-footer { border-top:1px solid #b591a659; }
.section h2,.fandom-panorama h2,.final-cta h2 { font-family:var(--serif); font-weight:500; text-transform:none; letter-spacing:-.025em; }

/* Each page has its own chapter map, instead of forcing visitors back to the main menu. */
.chapter-map { position:relative; display:grid; grid-template-columns:minmax(180px,.8fr) 2fr auto; align-items:center; gap:28px; margin-top:28px; padding:28px 32px; border:1px solid #ceb49b4a; border-radius:14px; background:linear-gradient(110deg,#2d1d2df2,#1a141fef),url('assets/mms-scene-letters-v2.webp') center/cover; }
.chapter-map-copy { position:relative; z-index:3; }
.chapter-map .eyebrow { margin-bottom:8px; font-size:9px; letter-spacing:.16em; color:#cbaebc; }
.chapter-map h2 { font:500 31px/1.1 var(--serif); margin:0; color:#f0e2dc; }
.chapter-map nav { display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:3; }
.chapter-map nav a { display:inline-flex; gap:8px; align-items:center; padding:10px 13px; border:1px solid #c7a8b13b; border-radius:5px; font-size:11px; color:#e5cdd9; background:#18121dcc; transition:background 220ms,border-color 220ms; }
.chapter-map nav a:hover { background:#412538; border-color:#dbc4af99; }
.chapter-map nav a span { font:14px var(--serif); color:#cba78a; }
.chapter-map > .button { position:relative; z-index:3; font-size:10px; padding:15px 17px; }
.intro-replay { display:inline-flex; align-items:center; gap:7px; padding:8px 0; border:0; color:#c5b4c0; background:none; font:inherit; font-size:10px; cursor:pointer; }
.intro-replay span { font-size:18px; color:var(--moon-ivory); }

/* Fullscreen opening: eclipse > inked sigil > Mei Mei > parting lace. */
.moon-veil { --veil-duration:8400ms; position:fixed; inset:0; z-index:10000; display:none; isolation:isolate; overflow:hidden; background:#0d0910; color:var(--moon-ivory); }
html.mms-entering .moon-veil,.moon-veil.is-playing,.moon-veil.is-leaving { display:block; }
html.mms-intro-skipped .moon-veil { display:none; }
html.mms-entering .moon-veil:not(.is-playing):not(.is-short) { animation:veil-safety 9200ms forwards; }
.moon-veil::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%,#6334474d,transparent 58%),url('assets/mms-constellations-v1.svg') center/900px; opacity:.7; }
.veil-curtain { position:absolute; z-index:4; inset:-10%; background:linear-gradient(90deg,#100b14 15%,#271a2899 55%,#100b14),url('assets/mms-lace-ornament-v1.webp') right bottom/auto 100% no-repeat; }
.veil-curtain-left { clip-path:polygon(0 0,51% 0,54% 25%,49% 50%,53% 75%,51% 100%,0 100%); transform:translateX(-100%); }
.veil-curtain-right { clip-path:polygon(49% 0,100% 0,100% 100%,49% 100%,47% 75%,51% 50%,46% 25%); transform:translateX(100%); }
.veil-stage { position:absolute; left:50%; top:45%; width:min(72vw,440px); aspect-ratio:1; transform:translate(-50%,-50%); }
.moon-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.veil-orbits { position:absolute; inset:-13%; width:126%; height:126%; overflow:visible; fill:none; stroke:#d5bc9f; stroke-width:.65; opacity:0; }
.veil-orbits .sigil { stroke-dasharray:1500; stroke-dashoffset:1500; }
.veil-orbits .sigil-stars { stroke-width:1; }
.veil-moon { position:absolute; inset:13%; border-radius:50%; background:radial-gradient(circle at 28% 26%,#eadbcb,#b4b4c9 50%,#53546c); box-shadow:0 0 45px #d0b6cf26,inset -18px -12px 30px #4c3a5f; opacity:0; overflow:hidden; }
.veil-moon::before { content:''; position:absolute; inset:0; opacity:.3; background:url('assets/mms-constellations-v1.svg') center/260px; }
.veil-moon::after { content:''; position:absolute; inset:-3%; border-radius:50%; background:#110b16; box-shadow:-12px 3px 28px #6f405433; transform:translateX(-120%); }
.veil-portrait { position:absolute; inset:2% -3% -4%; width:106%; height:102%; object-fit:contain; object-position:center bottom; opacity:0; mask-image:linear-gradient(#000 75%,transparent 100%); }
.veil-ornament { position:absolute; right:0; bottom:0; width:100%; height:100%; object-fit:contain; opacity:0; }
.veil-feather { position:absolute; top:50%; left:50%; width:33px; height:104px; background:linear-gradient(90deg,#150e1a,#756276 48%,#211628 55%,#0d0911); border-radius:85% 4% 80% 10%; clip-path:polygon(50% 0,82% 13%,94% 37%,76% 64%,56% 85%,50% 100%,43% 85%,14% 69%,4% 39%,21% 15%); border-left:1px solid #e5c6ab75; opacity:0; }
.veil-feather::after { content:''; position:absolute; left:49%; width:1px; height:115%; background:#b4a2b4; transform:rotate(10deg); }
.veil-copy { position:absolute; z-index:5; top:calc(45% + min(36vw,220px)); left:0; width:100%; padding:8px 24px; text-align:center; pointer-events:none; }
.veil-copy small { display:block; font:9px var(--sans); letter-spacing:.32em; opacity:0; }
.veil-copy strong { display:block; margin:8px 0; font:500 clamp(30px,4vw,48px)/1.1 var(--serif); letter-spacing:.015em; opacity:0; }
.veil-copy em { display:block; font:italic 18px var(--serif); color:#c5a7b8; opacity:0; }
.veil-skip { position:absolute; z-index:8; top:max(24px,env(safe-area-inset-top)); right:max(28px,env(safe-area-inset-right)); min-height:44px; padding:12px 16px; border:1px solid #cab0b348; border-radius:4px; background:#160f1acc; color:#d6bfc8; font:9px var(--sans); letter-spacing:.12em; cursor:pointer; }
.veil-skip:hover { background:#3e2438; }
.moon-veil.is-playing { animation:veil-finish 8400ms both; }
.is-playing .veil-orbits { animation:sigil-turn 7600ms var(--moon-ease) both; }
.is-playing .sigil { animation:sigil-ink 2800ms 240ms var(--moon-ease) forwards; }
.is-playing .veil-moon { animation:moon-rise 5800ms var(--moon-ease) both; }
.is-playing .veil-moon::after { animation:eclipse-cross 4800ms 360ms var(--moon-ease) both; }
.is-playing .veil-portrait { animation:mei-arrives 6600ms 600ms var(--moon-ease) both; }
.is-playing .veil-ornament { animation:ornament-arrives 6400ms 800ms var(--moon-ease) both; }
.is-playing .veil-feather { animation:feather-flight 5600ms var(--flight-delay) var(--moon-ease) both; }
.is-playing .veil-copy small { animation:inscription 5600ms 960ms both; }
.is-playing .veil-copy strong { animation:inscription 5200ms 1400ms both; }
.is-playing .veil-copy em { animation:inscription 4600ms 1960ms both; }
.is-playing .veil-curtain-left { animation:intro-lace-left 8400ms var(--moon-ease) both; }
.is-playing .veil-curtain-right { animation:intro-lace-right 8400ms var(--moon-ease) both; }
.is-playing .veil-skip { opacity:1; }
html.intro-open { overflow:hidden; }
html.mms-arriving main { animation:page-arrives 800ms var(--moon-ease) both; }
.moon-veil.is-short { animation:short-arrival 800ms var(--moon-ease) both; }
.is-short .veil-stage,.is-short .veil-copy { display:none; }
.is-short .veil-curtain-left { animation:lace-open-left 800ms var(--moon-ease) both; }
.is-short .veil-curtain-right { animation:lace-open-right 800ms var(--moon-ease) both; }
.moon-veil.is-leaving { animation:none; pointer-events:auto; }
.is-leaving .veil-stage,.is-leaving .veil-copy,.is-leaving .veil-skip { display:none; }
.is-leaving .veil-curtain-left { animation:lace-close-left 480ms var(--moon-ease) both; }
.is-leaving .veil-curtain-right { animation:lace-close-right 480ms var(--moon-ease) both; }
.moon-veil.is-leaving { background:transparent; }
.moon-veil.is-leaving::before { animation:departure-darken 480ms both; }
@keyframes veil-safety { 0%,90% { visibility:visible; } 100% { visibility:hidden; } }
@keyframes veil-finish { 0%,72% { background-color:#0d0910; } 99% { opacity:1; } 100% { background-color:transparent; opacity:0; } }
@keyframes sigil-ink { to { stroke-dashoffset:0; } }
@keyframes sigil-turn { 0% { opacity:0; rotate:-35deg; scale:.82; } 30%,72% { opacity:.85; } 100% { opacity:0; rotate:22deg; scale:1.2; } }
@keyframes moon-rise { 0% { opacity:0; scale:.45; filter:blur(8px); } 28%,70% { opacity:1; scale:1; filter:blur(0); } 100% { opacity:0; scale:1.14; } }
@keyframes eclipse-cross { 0% { transform:translateX(-120%); } 45% { transform:translateX(-12%); } 100% { transform:translateX(90%); } }
@keyframes mei-arrives { 0%,14% { opacity:0; translate:0 30px; scale:.94; filter:blur(12px); } 38%,84% { opacity:1; translate:0 0; scale:1; filter:blur(0); } 100% { opacity:0; translate:0 -16px; scale:1.05; } }
@keyframes ornament-arrives { 0% { opacity:0; rotate:8deg; scale:.8; } 40%,74% { opacity:.85; rotate:0deg; scale:1; } 100% { opacity:0; scale:1.1; } }
@keyframes feather-flight { 0% { opacity:0; transform:translate(var(--flight-x),120vh) rotate(-60deg) scale(.5); } 20%,65% { opacity:.8; } 100% { opacity:0; transform:translate(calc(var(--flight-x) * -1),-65vh) rotate(var(--flight-spin)) scale(1.1); } }
@keyframes inscription { 0% { opacity:0; translate:0 12px; filter:blur(5px); } 22%,76% { opacity:1; translate:0 0; filter:blur(0); } 100% { opacity:0; translate:0 -5px; } }
@keyframes lace-open-left { 0% { transform:translateX(0); } 100% { transform:translateX(-65%); } }
@keyframes lace-open-right { 0% { transform:translateX(0); } 100% { transform:translateX(65%); } }
@keyframes intro-lace-left { 0%,63% { transform:translateX(-46%); } 72% { transform:translateX(0); } 100% { transform:translateX(-65%); } }
@keyframes intro-lace-right { 0%,63% { transform:translateX(46%); } 72% { transform:translateX(0); } 100% { transform:translateX(65%); } }
@keyframes lace-close-left { from { transform:translateX(-65%); } to { transform:translateX(0); } }
@keyframes lace-close-right { from { transform:translateX(65%); } to { transform:translateX(0); } }
@keyframes short-arrival { 0% { background-color:#0d0910; } 100% { background-color:transparent; opacity:0; } }
@keyframes departure-darken { from { opacity:0; } to { opacity:1; } }
@keyframes page-arrives { from { opacity:.35; translate:0 18px; } to { opacity:1; translate:0 0; } }

/* A real feather pointer, plus an animated lunar satellite on desktop. */
.moon-cursor { position:fixed; top:0; left:0; z-index:12000; width:42px; height:42px; margin:-21px; border:1px solid #e0c4b580; border-radius:50%; pointer-events:none; opacity:0; transition:opacity 180ms,width 220ms,height 220ms,margin 220ms,border-color 220ms; }
.moon-cursor::before { content:'✧'; position:absolute; top:-10px; left:12px; color:#eed7bc; font-size:16px; animation:cursor-orbit 6s linear infinite; transform-origin:9px 31px; }
.moon-cursor.is-link { width:58px; height:58px; margin:-29px; border-color:#f2d8bc; background:#d9b69f0b; }
.moon-cursor.is-down { width:30px; height:30px; margin:-15px; }
@keyframes cursor-orbit { to { rotate:360deg; } }
@media (hover:hover) and (pointer:fine) {
  html.moon-pointer,html.moon-pointer body { cursor:url('assets/mms-feather-cursor.svg') 3 2,auto; }
  html.moon-pointer :where(a,button,summary,[role="button"]) { cursor:url('assets/mms-feather-cursor.svg') 3 2,pointer; }
  html.moon-pointer :where(input,textarea,[contenteditable="true"]) { cursor:text; }
}
/* Shared mouse/touch/keyboard feedback, outside the button's clipping area. */
.moon-tap { position:fixed; z-index:15000; width:90px; height:90px; margin:-45px; pointer-events:none; color:var(--moon-ivory); }
.moon-tap::before,.moon-tap::after { content:''; position:absolute; inset:18px; border:1px solid #edd6bf; border-radius:50%; animation:tap-ring 650ms var(--moon-ease) forwards; }
.moon-tap::after { inset:24px; border-color:#be788a; animation-delay:70ms; }
.moon-tap i { position:absolute; top:calc(50% - 4px); left:calc(50% - 4px); width:8px; height:8px; background:#edd7bf; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:tap-spark 700ms var(--moon-ease) forwards; }
@keyframes tap-ring { from { opacity:.9; scale:.3; } to { opacity:0; scale:1.65; } }
@keyframes tap-spark { from { opacity:1; transform:rotate(var(--spark-angle)) translateX(8px) scale(.6); } to { opacity:0; transform:rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(.15); } }
.mms-pressed { animation:button-press 420ms var(--moon-ease); }
@keyframes button-press { 35% { scale:.96; } 100% { scale:1; } }

/* The admission note uses the same drawn frame and moonlit portrait. */
.moon-dialog { width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid #d5baa16b; border-radius:18px; color:#efdfdf; background:#211623; box-shadow:0 30px 120px #0009; overflow:auto; }
.moon-dialog::backdrop { background:#0c0810c9; backdrop-filter:blur(8px); }
.moon-dialog[open] { animation:dialog-arrives 450ms var(--moon-ease); }
.moon-dialog-inner { position:relative; display:grid; grid-template-columns:240px 1fr; isolation:isolate; }
.moon-dialog-art { position:relative; min-height:430px; background:linear-gradient(#21132222,#21132255),url('assets/mms-scene-garden-v2.webp') center/cover; overflow:hidden; }
.moon-dialog-art img { position:absolute; width:145%; max-width:none; height:100%; left:-22%; bottom:0; object-fit:contain; object-position:center bottom; }
.moon-dialog-copy { padding:50px 32px 32px; position:relative; z-index:3; }
.moon-dialog-copy h2 { font:500 42px/1 var(--serif); margin:12px 0 22px; }
.moon-dialog-copy > p { font-size:13px; line-height:1.75; color:#d7c2d0; }
.moon-dialog-copy ol { display:grid; gap:16px; margin:24px 0; padding-left:20px; }
.moon-dialog-copy li { font-size:13px; line-height:1.6; padding-left:5px; }
.moon-dialog-copy li::marker { color:#d2b291; font-family:var(--serif); }
.moon-dialog-copy li a { color:#f1d7b7; text-decoration:underline; text-underline-offset:3px; }
.moon-dialog-copy .button { width:100%; font-size:10px; }
.moon-dialog-close { position:absolute; z-index:5; top:12px; right:12px; width:40px; height:40px; border:1px solid #cfadbd55; border-radius:50%; background:#1a111fdc; color:#eddae5; font-size:22px; cursor:pointer; }
@keyframes dialog-arrives { from { opacity:0; translate:0 20px; scale:.96; } to { opacity:1; translate:0 0; scale:1; } }

/* Scroll choreography uses staggered reveals, a short line draw and gentle scene drift. */
.js [data-reveal] { transition-delay:var(--reveal-stagger,0ms); }
.js [data-reveal].is-visible { transition-duration:760ms; transition-timing-function:var(--moon-ease); }
.js .section-label[data-reveal]::before { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,#e7c8ad,transparent); transform:scaleX(0); transform-origin:left; transition:transform 1000ms var(--moon-ease); }
.js .section-label[data-reveal].is-visible::before { transform:scaleX(1); }
.section-label { position:relative; }
.moon-word { display:inline-block; opacity:var(--word-light,1); transition:opacity 140ms linear; }
html.motion-paused .moon-word { opacity:1; }
/* The illustrated deck is driven by normal page scroll, with no wheel/touch interception. */
.story-scroll { position:relative; }
.story-controls { display:none; }
.story-enabled { overflow:visible; }
.story-enabled .story-scroll { height:calc(100svh * 3.8); }
.story-enabled .story-pin { position:sticky; top:106px; }
.story-enabled .bento-grid { position:relative; display:block; height:min(600px,calc(100svh - 188px)); min-height:420px; overflow:hidden; perspective:1200px; border-radius:20px; isolation:isolate; }
.story-enabled .bento-grid .bento-card { position:absolute; inset:0; display:grid; grid-template-columns:57% 43%; min-height:0; max-height:none; margin:0; transform-origin:center; will-change:transform; transition:none!important; }
.story-enabled .bento-card .scene-card-art { height:100%; aspect-ratio:auto; border-bottom:0; border-right:1px solid #c39fb446; }
.story-enabled .bento-card .scene-card-art img { width:100%; height:100%; object-fit:cover; transform:scale(var(--story-image-scale,1.04)) translateY(var(--story-image-pan,0px)); transition:none; }
.story-enabled .bento-card .card-copy { padding:clamp(28px,4vw,60px); justify-content:center; }
.bento-card .card-copy { transform:none; }
.bento-card::before { display:none; }
.story-enabled .bento-card .card-copy h3 { font-size:clamp(36px,4.5vw,64px); margin-bottom:24px; }
.story-enabled .bento-card .card-copy p { font-size:15px; line-height:1.9; }
.story-enabled .bento-card .card-copy .text-link { margin-top:8px; }
.story-enabled .bento-card .card-topline { right:auto; gap:8px; }
.story-enabled .story-controls { display:flex; position:relative; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px; color:#d6b8c7; }
.story-caption { font:italic 18px var(--serif); margin:0; }
.story-dots { display:flex; gap:10px; }
.story-dots button { position:relative; display:grid; place-items:center; width:44px; height:44px; border:1px solid #b993a64f; border-radius:50%; background:#211726; color:#b89baa; font:12px var(--body); cursor:pointer; transition:background 250ms,border-color 250ms,color 250ms; }
.story-dots button[aria-pressed="true"] { border-color:#ebd4b8; background:#513244; color:#f0ddc4; }
.story-dots button[aria-pressed="true"]::after { content:'✧'; position:absolute; top:-10px; right:-5px; font-size:15px; color:#e8ceb0; }
.story-line { position:absolute; top:0; left:0; right:0; height:1px; background:#ba91a438; }
.story-line i { display:block; width:100%; height:1px; background:linear-gradient(90deg,#7a3d55,#e5c8a6); transform:scaleX(var(--story-progress,0)); transform-origin:left; }
@media(max-width:720px) {
  .story-enabled .story-scroll { height:calc(100svh * 3.5); }
  .story-enabled .story-pin { top:96px; }
  .story-enabled .bento-grid { height:min(620px,calc(100svh - 188px)); min-height:420px; border-radius:14px; perspective:none; }
  .story-enabled .bento-grid .bento-card { display:flex; flex-direction:column; transform-style:flat; }
  .story-enabled .bento-card .scene-card-art { height:44%; min-height:180px; flex-shrink:0; border-right:0; border-bottom:1px solid #c39fb446; }
  .story-enabled .bento-card .card-copy { padding:22px; flex:1; min-height:0; justify-content:flex-start; inset:auto; transform:none; }
  .story-enabled .bento-card .card-copy h3 { font-size:32px; margin-bottom:12px; }
  .story-enabled .bento-card .card-copy p { font-size:13px; line-height:1.65; margin-bottom:12px; color:#eddee6; }
  .story-enabled .bento-card .card-copy::before { content:none; }
  .story-enabled .bento-card .card-copy::after { filter:none; opacity:.2; }
  .story-enabled .bento-card .moon-frame { display:none; }
  .story-enabled .bento-card .card-topline > span { backdrop-filter:none; background:#160e1ded; }
  .story-enabled .bento-card .card-copy .text-link { font-size:10px; }
  .story-enabled .story-controls { padding:14px 0; gap:12px; }
  .story-caption { font-size:15px; flex:1; min-width:0; }
  .story-dots { gap:6px; flex-shrink:0; }
  .story-dots button { width:44px; height:44px; }
}
@media (pointer:coarse) {
  .story-enabled .bento-grid { perspective:none; }
  .story-enabled .bento-card { transform-style:flat; }
  .moon-cursor,.moon-cursor-trail { display:none!important; }
}
html.motion-paused .moon-veil,html.motion-paused .moon-cursor,html.motion-paused .moon-tap { display:none!important; }
html.motion-paused .hero-media { translate:none; }
html.motion-paused .mms-pressed,html.motion-paused .moon-dialog[open] { animation:none; }
html.motion-paused .button { transition:none; }
@media (prefers-reduced-motion:reduce) {
  .moon-veil,.moon-cursor,.moon-tap { display:none!important; }
  .hero-media { translate:none; }
  .moon-dialog[open],.mms-pressed,html.mms-arriving main { animation:none!important; }
}
@media (max-width:1080px) {
  .chapter-map { grid-template-columns:1fr 2fr; gap:20px; }
  .chapter-map > .button { grid-column:2; justify-self:start; }
  .site-nav a[aria-current="page"]::after { position:static; margin-left:8px; }
}
@media (max-width:720px) {
  .chapter-map { grid-template-columns:1fr; margin-top:20px; padding:24px; gap:18px; }
  .chapter-map > .button { grid-column:auto; justify-self:start; }
  .chapter-map nav { gap:7px; }
  .chapter-map nav a { font-size:11px; min-height:42px; }
  .moon-panel:where(.rule-card,.role-catalog-card,.rules-detail-card) { padding:28px 24px; }
  .moon-frame::after { width:130px; opacity:.3; }
  .roles-search { padding:22px; }
  .veil-stage { width:min(82vw,380px); top:42%; }
  .veil-copy { top:calc(42% + min(41vw,190px)); }
  .veil-copy strong { font-size:34px; }
  .veil-copy small { font-size:8px; letter-spacing:.21em; }
  .veil-copy em { font-size:17px; }
  .veil-skip { right:18px; top:18px; }
  .moon-dialog-inner { grid-template-columns:1fr; }
  .moon-dialog-art { min-height:190px; height:190px; }
  .moon-dialog-art img { width:100%; left:0; height:150%; bottom:-25%; object-position:center 40%; }
  .moon-dialog-copy { padding:26px 24px 28px; }
  .moon-dialog-copy h2 { font-size:36px; }
}