/* Luna brand book applied to the existing site: Modern Gothic, the skull, the five colors and the nose arrow. */

@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Modern Gothic";src:url("assets/fonts/ModernGothic-Thin.woff2") format("woff2");font-weight:100;font-display:swap}
@font-face{font-family:"Modern Gothic Mono";src:url("assets/fonts/ModernGothicMono-Light.woff2") format("woff2");font-weight:300;font-display:swap}

:root{
 --luna-hex:#5B23FF;--luna-crypt:#362F4F;--luna-bone:#F5F3FF;--luna-wisp:#008BFF;--luna-glow:#E4FF30;
 --luna-font:"Modern Gothic","Helvetica Neue",Arial,sans-serif;
 --luna-mono:"Modern Gothic Mono",ui-monospace,Menlo,monospace;
 --luna-jaw:8px;
}
:root[data-theme=luna]{--film-rgb:9,7,27}
/* No palette bar in the brand version; ?study=1 brings it back with its height */
:root{--palette-height:0px}
:root:has(.theme-switcher){--palette-height:56px}

/* Type: one family, Black to lead, Regular to read, sentence case */
body{font-family:var(--luna-font);font-feature-settings:"calt" 1}
h1,h2{font-weight:900;letter-spacing:-.045em;line-height:.94}
h3{font-weight:700;letter-spacing:-.02em}
em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.hero-copy h1 em,.section-title h2 em{color:inherit;font-size:1em}
.manifesto h2>span{color:var(--muted)}
.eyebrow,.edition{font-size:13px;letter-spacing:0;font-weight:500;text-transform:none}
.edition{font-size:13px}
.hero-preview>span,.scroll-cue,.contact-baseline,.collection-foot,.footer-bottom,.footer-bottom button,.partner-steps article>span,.feature-seal,.game-number{letter-spacing:0;text-transform:none}
.hero-preview>span,.scroll-cue,.collection-foot,.contact-baseline{font-size:13px}
.partner-steps article>span{font-size:13px;font-weight:700}
.feature-seal{font-size:13px;font-weight:700;line-height:1.2}
.world-tag,.game-type,.theme-caption{text-transform:none;letter-spacing:0}
.world-tag{font-size:12px;font-weight:500}
.game-type{font-size:13px;font-weight:700}
.game-number{font-size:13px;font-weight:500}
.game-card h3,.partner-steps h3,.featured-bottom h3{font-weight:900;letter-spacing:-.03em}
.game-tags span{font-size:12px;font-weight:500;letter-spacing:0;border-radius:var(--luna-jaw)}
.duration,.nav-count{font-family:var(--luna-mono);font-weight:300;letter-spacing:0;font-variant-numeric:tabular-nums}
.nav-count{font-size:11px}
.craft-tabs button{font-size:13px;font-weight:700}
.craft-tabs button>span{font-weight:700}

/* The mark replaces the old reel bars; the lockup carries the name */
.wordmark{gap:0;font-size:0;width:154px;aspect-ratio:14789/4827;background:currentColor;-webkit-mask:url("assets/logo/luna-lockup-horizontal.svg") left center/contain no-repeat;mask:url("assets/logo/luna-lockup-horizontal.svg") left center/contain no-repeat}
.wordmark>*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footer-top .wordmark{font-size:0;width:230px}
.skull-sym,.tiny-mark .icon-asterisk{display:inline-block;width:.8em;height:1em;background:currentColor;-webkit-mask:url("assets/logo/luna-mark.svg") center/contain no-repeat;mask:url("assets/logo/luna-mark.svg") center/contain no-repeat;font-style:normal}
.tiny-mark .icon-asterisk>*{display:none}
.moment-slot i.skull-sym{width:74px;height:105px;background:var(--dark);-webkit-mask:none;mask:none;display:grid;place-items:center;position:relative}
.moment-slot i.skull-sym::after{content:"";width:46px;height:58px;background:var(--gold);-webkit-mask:url("assets/logo/luna-mark.svg") center/contain no-repeat;mask:url("assets/logo/luna-mark.svg") center/contain no-repeat}
.moment-display i.skull-sym{width:76px;height:96px;padding:0;margin-right:10px}

/* The nose is the only arrow */
.icon-arrow-up-right,.icon-arrow-down-right,.icon-arrow-down,.icon-arrow-left{background:currentColor;-webkit-mask:url("assets/icons/nose.svg") center/62% no-repeat;mask:url("assets/icons/nose.svg") center/62% no-repeat;transform:rotate(90deg)}
.icon-arrow-up-right>*,.icon-arrow-down-right>*,.icon-arrow-down>*,.icon-arrow-left>*{display:none}
.icon-arrow-down,.icon-arrow-down-right{transform:rotate(180deg)}
.icon-arrow-left{transform:rotate(-90deg)}
.craft-tabs button[aria-selected=true]:after{-webkit-mask:url("assets/icons/nose.svg") center/62% no-repeat;mask:url("assets/icons/nose.svg") center/62% no-repeat;transform:rotate(90deg)}
.contact-arrow:hover{transform:none;background:var(--luna-glow);color:var(--luna-crypt);border-color:var(--luna-glow)}

/* Buttons are as round as the eyes; Glow on dark, Crypt on light */
.pill{border-radius:999px;font-weight:700;font-size:15px;gap:20px}
.pill:hover{background:var(--luna-hex);color:var(--luna-bone)}
.pill.light,.hero .pill.light{background:var(--luna-glow);color:var(--luna-crypt)}
.pill.light:hover,.hero .pill.light:hover{background:var(--luna-bone);color:var(--luna-crypt)}
.pill.outline{border-color:color-mix(in srgb,var(--luna-bone) 45%,transparent)}
.header-contact{font-weight:700;font-size:14px;border-color:color-mix(in srgb,var(--luna-bone) 35%,transparent);gap:18px;align-items:center}
.header-contact:hover{background:var(--luna-glow);color:var(--luna-crypt);border-color:var(--luna-glow)}
.view-world{background:var(--luna-glow);color:var(--luna-crypt)}

/* Panels take the jaw's 8 px corner */
.game-art,.featured-visual,.craft-panel-art,.development-feature,.development-note,.moment-split,.hero-preview img{border-radius:var(--luna-jaw)}

/* Focus: Hex on light, Glow on dark */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline-color:var(--luna-hex)}
.dark-section :focus-visible,.hero :focus-visible,.header :focus-visible,.moments-section :focus-visible,dialog :focus-visible{outline-color:var(--luna-glow)}

/* Hero: new film, Bone type, Glow call to action */
.hero{--on-dark:#F5F3FF;--hero-muted:#CFCAE6;color:#F5F3FF}
.hero-copy h1{font-size:clamp(76px,8vw,140px);letter-spacing:-.05em;line-height:.9}
.hero-intro{color:#CFCAE6;font-size:17px;line-height:1.5}
.hero-topline,.hero-bottom,body[data-page=home] .header{color:#F5F3FF}
.hero-preview strong{color:#F5F3FF}
.hero-preview>span{color:#CFCAE6}
#motion-toggle{color:#CFCAE6;font-size:13px}
.status-dot{background:var(--luna-glow)}

/* Sections that were neutral grey-beige now sit on Bone and its tint */
.craft-section{background:var(--surface)}
.craft-stage,.craft-tabs button{border-color:var(--line)}
::selection{background:var(--luna-glow);color:var(--luna-crypt)}

@media(max-width:700px){
 .wordmark{width:128px}
 .footer-top .wordmark{width:180px}
}