/* Shared surfaces across the home and work pages. */
body{background:#131e2e}
.reference-header.scrolled{background:#162131f5;color:#edf3fb;border-color:#91a7c32b;box-shadow:0 2px 15px #050b141a}
.header.scrolled nav a{color:#edf3fb}
.header.scrolled .menu-toggle{background:#29384e;color:#edf3fb;border-color:#839ab640}
.footer{background:#131e2e;color:#e3ecf9;border-color:#839ab62b}
.footer>span,.footer a:not(.brand),.footer button{color:#b6c6dc}
.commission-form{background:#f2f5f9}
.commission-form input,.commission-form textarea,.commission-form select{background:#fcfdff}
.work-contact-link{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border:1px solid #afc4e54f;border-radius:8px;color:#e6efff;font-size:14px;text-decoration:none}
.work-contact-link:hover{background:#2b3c58;border-color:#afc4e5}
.realm-work figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.realm-work figcaption>span{flex:1;min-width:220px}
@media(max-width:720px){.header.scrolled nav{background:#1c2b40;border-color:#8499b538}.realm-work figcaption{gap:12px}.work-contact-link{font-size:14px;min-height:44px}}

/* Quiet scenery below the landing: decorative layers never cover the content. */
.section.realm-work,.section.realm-shop,.section.realm-commissions{position:relative;isolation:isolate}
.section.realm-work{background:radial-gradient(ellipse at 0 50%,#293b5845,transparent 65%),#111b2b;border-bottom-color:#8ba2c326}
.section.realm-work:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0 0 auto;height:800px;max-height:100%;background:linear-gradient(180deg,#101b2bdd 0%,#111b2bd9 28%,#111b2bf2 72%,#111b2b 100%),url('/assets/reference-04.webp') center 40%/cover no-repeat;mask-image:linear-gradient(#000 45%,transparent);-webkit-mask-image:linear-gradient(#000 45%,transparent)}
.section.realm-work:after{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 10% 20%,#9ebde71c,transparent 42%),radial-gradient(ellipse at 95% 68%,#7685c318,transparent 38%)}
.section.realm-shop#shop{background:radial-gradient(ellipse at 95% 15%,#b9947921,transparent 46%),radial-gradient(ellipse at 0 40%,#7d9dca26,transparent 52%),linear-gradient(160deg,#192538,#172030 65%,#1c2b40);border-block-color:#91a7c326}
.section.realm-shop:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:url('/assets/section-grain.svg') repeat;opacity:.1}
.section.realm-shop:after{content:'';position:absolute;z-index:-1;pointer-events:none;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#b7cbe152,transparent)}
.section.realm-commissions{background:radial-gradient(ellipse at 0 35%,#7391b21f,transparent 65%),linear-gradient(115deg,#101b2bed,#1c2c43dc),url('/assets/reference-04.webp') center 65%/cover no-repeat}
.footer{background:radial-gradient(ellipse at 50% 0,#31466240,transparent 70%),#131e2e}
@media(max-width:720px){.section.realm-work:before{height:650px;background-position:center,35% center}.section.realm-shop#shop{background:radial-gradient(ellipse at 100% 8%,#b994791a,transparent 35%),radial-gradient(ellipse at 0 40%,#7d9dca21,transparent 55%),#192538}}

/* Quote-led commissions: examples and budgets before the short request form. */
.section.commission-packages{gap:30px 64px}
.commission-packages .commission-intro{grid-column:1/-1;position:static;padding:0}
.commission-packages .commission-intro>p{max-width:none;margin:17px 0 5px}
.commission-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;grid-column:1/-1}
.commission-offer{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:1px solid #9fb4d342;border-radius:15px;background:#131f31f2;box-shadow:0 12px 32px #07112130}
.commission-offer.signature-offer{border-color:#efc49a91;box-shadow:0 12px 36px #07112150,inset 0 0 0 1px #efc49a18}
.commission-example{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b111c;border-bottom:1px solid #9fb4d32b}
.commission-example video,.commission-example img{display:block;width:100%;height:100%;object-fit:cover}
.commission-example video:fullscreen{object-fit:contain}
.camera-study img{object-fit:cover;animation:commission-camera 5s ease-in-out infinite alternate;animation-play-state:paused}
.camera-study.playing img{animation-play-state:running}
.camera-study button{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;min-height:42px;background:#111b2be8;border:1px solid #c5d4ed60;border-radius:7px;color:#fff;font-size:14px}
.essential-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.essential-fog{position:absolute;inset:10% -35% -12%;background:radial-gradient(ellipse at 25% 70%,#dae9ffc2,transparent 39%),radial-gradient(ellipse at 75% 85%,#eff5ffc9,transparent 44%);filter:blur(14px);opacity:.55;animation:essential-fog 10s ease-in-out infinite;animation-play-state:paused}
.essential-fog.fog-back{inset:6% -25% 0;opacity:.32;transform:scaleX(-1);animation-delay:-5s}
.essential-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fff0bc;box-shadow:0 0 7px #ffdc91b3;opacity:0;animation:essential-drift 10s linear infinite;animation-delay:var(--delay);animation-play-state:paused}
.camera-study.playing .essential-fog,.camera-study.playing .essential-particle{animation-play-state:running}
@keyframes essential-fog{0%,100%{translate:-4% 2%;scale:1}50%{translate:5% -3%;scale:1.07}}
@keyframes essential-drift{0%,100%{opacity:0;transform:translate(0,14px)}15%,75%{opacity:var(--alpha)}95%{opacity:0;transform:translate(var(--drift),-95px)}}
@media(max-width:720px){.essential-particle:nth-child(n+43){display:none}}
@media(prefers-reduced-motion:reduce){.essential-fog,.essential-particle{animation:none}.essential-particle{opacity:var(--alpha)}}
@keyframes commission-camera{from{transform:scale(1)}to{transform:scale(1.09) translate(-1%,.5%)}}
.commission-offer-body{display:flex;flex-direction:column;flex:1;padding:24px 22px}
.commission-offer h3{font-size:27px;font-weight:500;line-height:1.2;margin:0 0 10px}
.commission-offer .commission-budget{font-size:28px;font-weight:400;color:#f5d0aa;margin:0 0 20px;line-height:1.2}
.commission-offer-body>p:not(.commission-budget):not(.commission-example-credit){font-size:17px;color:#d9e3f1;line-height:1.45;margin:0 0 17px;min-height:50px}
.commission-offer ul{padding:0;margin:0 0 25px;list-style:none;color:#b9c9df;font-size:15px;line-height:1.6}
.commission-offer li{margin:5px 0}
.commission-offer li:before{content:'＋';margin-right:8px;color:#a9caff}
.commission-offer .button{width:100%;font-size:16px;min-height:50px;border-radius:8px;margin-top:auto;border:1px solid #a6bdd352;background:#24334a;color:#f0f5fc}
.commission-offer .button:hover,.commission-offer .button[aria-pressed=true]{background:#3b506d;border-color:#ccddf4}
.signature-offer .button{background:#f5c695;color:#16253c;border-color:#f7d2ac}
.signature-offer .button:hover,.signature-offer .button[aria-pressed=true]{background:#ffdfb8;border-color:#fff0d8}
.commission-offer-body .commission-example-credit{font-size:11px;line-height:1.4;color:#a7b8d0;margin:14px 0 0;min-height:31px}
.commission-budget-note{grid-column:1/-1;font-size:14px;color:#becee2;margin:-10px 0 22px;line-height:1.6;max-width:900px}
.commission-request-intro{padding-top:25px;position:sticky;top:100px}
.commission-request-intro h3{font-size:34px;line-height:1.25;font-weight:400;margin:0 0 20px}
.realm-commissions .commission-request-intro>p{font-size:18px;color:#cfdbed;max-width:330px}
.realm-commissions .commission-request-intro .commission-delivery{font-size:14px;color:#b2c4df;margin-top:25px}
.commission-packages .commission-form{scroll-margin-top:100px}
#commission-level{margin-bottom:23px}
@media(max-width:1000px){.commission-offers{gap:12px}.commission-offer-body{padding:20px 15px}.commission-offer h3{font-size:23px}.commission-offer .commission-budget{font-size:24px}.commission-offer .button{font-size:14px;padding-inline:10px}}
@media(max-width:720px){.commission-offers{grid-template-columns:1fr;gap:18px}.commission-example{aspect-ratio:16/9}.commission-offer-body{padding:24px}.commission-offer h3{font-size:27px}.commission-offer .commission-budget{font-size:29px}.commission-offer-body>p:not(.commission-budget):not(.commission-example-credit){min-height:0}.commission-offer ul{margin-bottom:18px}.commission-offer .button{font-size:17px}.commission-request-intro{position:static;padding-top:10px}.commission-request-intro h3{font-size:30px}.section.commission-packages{gap:26px}.commission-budget-note{margin:0;font-size:13px}.commission-offer-body .commission-example-credit{min-height:0}}
@media(prefers-reduced-motion:reduce){.camera-study img{animation:none}}

/* Keep the gallery attribution available without repeating it under the player. */
.realm-work .work-credits{flex:1;min-width:0;border:0;padding:0;color:#c2d0e4;position:relative}
.realm-work .work-credits summary{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:5px 0;cursor:pointer;font-size:15px;list-style:none}
.realm-work .work-credits summary::-webkit-details-marker{display:none}
.realm-work .work-credits summary:after{content:'+';font-size:17px;color:#aebfd6}
.realm-work .work-credits[open] summary:after{content:'−'}
.realm-work .work-credits #featured-caption{font-size:15px;line-height:1.5;margin:5px 0 0;color:#c2d0e4;max-width:850px}
.realm-work figcaption{align-items:flex-start}

/* Artwork-only gallery thumbnails; accessible names stay on the buttons. */
.artstation-grid .artstation-card{aspect-ratio:1;padding:0;min-height:0;line-height:0}
.artstation-grid .artstation-card img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.artstation-grid .artstation-card:focus-visible{outline:2px solid #f5c695;outline-offset:4px}