/* EPOK / Frontier Productions — minimal teaser + curated concept gallery */
:root{color-scheme:dark;--night:#060a25;--gold:#ffcf72;--muted:#b9c3e3;--text:#ffecce;--line:rgba(246,183,97,.56);--violet:#401b83;--headline:'Cinzel','Palatino Linotype',Georgia,serif;--copy:system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;color:var(--text);background:linear-gradient(90deg,rgba(5,8,30,.79),rgba(5,9,32,.28) 50%,rgba(5,8,30,.79)),linear-gradient(180deg,rgba(4,8,26,.05) 0%,rgba(6,8,27,.4) 100%),url('/assets/stars.webp') repeat center top / 710px auto #060a25;font:16px/1.5 var(--copy)}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #8fe8ff;outline-offset:4px}
button,input{font:inherit}
.skip-link{position:absolute;z-index:100;top:-90px;left:12px;padding:12px 20px;background:white;color:#111}.skip-link:focus{top:12px}
.site-wrap{max-width:1470px;margin:0 auto;padding:24px clamp(14px,3vw,42px) 0}
.hero-poster{margin:0;overflow:hidden;border:1px solid #537cc2;border-radius:12px;box-shadow:0 0 0 2px #1d2b54,0 22px 80px rgba(2,2,24,.9),0 0 72px rgba(25,42,160,.25)}
.hero-poster img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
/* Main navigation sits above hero art on every page. */
/* Decorative metallic title font echoes the user's EPOK logo artwork. */
.emblem-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(10px,2.2vw,35px);margin:0 auto 18px;max-width:960px;padding:8px 0 17px;border-bottom:1px solid rgba(249,188,99,.48)}
.nav-link,.gallery-invite a,.return-link a{font:700 clamp(14px,1.7vw,21px)/1.3 var(--headline);text-decoration:none;letter-spacing:.105em;font-variant:small-caps;color:#ffd78a;text-shadow:1px 1px 0 #44204d,2px 2px 0 #210e35,0 0 18px rgba(125,60,252,.38)}
.nav-link{padding:8px 13px;border-radius:7px;border:1px solid transparent}
.nav-link.active{background:linear-gradient(135deg,#1d155b,#39146e 57%,#111745);border-color:#e3a44f;box-shadow:inset 0 0 0 1px #6735b7,0 0 14px rgba(167,65,220,.3)}
.nav-link:hover,.gallery-invite a:hover,.return-link a:hover{color:white;text-shadow:0 0 15px #ffd77c,0 0 24px #b56cff}
.nav-star{font-size:14px;color:#ffb958;text-shadow:0 0 12px #ffd194}
.main-premise{text-align:center;padding:40px 12px 19px;max-width:1100px;margin:0 auto}
.diamond-rule{font-size:15px;color:#f7c574;margin:0 auto 16px;width:100px;display:flex;align-items:center;justify-content:center;gap:10px}
.diamond-rule:before,.diamond-rule:after{content:'';height:1px;background:#b7833f;flex:1}
h1,h2,h3,p{margin-top:0}
.main-premise h1{margin:0 auto;font:700 clamp(25px,3vw,43px)/1.35 var(--headline);text-transform:uppercase;letter-spacing:.06em;color:#ffddab;text-shadow:0 2px 5px #170d35,0 0 22px rgba(136,70,236,.35)}
.main-premise h1 span{color:#ffbe79}
.pitch{font:500 clamp(21px,2.2vw,30px)/1.35 'Cormorant Garamond',Georgia,serif;margin:18px auto 0;max-width:950px;color:#f5e5cf}
.pitch strong{color:#ffd18a;font-weight:700;white-space:nowrap}
.quiet{font-size:13px;text-transform:uppercase;letter-spacing:.22em;color:#9eb9d5;margin:18px 0 0}
.updates-block{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:center;max-width:1060px;margin:42px auto 0;padding:28px clamp(22px,4vw,46px);background:linear-gradient(105deg,rgba(5,14,51,.94),rgba(18,18,67,.9));border:1px solid var(--line);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(101,65,131,.5),0 14px 58px rgba(0,0,20,.6)}
.eyebrow{font:700 11px/1.4 var(--headline);letter-spacing:.13em;color:#b89adb;margin-bottom:10px}
.updates-title h2{font:700 clamp(22px,2.2vw,31px)/1.25 var(--headline);color:#ffd58e;margin:0 0 10px}
.updates-title p:last-child{font-size:14px;color:#c5c7df;margin:0;max-width:430px}
.signup-form>label:not(.consent){display:block;font-size:12px;font-weight:700;color:#f9d69f;margin-bottom:9px}
.form-row{display:flex;gap:10px;align-items:stretch}
.form-row input{flex:1;min-width:0;width:100%;min-height:49px;background:#090e31;border:1px solid #ba8a6a;border-radius:7px;color:white;padding:12px 15px}
.form-row input::placeholder{color:#bdb3c7}
.form-row button{cursor:pointer;flex-shrink:0;min-height:49px;border:1px solid #ffcb72;border-radius:6px;padding:12px 19px;color:#ffdfad;background:linear-gradient(160deg,#136d4c,#074334 70%,#082720);box-shadow:inset 0 0 0 2px #2dbb7a;font:700 13px var(--headline);letter-spacing:.04em}
.form-row button:hover{filter:brightness(1.2)}
.form-row button span{color:#ffe5a5;font-size:11px}
.consent{display:flex;align-items:flex-start;gap:9px;margin-top:15px;font-size:12px;line-height:1.55;color:#d3d9e7;cursor:pointer}
.consent input{accent-color:#4cc394;width:16px;height:16px;flex:0 0 16px;margin:1px 0 0}
.small-print{font-size:11px;color:#acb8d0;margin:11px 0 0}.small-print a{color:#f3ca92}
.bot-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.gallery-invite{text-align:center;margin:38px auto 56px}.gallery-invite a{font-size:16px}
.footer{margin-top:34px;border-top:1px solid rgba(244,182,99,.28);padding:24px 0 38px;display:flex;gap:15px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#a9b7d2;font-size:12px}
.footer a{text-decoration:none}.footer a:hover{color:#ffd58d}.footer-links{display:flex;gap:21px;flex-wrap:wrap}
/* Concept page: clean centered EPOK logo, without character banner. */
.concept-header{margin:0 auto;position:relative;text-align:center;isolation:isolate;padding:24px 8px 12px;max-width:980px}

.concept-intro{position:relative;margin:0 auto;padding-bottom:4px}
.concept-logo{width:min(420px,64vw);height:auto;display:block;margin:0 auto 0;filter:drop-shadow(0 0 21px rgba(111,45,223,.52))}
.concept-intro h1{font:700 clamp(28px,3.3vw,46px)/1.15 var(--headline);letter-spacing:.15em;text-transform:uppercase;color:#ffdc9a;text-shadow:0 2px 0 #381034,0 0 24px #5830a9;margin:0 auto 3px}
.concept-intro p{font:italic 600 clamp(17px,1.7vw,25px)/1.3 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;color:#e7d5e5;margin:4px auto 0}

.art-section{margin:38px auto 0;max-width:1220px}
.section-rule{display:flex;gap:18px;align-items:center;justify-content:center;margin:15px auto 24px;color:#f3bc66}
.section-rule:before,.section-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,193,86,.65),transparent)}
.section-rule span{font-size:12px;text-shadow:0 0 14px #ffa55d}
.section-rule h2{font:700 clamp(20px,2.2vw,29px)/1.2 var(--headline);text-transform:uppercase;letter-spacing:.18em;color:#ffd78b;margin:0;white-space:nowrap}
.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.world-card{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:11px;aspect-ratio:2.03 / 1;min-height:220px;border:2px solid #c98b3c;box-shadow:inset 0 0 0 1px #42235a,0 13px 36px rgba(0,0,19,.67);text-decoration:none}
.world-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .24s ease}
.world-card:hover img{transform:scale(1.025)}
.world-card:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(180deg,transparent,rgba(1,5,25,.35) 45%,rgba(0,2,18,.94));pointer-events:none}
.world-legend{position:absolute;z-index:2;bottom:17px;left:18px;right:16px;display:flex;flex-direction:column;gap:4px}
.world-legend strong{font:700 clamp(15px,1.8vw,22px)/1.2 var(--headline);color:#ffe0a3;text-shadow:1px 2px 4px #000;letter-spacing:.065em}
.world-legend small{font:italic 600 clamp(13px,1.4vw,20px)/1.1 'Cormorant Garamond',Georgia,serif;color:#fff6e2;text-shadow:1px 2px 3px #000}
.creature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.creature-card{text-align:center;padding:12px 10px 14px;min-width:0;border:1px solid #c18a42;background:linear-gradient(180deg,rgba(13,24,66,.97),rgba(3,10,36,.97));box-shadow:inset 0 0 0 1px rgba(122,67,117,.35),0 9px 24px rgba(0,0,15,.48);border-radius:9px;display:flex;flex-direction:column;align-items:center}
.creature-frame{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;max-width:165px;margin:0 auto 11px;background:radial-gradient(ellipse at center,rgba(35,45,72,.5),rgba(15,25,47,.2) 70%,transparent)}
.creature-frame img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;image-rendering:pixelated}
.creature-card strong{font:700 clamp(12px,1vw,15px)/1.4 var(--headline);color:#ffd493;letter-spacing:.02em}
.creature-card small{color:#d5c7cd;font:italic 600 17px/1.15 'Cormorant Garamond',Georgia,serif;margin-top:5px}
.art-disclaimer{text-align:center;font-size:12px;color:#aab9d6;margin:21px auto 0}
.return-link{text-align:center;margin:48px 0 26px}
@media(max-width:1050px){.creature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.world-card{min-height:185px}.updates-block{grid-template-columns:1fr}.updates-title{max-width:650px}}
@media(max-width:650px){.site-wrap{padding:12px 10px 0}.hero-poster{border-radius:7px}.emblem-nav{margin:0 auto 14px;gap:3px;padding-bottom:12px}.nav-link{padding:8px 10px;font-size:12px;letter-spacing:0}.nav-star{font-size:10px}.main-premise{padding:28px 6px 12px}.main-premise h1{font-size:clamp(18px,5.4vw,27px)}.quiet{font-size:10px;letter-spacing:.09em}.pitch{font-size:clamp(20px,5.5vw,26px)}.updates-block{margin:30px auto 0;padding:20px 17px}.form-row{flex-direction:column}.form-row button{width:100%}.world-grid{grid-template-columns:1fr;gap:12px}.world-card{aspect-ratio:1.8/1;min-height:190px}.world-legend{bottom:12px;left:12px}.creature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.concept-intro{margin-top:0}.concept-logo{width:210px}.concept-intro h1{font-size:27px;letter-spacing:.075em}.concept-intro p{font-size:18px}.section-rule{gap:8px}.section-rule h2{font-size:17px;letter-spacing:.04em}.section-rule span{font-size:10px}.footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
.legal-card{max-width:850px;margin:70px auto 72px;padding:clamp(25px,5vw,58px);background:linear-gradient(160deg,rgba(11,20,60,.96),rgba(5,11,39,.95));border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 65px rgba(0,0,17,.6)}
.legal-card h1{font:700 clamp(27px,3vw,42px)/1.2 var(--headline);color:#ffd991;margin:0 0 28px}
.legal-card p{font-size:15px;line-height:1.75;color:#e3dfe8}
.legal-card a{color:#ffd79a}.legal-card .eyebrow{color:#c8a1ff}