/* FENIX AURUM · faithful full-bleed preview of the approved paired visual. V3. */
:root{color-scheme:dark;font-family:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080910;color:#f5efe9}a{color:inherit}a:focus-visible{outline:2px solid #f0d094;outline-offset:5px}
body.imperium{--light:#304d71;--accent:#8bb5da;--bg:#06101a;--photo:url('/assets/imperium-approved-photo-v3.webp')}
body.venere{--light:#714567;--accent:#d0a4bb;--bg:#1a1019;--photo:url('/assets/venere-approved-photo-v3.webp')}
.stage{min-height:100svh;background:#090b10;position:relative;isolation:isolate;overflow:hidden;margin:auto;max-width:1440px;border-inline:1px solid rgba(221,188,125,.12)}
.stage::before{content:'';position:absolute;inset:0;z-index:-4;background:linear-gradient(90deg,var(--bg),transparent 55%,var(--bg)),radial-gradient(ellipse 72% 60% at 28% 46%,var(--light),transparent 75%),linear-gradient(180deg,#05070c,var(--bg) 56%,#04060a)}
.stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.12) 19%,transparent 38%,rgba(2,3,7,.04) 52%,rgba(2,3,8,.62) 76%,rgba(3,4,7,.95) 95%),linear-gradient(90deg,rgba(3,5,9,.12),transparent 50%,rgba(3,5,9,.25))}
.ambient{position:absolute;inset:19% -20% 6%;z-index:-3;background-image:var(--photo);background-size:cover;background-position:center;opacity:.23;filter:blur(18px) saturate(.85);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 67%,transparent 95%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 67%,transparent 95%)}
.portrait{position:absolute;top:26%;left:50%;width:min(104%,1000px);height:auto;z-index:-2;transform:translateX(-50%);filter:contrast(1.04) saturate(.93);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 79%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 79%,transparent 100%)}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px clamp(17px,4.5vw,48px);z-index:3}
.nav-small{font-size:.72rem;text-decoration:none;color:#e2c996;min-height:44px;display:flex;align-items:center;padding:4px 6px;white-space:nowrap}
.nav-small:hover{text-decoration:underline;text-underline-offset:5px}
.brand{font-weight:650;letter-spacing:.32em;color:#e5c38a;text-align:center;text-transform:uppercase;font-size:clamp(.68rem,1.2vw,.83rem);white-space:nowrap}
.hero-head{position:relative;z-index:2;text-align:center;padding:18px 12px 0;max-width:920px;margin:0 auto}
.gold-line{width:48px;height:1px;background:#d7b879;margin:13px auto 20px}
.hero-head h1{font:400 clamp(4.4rem,11.5vw,8.2rem)/.86 'Cormorant Garamond',Georgia,'Times New Roman',serif;color:#f9f3ed;text-shadow:0 4px 25px #0008;letter-spacing:-.042em;text-transform:uppercase;margin:0}
.motto{margin:20px 0 0;font-size:clamp(.73rem,1.7vw,.98rem);font-weight:500;letter-spacing:.24em;color:#ece8e8;text-transform:uppercase;line-height:1.5}
.tagline{margin:13px 0 0;font-size:clamp(.75rem,1.6vw,.91rem);font-weight:450;letter-spacing:.13em;text-transform:uppercase;color:#e4dbdc}
.bottom{position:absolute;z-index:2;bottom:clamp(25px,5svh,65px);left:50%;width:min(100% - 40px,980px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(36px,6svh,63px)}
.oracle-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:1px solid #d8bb80;border-radius:999px;padding:13px clamp(28px,8vw,64px);background:rgba(6,7,11,.9);text-decoration:none;color:#f7dba2;font-size:.81rem;letter-spacing:.13em;font-weight:700;gap:14px;box-shadow:0 12px 22px #0008;backdrop-filter:blur(10px);text-align:center}
.oracle-button:hover{background:#211b16;border-color:#f5d594}.oracle-button .arrow{font-size:1.1rem;font-weight:400}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:0}
.module{display:flex;align-items:center;flex-direction:column;text-align:center;gap:7px;min-width:0;padding:0 9px 3px;text-decoration:none;position:relative;color:#f6eee9;min-height:116px;justify-content:flex-start}
.module:not(:last-child):after{content:'';position:absolute;right:0;top:17px;bottom:12px;width:1px;background:linear-gradient(180deg,transparent,#b99b6b55,transparent)}
.module .digit{height:36px;min-width:36px;padding:0 6px;border:1px solid #b79763;border-radius:9px;display:grid;place-items:center;font-size:.9rem;letter-spacing:.03em;font-weight:650;color:#e3c48b;background:#080a0fa8}
.module .name{font:400 clamp(1.5rem,3.1vw,2.4rem)/1 'Cormorant Garamond',Georgia,serif;color:#f6f0e7;white-space:nowrap}
.module .desc{font-size:clamp(.68rem,1.6vw,.83rem);line-height:1.55;font-weight:450;color:#d7d3d5}
.module:hover .digit,.module:focus-visible .digit{background:#372b1b;border-color:#f5d595}.module:hover .name{color:#f6dca7}
.preserved{display:flex;align-items:center;justify-content:center;gap:24px;padding:14px 18px 30px;background:#08090e;color:#c6b9b0;font-size:.75rem;flex-wrap:wrap}
.preserved a{color:#d2b580;text-decoration:none;min-height:35px;display:flex;align-items:center}.preserved a:hover{text-decoration:underline}
.preview-note{text-align:center;color:#988f90;font-size:.65rem;letter-spacing:.065em;margin:0;padding:10px 15px 22px;background:#08090e}
@media(max-width:650px){.stage{min-height:820px;min-height:max(820px,100svh)}.topbar{padding:6px 11px}.nav-small{font-size:.67rem;padding:4px 2px}.brand{font-size:.61rem;letter-spacing:.2em}.hero-head{padding:21px 8px 0}.hero-head h1{font-size:clamp(3.8rem,14.1vw,6.2rem)}.gold-line{margin:10px auto 18px}.motto{font-size:.67rem;letter-spacing:.14em;margin-top:16px}.tagline{font-size:.7rem;letter-spacing:.08em;margin-top:8px}.portrait{width:153%;max-width:none;top:28%;}.ambient{inset:17% -28% 11%}.bottom{width:calc(100% - 16px);bottom:24px;gap:43px}.oracle-button{width:min(84%,360px);min-height:53px;font-size:.72rem;padding:11px 14px}.module{min-height:111px;padding-inline:3px;gap:8px}.module .digit{min-width:35px;height:35px}.module .name{font-size:clamp(1.26rem,5vw,1.63rem)}.module .desc{font-size:.68rem;max-width:120px}.module:not(:last-child):after{top:20px;bottom:10px}.preserved{gap:16px}}
@media(max-width:365px){.hero-head h1{font-size:3.65rem}.brand{font-size:.56rem}.nav-small{font-size:.59rem}.motto{letter-spacing:.07em}.module .name{font-size:1.18rem}.module .desc{font-size:.61rem}.bottom{gap:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
@media(min-width:651px){.portrait{top:clamp(310px,36%,375px)}}