/* Language-specific font stacks */
html[lang="zh"] body,
html[lang="zh"] .hero-eyebrow,
html[lang="zh"] .hero-author,
html[lang="zh"] .marquee-inner,
html[lang="zh"] .btn-primary,
html[lang="zh"] .btn-ghost,
html[lang="zh"] .btn-link{font-family:var(--font-ui-zh)}
html[lang="zh"] .hero-title,
html[lang="zh"] .hero-title-prefix,
html[lang="zh"] .hero-title-main,
html[lang="zh"] .hero-desc{font-family:var(--font-serif-zh)}
html[lang="zh"] .hero-title,
html[lang="zh"] .hero-title-prefix,
html[lang="zh"] .hero-title-main{font-style:normal;letter-spacing:.04em}
html[lang="zh"] .hero-eyebrow,
html[lang="zh"] .hero-author,
html[lang="zh"] .marquee-inner,
html[lang="zh"] .btn-primary,
html[lang="zh"] .btn-ghost,
html[lang="zh"] .btn-link{letter-spacing:.1em}
/* Tighten nav so longer EN/ES labels fit the pill */
html[lang="en"] .nav-links a,
html[lang="es"] .nav-links a{padding:7px 7px;font-size:0.72rem;letter-spacing:0.02em}
html[lang="en"] .nav-logo,
html[lang="es"] .nav-logo{font-size:0.74rem;letter-spacing:0.1em}
:root{
--void:#000000;--space:#050508;--deep:#0C0C14;--surface:#111118;--surface-light:#18181F;
--gold:#C4973A;--gold-bright:#E8B84B;--gold-glow:rgba(196,151,58,0.3);
--gold-dim:rgba(196,151,58,0.08);--gold-border:rgba(196,151,58,0.2);
--nebula:#8B5CF6;--nebula-bright:#A78BFA;
--nebula-glow:rgba(139,92,246,0.25);--nebula-dim:rgba(139,92,246,0.08);
--nebula-border:rgba(139,92,246,0.2);
--text-1:#F0ECE4;--text-2:#A29CAA;--text-3:#6F6A78;
--glass:rgba(255,255,255,0.04);--glass-border:rgba(255,255,255,0.08);
--radius-card:20px;--radius-btn:100px;--radius-sm:8px;--radius-md:12px;--radius-pill:9999px;
--gap:12px;--margin:clamp(1.5rem,5vw,5rem);
--font-ui:'Space Grotesk',sans-serif;
--font-serif:'Playfair Display',serif;
--font-mono:'Space Mono',monospace;
--font-ui-zh:'Noto Sans SC','Space Grotesk',sans-serif;
--font-serif-zh:'Noto Serif SC','Playfair Display',serif;
--font-mono-zh:'Noto Sans SC','Space Mono',monospace;
--text-xs:0.72rem;--text-sm:0.82rem;--text-base:1rem;--text-md:1.125rem;
--text-lg:1.5rem;--text-xl:2rem;--text-hero:clamp(1.92rem,4.24vw,4.56rem);
--ls-tight:0.04em;--ls-ui:0.08em;--ls-meta:0.2em;--ls-label:0.32em;
--lh-heading:1.15;--lh-body:1.85;--lh-ui:1.5;
--era-nav-top:20px;--era-nav-height:62px;--era-nav-gap:20px;
--era-nav-clear:calc(var(--era-nav-top) + var(--era-nav-height) + var(--era-nav-gap));
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:var(--era-nav-clear);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--void);color:var(--text-1);font-family:var(--font-serif);line-height:var(--lh-body);overflow-x:hidden}
::selection{background:var(--gold-dim);color:var(--gold-bright)}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-track{background:var(--void)}::-webkit-scrollbar-thumb{background:var(--gold-border);border-radius:2px}
/* COSMOS */
.cosmos-gradient{position:fixed;inset:0;z-index:-1;
background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(139,92,246,0.07) 0%,transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 80%,rgba(196,151,58,0.04) 0%,transparent 50%),
radial-gradient(ellipse 120% 100% at 50% 50%,#0C0C14 0%,#050508 40%,#000000 100%)}
.stars-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars-xs,.stars-sm,.stars-md,.stars-lg{position:absolute;inset:0}
/* Tiled starfield — fills viewport at any size */
.stars-xs::after,.stars-sm::after,.stars-md::after,.stars-lg::after{content:'';position:absolute;inset:0;background-color:transparent}
.stars-xs::after{
background-image:
radial-gradient(0.8px 0.8px at 13.6% 76.5%, rgba(220,210,230,0.42) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 69.3% 58.8%, rgba(255,240,200,0.32) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 38.6% 79.4%, rgba(220,210,230,0.44) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 11.0% 6.1%, rgba(255,255,255,0.36) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 76.1% 27.1%, rgba(220,210,230,0.31) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 59.0% 5.3%, rgba(220,210,230,0.43) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 74.6% 92.1%, rgba(255,255,255,0.35) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 14.6% 51.6%, rgba(220,210,230,0.34) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 17.4% 4.1%, rgba(200,180,255,0.34) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 77.0% 33.7%, rgba(255,240,200,0.44) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 93.0% 14.4%, rgba(220,210,230,0.58) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 43.6% 36.7%, rgba(255,255,255,0.55) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 62.7% 57.4%, rgba(220,210,230,0.41) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 22.0% 16.0%, rgba(220,210,230,0.49) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 9.2% 10.9%, rgba(255,255,255,0.52) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 65.8% 59.3%, rgba(220,210,230,0.51) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 69.8% 83.3%, rgba(220,210,230,0.55) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 63.0% 61.9%, rgba(255,255,255,0.40) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 50.2% 16.8%, rgba(220,210,230,0.54) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 54.9% 15.8%, rgba(220,210,230,0.60) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 7.6% 38.4%, rgba(200,180,255,0.33) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 85.8% 10.1%, rgba(200,180,255,0.55) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 43.5% 39.1%, rgba(255,240,200,0.46) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 8.3% 43.2%, rgba(200,180,255,0.48) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 54.3% 49.8%, rgba(255,240,200,0.44) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 5.2% 21.4%, rgba(220,210,230,0.56) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 74.5% 23.7%, rgba(255,240,200,0.39) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 30.5% 29.5%, rgba(220,210,230,0.54) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 62.6% 79.0%, rgba(220,210,230,0.52) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 65.4% 40.5%, rgba(220,210,230,0.57) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 51.1% 37.1%, rgba(220,210,230,0.31) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 8.7% 41.3%, rgba(255,255,255,0.55) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 59.4% 28.8%, rgba(255,240,200,0.37) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 67.3% 61.5%, rgba(255,240,200,0.42) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 7.9% 40.7%, rgba(200,180,255,0.46) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 15.9% 63.9%, rgba(220,210,230,0.42) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 57.4% 92.5%, rgba(220,210,230,0.30) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 97.3% 83.8%, rgba(220,210,230,0.46) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 59.2% 15.5%, rgba(220,210,230,0.47) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 10.9% 66.6%, rgba(255,255,255,0.44) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 26.1% 40.4%, rgba(220,210,230,0.43) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 56.2% 51.1%, rgba(220,210,230,0.58) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 63.4% 34.1%, rgba(255,255,255,0.38) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 36.4% 97.9%, rgba(255,255,255,0.42) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 29.3% 53.0%, rgba(200,180,255,0.35) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 65.0% 64.6%, rgba(255,240,200,0.44) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 33.7% 35.1%, rgba(200,180,255,0.51) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 12.2% 49.3%, rgba(200,180,255,0.51) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 75.8% 79.4%, rgba(255,240,200,0.38) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 20.7% 47.2%, rgba(200,180,255,0.36) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 76.7% 30.2%, rgba(255,240,200,0.58) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 18.6% 39.6%, rgba(255,255,255,0.38) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 44.7% 64.6%, rgba(220,210,230,0.38) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 60.4% 67.0%, rgba(220,210,230,0.31) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 35.6% 83.5%, rgba(220,210,230,0.50) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 73.1% 33.7%, rgba(200,180,255,0.47) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 7.8% 89.2%, rgba(220,210,230,0.48) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 83.7% 95.1%, rgba(220,210,230,0.55) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 32.2% 8.4%, rgba(255,255,255,0.37) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 39.6% 97.4%, rgba(255,240,200,0.44) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 55.4% 94.3%, rgba(220,210,230,0.46) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 58.3% 52.6%, rgba(200,180,255,0.33) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 11.4% 78.5%, rgba(200,180,255,0.36) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 47.9% 70.1%, rgba(255,255,255,0.41) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 32.2% 70.5%, rgba(200,180,255,0.41) 50%, transparent 100%),
radial-gradient(0.6px 0.6px at 3.3% 21.4%, rgba(255,255,255,0.41) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 26.2% 74.3%, rgba(255,255,255,0.42) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 78.5% 44.8%, rgba(220,210,230,0.50) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 47.5% 98.4%, rgba(255,255,255,0.39) 50%, transparent 100%),
radial-gradient(0.7px 0.7px at 27.2% 14.1%, rgba(220,210,230,0.51) 50%, transparent 100%);
background-size: 240px 240px;
background-repeat: repeat;
background-position: -30px -50px;
animation:twinkle-a 6.5s ease-in-out infinite alternate
}
.stars-sm::after{
background-image:
radial-gradient(1.0px 1.0px at 12.9% 96.3%, rgba(200,180,255,0.70) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 29.6% 48.7%, rgba(255,240,200,0.59) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 19.9% 66.9%, rgba(220,210,230,0.66) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 50.4% 11.7%, rgba(255,240,200,0.63) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 77.1% 10.0%, rgba(200,180,255,0.84) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 10.0% 88.5%, rgba(220,210,230,0.90) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 15.9% 55.9%, rgba(220,210,230,0.60) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 30.4% 36.6%, rgba(220,210,230,0.80) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 78.9% 50.2%, rgba(255,255,255,0.82) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 54.3% 94.0%, rgba(255,255,255,0.88) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 3.6% 94.3%, rgba(255,240,200,0.77) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 91.9% 98.2%, rgba(200,180,255,0.68) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 39.7% 81.2%, rgba(220,210,230,0.72) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 87.7% 62.5%, rgba(220,210,230,0.82) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 87.0% 74.0%, rgba(255,255,255,0.75) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 61.0% 90.4%, rgba(220,210,230,0.66) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 73.1% 96.4%, rgba(255,240,200,0.83) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 4.6% 23.4%, rgba(255,255,255,0.72) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 65.8% 92.3%, rgba(220,210,230,0.69) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 43.7% 2.8%, rgba(200,180,255,0.82) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 36.5% 72.7%, rgba(200,180,255,0.66) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 56.7% 30.4%, rgba(220,210,230,0.69) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 3.3% 86.7%, rgba(220,210,230,0.73) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 5.3% 8.2%, rgba(255,255,255,0.63) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 28.5% 18.4%, rgba(200,180,255,0.76) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 22.7% 95.8%, rgba(220,210,230,0.77) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 86.5% 87.3%, rgba(200,180,255,0.57) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 56.9% 62.1%, rgba(255,255,255,0.77) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 99.4% 92.7%, rgba(255,240,200,0.82) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 39.0% 10.2%, rgba(220,210,230,0.75) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 87.8% 99.3%, rgba(220,210,230,0.94) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 3.9% 73.7%, rgba(200,180,255,0.62) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 67.6% 53.8%, rgba(220,210,230,0.67) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 37.3% 92.6%, rgba(220,210,230,0.57) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 99.4% 18.0%, rgba(220,210,230,0.84) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 72.0% 51.5%, rgba(255,240,200,0.87) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 43.6% 63.3%, rgba(200,180,255,0.60) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 73.9% 3.7%, rgba(255,255,255,0.94) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 82.9% 72.8%, rgba(255,240,200,0.59) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 56.3% 65.9%, rgba(200,180,255,0.82) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 84.6% 80.4%, rgba(220,210,230,0.92) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 83.8% 24.3%, rgba(255,240,200,0.81) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 40.8% 63.8%, rgba(220,210,230,0.75) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 24.6% 31.0%, rgba(255,255,255,0.94) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 69.7% 27.7%, rgba(255,240,200,0.85) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 97.8% 98.2%, rgba(200,180,255,0.62) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 18.5% 19.3%, rgba(220,210,230,0.84) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 83.6% 73.2%, rgba(220,210,230,0.68) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 65.2% 68.5%, rgba(255,240,200,0.73) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 14.6% 74.8%, rgba(255,240,200,0.74) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 48.1% 58.6%, rgba(255,255,255,0.86) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 14.1% 9.7%, rgba(200,180,255,0.59) 50%, transparent 100%),
radial-gradient(0.9px 0.9px at 12.5% 23.4%, rgba(255,240,200,0.64) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 97.4% 14.0%, rgba(255,240,200,0.68) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 85.6% 2.5%, rgba(200,180,255,0.57) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 63.0% 13.0%, rgba(220,210,230,0.76) 50%, transparent 100%),
radial-gradient(1.1px 1.1px at 94.7% 55.9%, rgba(255,240,200,0.71) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 57.8% 48.5%, rgba(200,180,255,0.84) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 64.1% 26.7%, rgba(220,210,230,0.78) 50%, transparent 100%),
radial-gradient(1.0px 1.0px at 3.5% 45.8%, rgba(255,240,200,0.62) 50%, transparent 100%);
background-size: 230px 230px;
background-repeat: repeat;
animation:twinkle-a 5s ease-in-out infinite alternate
}
.stars-md::after{
background-image:
radial-gradient(1.4px 1.4px at 93.2% 80.4%, rgba(200,180,255,0.68) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 65.6% 31.9%, rgba(255,255,255,0.71) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 58.2% 49.5%, rgba(200,180,255,0.63) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 93.3% 1.6%, rgba(200,180,255,0.71) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 39.3% 72.8%, rgba(220,210,230,0.64) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 29.9% 74.9%, rgba(255,255,255,0.57) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 53.2% 71.2%, rgba(220,210,230,0.77) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 40.3% 24.4%, rgba(220,210,230,0.86) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 14.2% 6.0%, rgba(220,210,230,0.84) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 46.2% 93.2%, rgba(220,210,230,0.58) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 52.1% 37.3%, rgba(220,210,230,0.76) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 63.7% 91.0%, rgba(220,210,230,0.90) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 15.1% 64.2%, rgba(200,180,255,0.64) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 79.3% 35.0%, rgba(220,210,230,0.86) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 5.9% 96.1%, rgba(255,255,255,0.67) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 18.5% 60.0%, rgba(220,210,230,0.88) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 38.6% 40.1%, rgba(255,240,200,0.82) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 87.7% 97.7%, rgba(255,255,255,0.63) 50%, transparent 100%),
radial-gradient(1.7px 1.7px at 98.6% 51.5%, rgba(200,180,255,0.56) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 69.2% 23.1%, rgba(255,240,200,0.64) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 56.5% 75.4%, rgba(255,240,200,0.68) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 25.7% 36.0%, rgba(255,240,200,0.67) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 48.6% 76.0%, rgba(200,180,255,0.59) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 93.8% 5.0%, rgba(255,255,255,0.78) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 87.5% 91.4%, rgba(200,180,255,0.77) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 53.4% 43.5%, rgba(200,180,255,0.83) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 76.8% 16.1%, rgba(220,210,230,0.79) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 79.2% 77.9%, rgba(200,180,255,0.61) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 5.9% 53.4%, rgba(220,210,230,0.82) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 17.0% 88.1%, rgba(220,210,230,0.81) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 0.9% 84.7%, rgba(255,240,200,0.86) 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 68.3% 58.4%, rgba(255,255,255,0.64) 50%, transparent 100%);
background-size: 360px 360px;
background-repeat: repeat;
background-position: -60px -80px;
animation:twinkle-b 8s ease-in-out infinite alternate-reverse
}
.stars-lg::after{
background-image:
radial-gradient(2.0px 2.0px at 35.3% 89.7%, rgba(255,255,255,0.82) 50%, transparent 100%),
radial-gradient(2.1px 2.1px at 62.1% 72.4%, rgba(255,255,255,0.77) 50%, transparent 100%),
radial-gradient(2.3px 2.3px at 96.1% 1.9%, rgba(255,255,255,0.81) 50%, transparent 100%),
radial-gradient(2.2px 2.2px at 77.1% 73.5%, rgba(255,240,200,0.89) 50%, transparent 100%),
radial-gradient(2.2px 2.2px at 37.6% 45.8%, rgba(255,255,255,0.77) 50%, transparent 100%),
radial-gradient(2.3px 2.3px at 47.4% 89.9%, rgba(255,255,255,0.90) 50%, transparent 100%),
radial-gradient(2.2px 2.2px at 25.2% 39.9%, rgba(255,255,255,0.88) 50%, transparent 100%),
radial-gradient(2.4px 2.4px at 84.1% 33.3%, rgba(255,240,200,0.81) 50%, transparent 100%),
radial-gradient(2.4px 2.4px at 39.8% 75.4%, rgba(255,240,200,0.86) 50%, transparent 100%),
radial-gradient(2.3px 2.3px at 17.3% 46.2%, rgba(255,240,200,0.84) 50%, transparent 100%),
radial-gradient(2.1px 2.1px at 58.5% 6.5%, rgba(255,240,200,0.93) 50%, transparent 100%),
radial-gradient(2.1px 2.1px at 42.3% 28.9%, rgba(255,240,200,0.91) 50%, transparent 100%),
radial-gradient(2.2px 2.2px at 79.2% 79.7%, rgba(255,240,200,0.74) 50%, transparent 100%),
radial-gradient(2.4px 2.4px at 1.2% 37.0%, rgba(255,240,200,0.72) 50%, transparent 100%),
radial-gradient(2.0px 2.0px at 67.6% 16.0%, rgba(255,240,200,0.80) 50%, transparent 100%),
radial-gradient(1.9px 1.9px at 89.3% 8.7%, rgba(255,240,200,0.83) 50%, transparent 100%);
background-size: 540px 540px;
background-repeat: repeat;
background-position: -140px -110px;
animation:twinkle-c 4s ease-in-out infinite alternate
}
@keyframes twinkle-a{0%{opacity:.5}100%{opacity:1}}
@keyframes twinkle-b{0%{opacity:.3}100%{opacity:.9}}
@keyframes twinkle-c{0%{opacity:.4;filter:blur(0)}50%{opacity:1;filter:blur(.5px)}100%{opacity:.6;filter:blur(0)}}
/* NAV */
#nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);
width:min(1180px,calc(100vw - 32px));height:62px;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;gap:8px;
background:rgba(5,5,8,0.85);border:1px solid rgba(255,255,255,0.10);
border-radius:var(--radius-pill);backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
box-shadow:0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.08);
z-index:1000;transition:box-shadow .4s,background .4s}
#nav.scrolled{background:rgba(5,5,8,.97);box-shadow:0 12px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-logo{font-family:var(--font-ui);font-size:0.82rem;font-weight:600;
letter-spacing:0.12em;color:var(--gold);text-transform:uppercase;
white-space:nowrap;cursor:pointer;text-decoration:none;flex-shrink:0;
display:flex;align-items:center;gap:7px}
.nav-logo-mark{display:inline-flex;width:20px;height:20px;align-items:center;
justify-content:center;border:1px solid var(--gold-border);border-radius:50%;
font-size:var(--text-xs);color:var(--gold);flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:0;justify-self:center;flex-wrap:nowrap}
.nav-links a{font-family:var(--font-ui);font-size:0.71rem;font-weight:500;
letter-spacing:0.02em;color:var(--text-2);text-decoration:none;cursor:pointer;
white-space:nowrap;padding:7px 8px;border-radius:var(--radius-sm);transition:color .25s,background .25s}
.nav-links a:hover{color:var(--text-1);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--gold);font-weight:600}
.nav-langs{display:flex;gap:4px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:8px;justify-self:end;flex-shrink:0}
.nav-logo{justify-self:start}
.nav-langs button{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);
background:none;border:none;cursor:pointer;padding:3px 5px;letter-spacing:var(--ls-tight);transition:color .2s}
.nav-langs button:hover,.nav-langs button.active{color:var(--gold);background:rgba(255,255,255,.05);border-radius:var(--radius-md)}
.nav-cta{background:var(--gold);color:#000;border:none;border-radius:var(--radius-btn);
padding:8px 14px;font-family:var(--font-ui);font-weight:700;font-size:0.66rem;
letter-spacing:var(--ls-ui);text-transform:uppercase;cursor:pointer;flex-shrink:0;
white-space:nowrap;transition:background .3s,transform .2s,box-shadow .3s}
.nav-cta:hover{background:var(--gold-bright);transform:translateY(-1px);box-shadow:0 4px 16px rgba(196,151,58,.4)}
/* Narrow viewports: shrink menu so it fits and stays centered */
@media (max-width:1200px){
#nav{padding:0 12px;gap:6px}
.nav-links a{font-size:0.63rem;padding:6px 5px;letter-spacing:0}
html[lang="en"] .nav-links a,
html[lang="es"] .nav-links a{font-size:0.62rem;padding:6px 5px;letter-spacing:0}
.nav-logo{font-size:0.7rem;gap:5px}
html[lang="en"] .nav-logo,
html[lang="es"] .nav-logo{font-size:0.66rem}
.nav-logo-mark{width:18px;height:18px}
.nav-cta{padding:7px 11px;font-size:0.6rem}
.nav-langs{gap:2px}
.nav-langs button{padding:3px 4px}
.nav-right{gap:6px}
}
@media (max-width:980px){
.nav-links a{font-size:0.56rem;padding:5px 4px}
html[lang="en"] .nav-links a,
html[lang="es"] .nav-links a{font-size:0.55rem;padding:5px 4px}
.nav-logo span[data-i18n]{display:none}
.nav-cta{padding:6px 9px}
}
/* ══════════ MOBILE BURGER MENU ══════════ */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text-1);margin:0 auto;border-radius:2px;
transition:transform .3s,opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobileMenu{position:fixed;inset:0;z-index:1200;background:rgba(5,5,8,.97);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
display:flex;flex-direction:column;padding:90px 32px 40px;opacity:0;pointer-events:none;
transform:translateY(-12px);transition:opacity .35s,transform .35s}
#mobileMenu.open{opacity:1;pointer-events:auto;transform:none}
.mm-close{position:absolute;top:24px;right:24px;width:42px;height:42px;background:none;border:none;
color:var(--text-1);font-size:26px;cursor:pointer;line-height:1}
.mm-links{display:flex;flex-direction:column;gap:4px}
.mm-links a{font-family:var(--font-ui);font-size:1.35rem;font-weight:600;color:var(--text-1);
text-decoration:none;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;
display:flex;justify-content:space-between;align-items:center;transition:color .2s}
.mm-links a:hover,.mm-links a.active{color:var(--gold)}
.mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:18px}
.mm-langs{display:flex;gap:10px}
.mm-langs button{flex:1;padding:11px;background:var(--surface);border:1px solid var(--glass-border);
border-radius:var(--radius-sm);color:var(--text-2);font-family:var(--font-mono);font-size:var(--text-sm);
font-weight:600;cursor:pointer;transition:all .2s}
.mm-langs button.active{color:var(--gold);border-color:var(--gold)}
.mm-cta{background:var(--gold);color:#000;border:none;padding:15px;border-radius:var(--radius-btn);
font-family:var(--font-ui);font-weight:700;letter-spacing:var(--ls-ui);text-transform:uppercase;cursor:pointer;font-size:var(--text-sm)}
@media (max-width:760px){
.nav-links,.nav-langs,.nav-cta{display:none}
#nav{grid-template-columns:1fr auto;padding:0 16px;width:calc(100vw - 24px);max-width:100%}
.nav-burger{display:flex}
.nav-logo{justify-self:start;font-size:0.72rem;letter-spacing:0.06em;white-space:normal;line-height:1.25;max-width:calc(100vw - 110px)}
.nav-logo span[data-i18n]{display:inline}
}
/* ══════════ CONTACT PAGE ══════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;max-width:1040px;margin:0 auto}
.contact-info-block{display:flex;flex-direction:column;gap:26px}
.contact-line{display:flex;flex-direction:column;gap:5px}
.contact-line .ci-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold);opacity:.85}
.contact-line .ci-val{font-family:var(--font-serif);font-size:var(--text-md);color:var(--text-1)}
.contact-line a.ci-val{text-decoration:none;transition:color .2s}
.contact-line a.ci-val:hover{color:var(--gold)}
.contact-socials{display:flex;gap:10px;margin-top:4px}
.contact-socials a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--glass-border);border-radius:50%;color:var(--text-2);font-family:var(--font-mono);
font-size:var(--text-xs);font-weight:600;text-decoration:none;cursor:pointer;transition:all .25s}
.contact-socials a:hover{color:var(--gold);border-color:var(--gold-border)}
.contact-form{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:36px}
.form-textarea{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
padding:12px 16px;font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);
outline:none;transition:border-color .3s;width:100%;min-height:130px;resize:vertical;line-height:1.6}
.form-textarea:focus,.form-input:focus{border-color:var(--gold-border)}
.form-note{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3);margin-top:14px;line-height:1.6}
.form-consents{display:flex;flex-direction:column;gap:12px;margin:20px 0 8px;text-align:left}
.form-consent{display:flex;align-items:flex-start;gap:10px;text-align:left}
.form-consent-text{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-2);line-height:1.55;cursor:pointer;margin:0}
.form-consent input[type=checkbox]{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold,#C4973A);cursor:pointer}
.form-consent-link{color:var(--gold-bright,#E8B84B);text-decoration:none;border-bottom:1px solid rgba(232,184,75,.35);transition:opacity .2s}
.form-consent-link:hover{opacity:.85}
.form-consent.is-invalid{color:#e06a6a}
.form-consent.is-invalid .form-consent-text{color:#e06a6a}
.form-consent.is-invalid input{outline:2px solid #e06a6a;outline-offset:2px}
.form-success{background:rgba(31,138,91,.12);border:1px solid rgba(31,138,91,.4);border-radius:var(--radius-sm);
padding:14px 18px;font-family:var(--font-serif);font-size:var(--text-base);color:#5fd6a0;margin-top:16px;display:none}
.form-success.show{display:block}
/* ── FAB: личный кабинет (авторизованный подписчик) ── */
.era-account-fab{
position:fixed;
right:max(18px, env(safe-area-inset-right));
bottom:max(22px, env(safe-area-inset-bottom));
z-index:950;
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px 12px 14px;
border:1px solid rgba(196,151,58,.35);
border-radius:var(--radius-pill, 999px);
background:rgba(5,5,8,.88);
box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
cursor:pointer;
transition:opacity .25s, transform .25s, border-color .25s, box-shadow .25s;
font-family:var(--font-mono);
font-size:var(--text-xs, .72rem);
font-weight:500;
letter-spacing:var(--ls-ui, .08em);
text-transform:uppercase;
color:var(--text-1, #F0ECE4);
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.era-account-fab[hidden]{display:none!important}
.era-account-fab:hover{
border-color:var(--gold-border, rgba(196,151,58,.55));
box-shadow:0 16px 48px rgba(0,0,0,.55), 0 0 24px rgba(196,151,58,.12);
transform:translateY(-2px);
}
.era-account-fab:active{transform:translateY(0)}
.era-account-fab-mark{
color:var(--gold-bright, #E8B84B);
font-size:1rem;
line-height:1;
flex-shrink:0;
}
.era-account-fab-text{white-space:nowrap}
@media (max-width:520px){
.era-account-fab-text{display:none}
.era-account-fab{padding:14px;border-radius:50%;width:48px;height:48px;justify-content:center}
}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;gap:36px}}
/* ══════════ ADMIN PANEL ══════════ */
.admin-shell{max-width:1100px;margin:0 auto}
.admin-login{max-width:420px;margin:40px auto;background:var(--surface);border:1px solid var(--glass-border);
border-radius:var(--radius-card);padding:40px}
.admin-login .al-icon{font-size:30px;text-align:center;color:var(--gold);margin-bottom:8px}
.admin-login h2{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:700;text-align:center;color:var(--text-1);margin-bottom:6px}
.admin-login .al-sub{font-family:var(--font-mono);font-size:var(--text-xs);text-align:center;color:var(--text-3);margin-bottom:26px;letter-spacing:var(--ls-meta)}
.admin-err{color:#e06a6a;font-family:var(--font-mono);font-size:var(--text-xs);margin-top:12px;min-height:16px}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--glass-border)}
.admin-who{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-2)}
.admin-who b{color:var(--gold);font-weight:600}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.admin-tab{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-ui);
text-transform:uppercase;color:var(--text-2);background:var(--surface);border:1px solid var(--glass-border);
border-radius:var(--radius-btn);padding:9px 16px;cursor:pointer;transition:all .25s}
.admin-tab.active{color:var(--gold);border-color:var(--gold)}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
.stat-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:22px}
.stat-num{font-family:var(--font-ui);font-size:2rem;font-weight:700;color:var(--gold);line-height:1}
.stat-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);text-transform:uppercase;letter-spacing:var(--ls-meta);margin-top:8px}
.admin-pane{display:none}
.admin-pane.active{display:block}
.admin-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:var(--text-sm)}
.admin-table th{text-align:left;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
letter-spacing:var(--ls-meta);color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--glass-border)}
.admin-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-1);vertical-align:top}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.admin-empty{text-align:center;color:var(--text-3);font-family:var(--font-mono);font-size:var(--text-sm);padding:50px 0}
.admin-actions{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.admin-mini{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-ui);
text-transform:uppercase;color:var(--text-2);background:none;border:1px solid var(--glass-border);
border-radius:var(--radius-sm);padding:7px 13px;cursor:pointer;transition:all .2s}
.admin-mini:hover{color:var(--gold);border-color:var(--gold-border)}
.admin-mini.danger:hover{color:#e06a6a;border-color:rgba(224,106,106,.4)}
.row-del{color:var(--text-3);cursor:pointer;font-size:var(--text-md);transition:color .2s}
.row-del:hover{color:#e06a6a}
.badge-new{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--gold);background:rgba(196,151,58,.14);border:1px solid var(--gold-border);
border-radius:20px;padding:2px 8px;vertical-align:middle}
.admin-accounts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acct-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:22px}
.acct-role{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gold);text-transform:uppercase;letter-spacing:var(--ls-meta);margin-bottom:8px}
.acct-login{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;color:var(--text-1)}
.acct-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3);margin-top:10px;line-height:1.7}
.admin-note{background:rgba(196,151,58,.07);border:1px solid var(--gold-border);border-radius:var(--radius-sm);
padding:18px 20px;font-family:var(--font-serif);font-size:var(--text-sm);color:var(--text-2);line-height:1.7;margin-top:24px}
@media (max-width:880px){.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-accounts{grid-template-columns:1fr}}
@media (max-width:600px){.admin-table thead{display:none}
.admin-table td{display:block;border:none;padding:4px 0}
.admin-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--glass-border)}}
/* PAGE SECTIONS */
#pw{position:relative;z-index:1;width:100%;max-width:100%;overflow-x:clip}
#era-page{position:relative;z-index:1;width:100%;max-width:100%;overflow-x:clip;opacity:0;transition:opacity .9s ease}
#era-page.revealed{opacity:1}
body.era-static-page #intro-overlay{display:none!important}
.ps{display:none;max-width:100%}.ps.active{display:block}
#s-chapter.ps.active{display:block}
/* Внутренние страницы: заголовок ниже фиксированного меню */
.ps:not(#s-home):not(#s-chapter){padding-top:var(--era-nav-clear)}
/* Заголовок раздела сразу под меню: зазор = --era-nav-gap (20px), без лишнего padding у page-wrap */
.ps:not(#s-home):not(#s-chapter) .page-wrap{padding-top:0}
.ps:not(#s-home):not(#s-chapter) .page-hero-centered{padding-top:0;margin-top:0}
/* ══════════════════════════════════════
SCROLL REVEAL UPGRADES
══════════════════════════════════════ */
.au{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.au.vis{opacity:1;transform:none}
/* Stagger for grid children */
.bento-grid > *:nth-child(1){transition-delay:.05s}
.bento-grid > *:nth-child(2){transition-delay:.15s}
.bento-right > *:nth-child(1){transition-delay:.1s}
.bento-right > *:nth-child(2){transition-delay:.2s}
.bento-right > *:nth-child(3){transition-delay:.3s}
.char-grid > *:nth-child(1){transition-delay:.05s}
.char-grid > *:nth-child(2){transition-delay:.12s}
.char-grid > *:nth-child(3){transition-delay:.19s}
.char-grid > *:nth-child(4){transition-delay:.26s}
.char-grid > *:nth-child(5){transition-delay:.33s}
.char-grid > *:nth-child(6){transition-delay:.40s}
.vol-card:nth-child(1){transition-delay:.05s}
.vol-card:nth-child(2){transition-delay:.12s}
.vol-card:nth-child(3){transition-delay:.19s}
.vol-card:nth-child(4){transition-delay:.26s}
.vol-card:nth-child(5){transition-delay:.33s}
.pre-card:nth-child(1){transition-delay:.05s}
.pre-card:nth-child(2){transition-delay:.15s}
.pre-card:nth-child(3){transition-delay:.25s}
.blog-card:nth-child(1){transition-delay:.05s}
.blog-card:nth-child(2){transition-delay:.15s}
.blog-card:nth-child(3){transition-delay:.25s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* BUTTONS */
.btn-primary{background:var(--gold);color:#000;border:none;padding:14px 32px;
border-radius:var(--radius-btn);font-family:var(--font-ui);font-weight:700;
font-size:var(--text-sm);letter-spacing:var(--ls-ui);text-transform:uppercase;cursor:pointer;
transition:background .3s,transform .2s,box-shadow .3s}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,151,58,.35)}
.btn-ghost{background:transparent;color:var(--text-1);border:1px solid rgba(255,255,255,.28);
padding:14px 32px;border-radius:var(--radius-btn);font-family:var(--font-ui);
font-weight:500;font-size:var(--text-sm);letter-spacing:var(--ls-ui);text-transform:uppercase;cursor:pointer;transition:all .3s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-link{color:var(--gold);background:none;border:none;font-family:var(--font-ui);
font-weight:500;font-size:var(--text-sm);letter-spacing:var(--ls-ui);text-transform:uppercase;
cursor:pointer;padding:14px 8px;transition:color .3s;
display:inline-flex;align-items:center;gap:6px}
.btn-link:hover{color:var(--gold-bright)}
.btn-full{width:100%;text-align:center;justify-content:center}
/* GLASS CARD */
.glass-card{background:var(--glass);border:1px solid var(--glass-border);
border-radius:var(--radius-card);backdrop-filter:blur(16px) saturate(1.5);
-webkit-backdrop-filter:blur(16px) saturate(1.5);
transition:transform .35s ease,border-color .3s,box-shadow .3s}
.glass-card:hover{transform:translateY(-5px) scale(1.01);border-color:var(--gold-border);
box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(196,151,58,.1),0 0 40px rgba(196,151,58,.06)}
.glass-card-nebula{background:rgba(139,92,246,.06);border-color:var(--nebula-border)}
.glass-card-nebula:hover{border-color:var(--nebula);box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.12)}
/* MARQUEE */
.marquee-strip{position:relative;height:60px;display:flex;
align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.04);background:var(--void);z-index:2}
.marquee-inner{display:flex;gap:64px;width:max-content;
animation:marquee 38s linear infinite;
font-family:var(--font-mono);font-size:var(--text-base);font-weight:500;letter-spacing:var(--ls-ui);
color:var(--text-1);text-transform:uppercase;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-dot{color:var(--gold);opacity:.85;margin:0 .35em;font-size:1.1em}
/* ══════════════════════════════════════
SECTION: HOME HERO
══════════════════════════════════════ */
.hero-section{position:relative;min-height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;
padding:76px clamp(1rem,4vw,4rem) 60px;overflow:visible}
.hero-variant{display:none}.hero-variant.active{display:flex;flex-direction:column;align-items:center;width:100%;overflow:visible}
/* Black hole */
.bh-wrap{position:absolute;top:-160px;left:50%;transform:translateX(-50%);
width:640px;height:640px;pointer-events:none}
.bh-glow{position:absolute;inset:4%;border-radius:50%;
box-shadow:
0 0 40px 10px rgba(255,200,80,.18),
0 0 80px 25px rgba(196,151,58,.12),
0 0 140px 50px rgba(139,92,246,.1),
0 0 240px 80px rgba(196,151,58,.06);
animation:bh-pulse 5s ease-in-out infinite alternate;z-index:0}
.bh-disk-outer{position:absolute;inset:8%;border-radius:50%;
background:conic-gradient(from 180deg,
rgba(139,92,246,.28) 0%,rgba(196,151,58,.2) 25%,
rgba(255,180,50,.15) 45%,rgba(139,92,246,.3) 65%,
rgba(196,151,58,.18) 85%,rgba(139,92,246,.28) 100%);
-webkit-mask:radial-gradient(circle,transparent 44%,black 49%,black 63%,transparent 66%);
mask:radial-gradient(circle,transparent 44%,black 49%,black 63%,transparent 66%);
animation:bh-rotate 20s linear infinite reverse;filter:blur(8px);z-index:1}
.bh-disk{position:absolute;inset:18%;border-radius:50%;
background:conic-gradient(from 0deg,
rgba(255,200,80,.98) 0%,rgba(232,184,75,.7) 12%,
rgba(196,151,58,.9) 22%,rgba(139,92,246,.6) 35%,
rgba(167,139,250,.85) 48%,rgba(100,60,200,.4) 58%,
rgba(196,151,58,.95) 70%,rgba(255,220,100,.8) 82%,
rgba(255,200,80,.98) 100%);
-webkit-mask:radial-gradient(circle,transparent 52%,black 57%,black 100%);
mask:radial-gradient(circle,transparent 52%,black 57%,black 100%);
animation:bh-rotate 8s linear infinite;filter:blur(2px);z-index:2}
.bh-core{position:absolute;inset:34%;border-radius:50%;
background:radial-gradient(circle,#000 50%,#050508 100%);
box-shadow:0 0 80px 40px rgba(0,0,0,1);z-index:3}
.bh-photon-ring{position:absolute;inset:26%;border-radius:50%;
border:2px solid rgba(255,220,100,.45);
box-shadow:0 0 18px 4px rgba(255,200,80,.3),0 0 40px 8px rgba(196,151,58,.15),inset 0 0 14px 3px rgba(255,200,80,.2);
animation:bh-pulse 2.5s ease-in-out infinite alternate;z-index:4}
.bh-lensing{position:absolute;inset:20%;border-radius:50%;
border:1px solid rgba(255,200,80,.08);
box-shadow:0 0 30px 12px rgba(255,180,50,.06);
animation:bh-pulse 7s ease-in-out infinite alternate-reverse;z-index:0}
@keyframes bh-rotate{to{transform:rotate(360deg)}}
@keyframes bh-pulse{0%{opacity:.7;transform:scale(.97)}100%{opacity:1;transform:scale(1.03)}}
/* BH overlay — full width fade, no hard edges */
#hero-bh-overlay{position:absolute;inset:0;pointer-events:none;z-index:1;
background:
radial-gradient(ellipse 60% 55% at 50% 0%, transparent 0%, transparent 30%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.92) 72%, #000 90%),
radial-gradient(ellipse 100% 40% at 50% 0%, rgba(0,0,0,.5) 0%, transparent 60%)}
/* Starfield nebula */
.sf-nebula-1{position:absolute;top:-10%;left:-20%;width:80%;height:80%;
background:radial-gradient(ellipse at 40% 40%,rgba(139,92,246,.12) 0%,rgba(139,92,246,.04) 40%,transparent 70%);
pointer-events:none;animation:nebula-drift-1 18s ease-in-out infinite alternate}
.sf-nebula-2{position:absolute;bottom:0;right:-10%;width:70%;height:70%;
background:radial-gradient(ellipse at 60% 60%,rgba(196,151,58,.08) 0%,rgba(196,151,58,.02) 40%,transparent 70%);
pointer-events:none;animation:nebula-drift-2 24s ease-in-out infinite alternate}
.sf-nebula-3{position:absolute;top:20%;left:30%;width:60%;height:60%;
background:radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.06) 0%,rgba(200,150,255,.03) 30%,transparent 70%);
pointer-events:none;animation:nebula-drift-1 30s ease-in-out infinite alternate-reverse}
@keyframes nebula-drift-1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,20px) scale(1.05)}}
@keyframes nebula-drift-2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-20px,-30px) scale(1.08)}}
.shooting-star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;opacity:0}
.shooting-star::after{content:'';position:absolute;top:0;right:2px;width:80px;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));transform:translateX(100%)}
.ss-1{top:15%;left:10%;animation:shoot 8s ease-in 3s infinite}
.ss-2{top:30%;left:60%;animation:shoot 6s ease-in 7s infinite}
.ss-3{top:8%;left:40%;animation:shoot 10s ease-in 1s infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-25deg)}5%{opacity:1}20%{opacity:0;transform:translate(200px,100px) rotate(-25deg)}100%{opacity:0;transform:translate(200px,100px) rotate(-25deg)}}
.constellation{position:absolute;inset:0;pointer-events:none;opacity:.12}
.sf-horizon{position:absolute;bottom:38px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(139,92,246,.15) 20%,rgba(196,151,58,.2) 50%,rgba(139,92,246,.15) 80%,transparent 100%)}
/* Hero content */
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero-content-bh{padding-top:0}
.hero-content-sf{padding-top:0}
.hero-eyebrow{font-family:var(--font-mono);font-size:var(--text-md);font-weight:700;letter-spacing:var(--ls-label);color:var(--nebula-bright);text-transform:uppercase;margin-top:-44px;margin-bottom:1.6rem;opacity:0;animation:fadeUp 1s ease .2s forwards}
.hero-eyebrow span{opacity:.5;margin:0 .6em}
.hero-mark{color:var(--gold);margin:0 .7em;font-size:.95em;opacity:.85}
.hero-series{font-family:var(--font-mono);font-weight:500;font-size:var(--text-xs);letter-spacing:var(--ls-label);color:var(--text-1);opacity:.85;text-transform:uppercase;line-height:var(--lh-ui);margin-bottom:1.4rem;opacity:0;animation:fadeUp 1s ease .4s forwards}
.hero-title{font-family:var(--font-serif);font-style:italic;font-weight:700;
/* Desktop: как на референсе — ~78–84px на широких экранах */
font-size:clamp(2.1rem,5.4vw,5.25rem);line-height:1.22;
background:linear-gradient(135deg,#E8B84B 0%,#C4973A 55%,#E8B84B 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
margin:1.1rem 0 .2em;padding:0.1em 0.15em 0.15em;max-width:1200px;width:100%;
display:flex;flex-direction:column;gap:.28em;align-items:center;
opacity:0;animation:fadeUp 1.1s ease .55s forwards;text-wrap:balance}
.hero-title.era-page-title{font-family:var(--font-serif);font-style:italic;font-size:clamp(2.1rem,5.4vw,5.25rem);
letter-spacing:-.005em;text-transform:none;color:transparent}
.hero-title-prefix{font-family:var(--font-serif);font-style:italic;font-weight:700;
font-size:1em;letter-spacing:-.005em;line-height:var(--lh-heading);
text-transform:none;
background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
display:block;white-space:nowrap}
.hero-title-prefix .hero-mark{-webkit-text-fill-color:#E8B84B;margin:0 .4em;font-size:.5em;opacity:.9;vertical-align:.12em;line-height:1}
.hero-title-main{font-family:var(--font-serif);font-style:italic;font-weight:700;
font-size:1em;letter-spacing:-.005em;line-height:var(--lh-heading);text-transform:none;
background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
display:block;white-space:nowrap}
.hero-title .hero-mark{-webkit-text-fill-color:#E8B84B;margin:0 .5em;font-size:.9em;opacity:.95}
.hero-beyond{font-family:var(--font-ui);font-weight:300;font-size:var(--text-md);letter-spacing:var(--ls-tight);color:var(--text-2);margin-bottom:1.2rem;opacity:0;animation:fadeUp 1s ease .7s forwards}
.hero-author{font-family:var(--font-mono);font-size:var(--text-md);font-weight:700;letter-spacing:var(--ls-label);color:var(--nebula-bright);text-transform:uppercase;margin-top:2.6rem;opacity:0;animation:fadeUp 1s ease .82s forwards}
.hero-author-prefix{display:block;font-size:.6em;font-weight:500;letter-spacing:var(--ls-label);color:var(--text-2);margin-bottom:.5em;opacity:.7}
.hero-divider{width:80px;height:1px;background:var(--gold);opacity:0;margin:1.6rem auto;animation:fadeIn 1s ease .95s forwards}
.hero-desc{font-family:var(--font-serif);font-style:italic;font-size:var(--text-base);color:var(--text-2);max-width:480px;line-height:var(--lh-body);opacity:0;animation:fadeUp 1s ease 1.05s forwards}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:2.2rem;opacity:0;animation:fadeUp 1s ease 1.2s forwards}
/* Variant switcher */
.variant-switcher{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:999;
display:flex;align-items:center;gap:8px;background:rgba(5,5,8,.92);
border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:6px 8px;backdrop-filter:blur(20px)}
.vs-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--text-2);text-transform:uppercase;padding:0 8px}
.vs-btn{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-ui);
padding:8px 18px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:all .3s;text-transform:uppercase}
.vs-btn.active{background:var(--gold);color:#000;border-color:var(--gold)}
.vs-btn:not(.active){background:none;color:var(--text-2);border-color:var(--glass-border)}
.vs-btn:not(.active):hover{color:var(--text-1);border-color:rgba(255,255,255,.2)}
/* ══════════════════════════════════════
SECTION: BENTO — ТЕКУЩИЙ ТОМ
══════════════════════════════════════ */
.bento-section{padding:80px var(--margin);position:relative;z-index:1}
.section-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold-border);text-transform:uppercase;margin-bottom:2rem;opacity:.85}
/* BENTO — новый layout: 2 большие колонки */
.bento-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:var(--gap);max-width:1400px;margin:0 auto;align-items:start}
/* Левая колонка: обложка */
.bento-cover{background:var(--gold-dim);border:1px solid var(--gold-border);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}
.bento-cover-art{width:100%;aspect-ratio:2/3;max-width:300px;border-radius:var(--radius-card);position:relative;overflow:hidden;
background:linear-gradient(160deg,#1A1400,#0A0800,#1A1200);border:1px solid var(--gold-border);
box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 50px rgba(196,151,58,.18);margin-bottom:20px}
.cover-roman{font-family:var(--font-ui);font-style:italic;font-size:9.5rem;font-weight:800;
background:linear-gradient(135deg,rgba(232,184,75,.42),rgba(196,151,58,.22) 50%,rgba(232,184,75,.38));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 0 60px rgba(196,151,58,.25);
position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);line-height:var(--lh-heading)}
.cover-glow{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 60%)}
.cover-text{position:absolute;bottom:14px;left:12px;right:12px;text-align:center}
.cover-text-name{font-family:var(--font-ui);font-style:italic;font-size:var(--text-base);font-weight:700;color:var(--gold);letter-spacing:var(--ls-tight);line-height:var(--lh-heading)}
.cover-text-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta);margin-top:5px}
.cover-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--text-xs);
letter-spacing:var(--ls-meta);background:rgba(196,151,58,.15);color:var(--gold-border);
border:1px solid var(--gold-border);border-radius:var(--radius-pill);padding:4px 10px;margin-top:4px}
.cover-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:.4}50%{opacity:1}}
/* Правая колонка: вложенный grid 2×2 */
.bento-right{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--gap)}
.bento-desc{grid-column:1/3;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:32px;backdrop-filter:blur(16px)}
.bento-desc-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin-bottom:16px;opacity:.85}
.bento-desc-title{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:700;color:var(--text-1);margin-bottom:6px;line-height:var(--lh-heading)}
.bento-desc-dates{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta);margin-bottom:20px}
.bento-desc-line{width:40px;height:1px;background:var(--gold-border);margin-bottom:20px}
.bento-desc-text{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);opacity:.85;line-height:var(--lh-body);margin-bottom:20px}
.pull-quote{border-left:3px solid var(--gold-border);padding-left:18px;margin-top:16px}
.pull-quote p{font-family:var(--font-serif);font-style:italic;font-size:var(--text-base);color:var(--text-1);line-height:var(--lh-body)}
.pull-quote cite{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta);margin-top:8px;display:block}
.bento-quote{grid-column:1/2;background:var(--nebula-dim);border:1px solid var(--nebula-border);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;justify-content:center}
.bento-quote-mark{font-family:var(--font-serif);font-size:3.5rem;line-height:.8;color:rgba(139,92,246,.3);margin-bottom:12px}
.bento-quote-text{font-family:var(--font-serif);font-style:italic;font-size:var(--text-base);color:var(--text-1);line-height:var(--lh-body)}
.bento-quote-attr{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--nebula-bright);letter-spacing:var(--ls-meta);margin-top:14px}
.bento-actions{grid-column:2/3;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
/* ══════════════════════════════════════
SECTION: FULL-BLEED QUOTE
══════════════════════════════════════ */
.quote-section{min-height:60vh;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;padding:120px var(--margin);position:relative}
.quote-section::before{content:'"';position:absolute;font-family:var(--font-serif);
font-size:var(--text-hero);color:rgba(196,151,58,.04);line-height:var(--lh-heading);
top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none;user-select:none}
.quote-from{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--nebula-bright);text-transform:uppercase;margin-bottom:2rem}
.quote-text{font-family:var(--font-serif);font-style:italic;font-weight:700;
font-size:var(--text-xl);color:var(--text-1);max-width:880px;
line-height:var(--lh-heading);margin-bottom:2rem;transition:opacity .5s ease}
.quote-attr{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;color:var(--gold);letter-spacing:var(--ls-meta);margin-bottom:1.8rem}
.quote-divider{width:60px;height:1px;background:var(--gold);opacity:.2;margin:0 auto 1.5rem}
.quote-dots{display:flex;align-items:center;justify-content:center;gap:8px}
.qdot{width:6px;height:6px;border-radius:50%;background:var(--text-3);cursor:pointer;transition:background .3s}
.qdot.active{background:var(--gold-border)}
.q-refresh{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);background:none;border:none;cursor:pointer;margin-left:12px;transition:color .3s}
.q-refresh:hover{color:var(--gold)}
/* ══════════════════════════════════════
SECTION: FILM STRIP — СЕРИЯ
══════════════════════════════════════ */
.series-section{padding:80px 0 80px var(--margin);overflow:hidden;position:relative;z-index:1}
.series-header{max-width:1400px;margin:0 auto;padding-right:var(--margin);
display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
.series-title,.section-title{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:700;color:var(--text-1);line-height:var(--lh-heading)}
.series-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta);margin-top:6px}
.series-nav{display:flex;gap:8px}
.series-nav-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-border);
background:var(--glass);color:var(--text-2);cursor:pointer;display:flex;align-items:center;
justify-content:center;font-size:var(--text-sm);transition:all .3s;font-family:var(--font-ui)}
.series-nav-btn:hover{border-color:var(--gold-border);color:var(--gold)}
.film-strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:30px var(--margin) 40px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
max-width:1700px;margin:0 auto;justify-content:safe center}
.film-strip:active{cursor:grabbing}
.film-strip::-webkit-scrollbar{display:none}
.vol-card{flex-shrink:0;width:clamp(230px,22vw,300px);scroll-snap-align:start;
border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--glass-border);
background:var(--surface);transition:transform .35s,border-color .3s,box-shadow .3s;cursor:pointer}
.vol-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(196,151,58,.1)}
.vol-card.available{border-color:var(--gold-border)}
.vol-card.available:hover{border-color:var(--gold)}
.vol-cover{aspect-ratio:2/3;position:relative;overflow:hidden}
.vol-1 .vol-cover{background:linear-gradient(160deg,#1A1400,#0A0800,#1A1200)}
.vol-2 .vol-cover{background:linear-gradient(160deg,#0D0A1A,#060310,#0A0618)}
.vol-3 .vol-cover{background:linear-gradient(160deg,#001A0A,#000A04,#001208)}
.vol-4 .vol-cover{background:linear-gradient(160deg,#1A0500,#0A0200,#120400)}
.vol-5 .vol-cover{background:linear-gradient(160deg,#0A0A1A,#050510,#080818)}
.vol-cover-num{font-family:var(--font-ui);font-style:italic;font-size:8rem;font-weight:800;
background:linear-gradient(135deg,rgba(232,184,75,.32),rgba(196,151,58,.16) 50%,rgba(232,184,75,.28));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);line-height:var(--lh-heading)}
.vol-cover-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 60%)}
.vol-cover-text{position:absolute;bottom:14px;left:14px;right:14px;text-align:center}
.vol-footer{padding:14px 16px;text-align:center}
.vol-name{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--text-1);margin-bottom:4px}
.vol-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta)}
.vol-badge{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-ui);
padding:3px 8px;border-radius:var(--radius-md);margin-top:6px;text-transform:uppercase}
.vol-badge.available{background:rgba(196,151,58,.15);color:var(--gold);border:1px solid var(--gold-border)}
.vol-badge.soon{background:rgba(255,255,255,.05);color:var(--text-3);border:1px solid var(--glass-border)}
/* ══════════════════════════════════════
SECTION: MEDIA PANELS
══════════════════════════════════════ */
.media-stack{
padding:80px var(--margin);position:relative;z-index:1;
max-width:1440px;margin:0 auto;width:100%;
display:flex;flex-direction:column;gap:20px;
box-sizing:border-box
}
.media-panel{
min-height:auto;display:grid;grid-template-columns:1fr 1fr;position:relative;
border-radius:var(--radius-card);overflow:hidden;
border:1px solid var(--glass-border)
}
.media-panel+.media-panel{margin-top:0}
.panel-audio{background:var(--surface);border-color:var(--gold-border);z-index:2}
.panel-read{background:var(--surface-light);border-color:var(--nebula-border);z-index:1}
.panel-col{
padding:48px clamp(24px,4vw,50px);display:flex;flex-direction:column;justify-content:center;
min-width:0
}
.panel-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin-bottom:20px;overflow-wrap:break-word}
.panel-label-nebula{color:var(--nebula-bright)}
.panel-title{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:700;color:var(--text-1);margin-bottom:16px;line-height:var(--lh-heading);overflow-wrap:break-word}
.panel-text{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);opacity:.85;line-height:var(--lh-body);margin-bottom:28px;overflow-wrap:break-word}
.panel-btn-wrap{margin-top:auto}
/* Waveform */
.wave-wrap{
padding:40px clamp(20px,3.5vw,40px);display:flex;flex-direction:column;justify-content:center;
min-width:0;overflow:hidden
}
.wave-label{
font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-label);color:var(--text-2);
text-transform:uppercase;margin-bottom:20px;overflow-wrap:break-word;line-height:1.45
}
.wave-container{
display:flex;align-items:center;gap:clamp(1px,.25vw,3px);height:80px;
width:100%;max-width:100%;overflow:hidden
}
.wave-bar{flex:1 1 2px;min-width:2px;max-width:4px;border-radius:2px;animation:waveAnim var(--dur,1s) ease-in-out infinite alternate}
.wave-gold .wave-bar{background:var(--gold)}
.wave-nebula .wave-bar{background:var(--nebula-bright)}
@keyframes waveAnim{from{height:4px}to{height:var(--h,30px)}}
.wave-track{font-family:var(--font-serif);font-style:italic;font-size:var(--text-base);color:var(--text-1);opacity:.9;margin-top:16px;display:flex;justify-content:space-between;align-items:center}
.wave-time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2)}
/* ══════════════════════════════════════
SECTION: PREORDER
══════════════════════════════════════ */
.preorder-section{padding:100px var(--margin);text-align:center;position:relative;z-index:1}
.preorder-inner{max-width:1200px;margin:0 auto}
.preorder-label{font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin-bottom:14px;opacity:1;line-height:var(--lh-ui);display:inline-flex;align-items:center;gap:.4em;transition:color .25s,letter-spacing .25s,text-shadow .25s}
.preorder-label-link{cursor:pointer;text-decoration:none;display:inline-block}
.preorder-label-link:hover .preorder-label{color:var(--gold-bright);text-shadow:0 0 24px rgba(232,184,75,.45);letter-spacing:var(--ls-label)}
.preorder-label-link:hover .preorder-arrow{transform:translateX(6px)}
.preorder-arrow{display:inline-block;font-size:1.1em;color:var(--gold-bright);transition:transform .25s}
.preorder-sub{font-family:var(--font-ui);font-weight:300;font-size:var(--text-md);color:var(--text-2);margin-bottom:48px}
.preorder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
.pre-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);
padding:36px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,border-color .3s}
.pre-card:hover{transform:translateY(-4px)}
.pre-card-featured{border-color:var(--gold-border);background:var(--gold-dim);transform:scale(1.04)}
.pre-card-featured:hover{transform:scale(1.04) translateY(-4px)}
.pre-badge{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);text-transform:uppercase;
padding:5px 12px;border-radius:var(--radius-md);width:fit-content;margin-bottom:4px}
.pre-badge-hot{background:rgba(196,151,58,.2);color:var(--gold);border:1px solid var(--gold-border)}
.pre-title{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;color:var(--text-1)}
.pre-price{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:700;color:var(--gold)}
.pre-discount{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--nebula-bright);letter-spacing:var(--ls-ui)}
.pre-features{list-style:none;text-align:left;margin:8px 0}
.pre-features li{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);opacity:.85;padding:4px 0;
border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:8px}
.pre-features li::before{content:'—';color:var(--gold);font-size:var(--text-xs);flex-shrink:0}
.pre-card-featured .pre-features li::before{color:var(--gold-bright)}
.pre-btn-wrap{margin-top:auto;padding-top:16px}
/* ══════════════════════════════════════
FOOTER
══════════════════════════════════════ */
footer{border-top:1px solid var(--glass-border);padding:60px var(--margin) 40px;background:var(--space);position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;max-width:1400px;margin:0 auto;margin-bottom:48px}
.footer-brand-name{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--ls-meta);color:var(--gold);margin-bottom:10px}
.footer-brand-desc{font-family:var(--font-serif);font-style:italic;font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body);margin-bottom:14px}
.footer-author{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--text-2)}
.footer-col-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--gold);text-transform:uppercase;margin-bottom:14px;opacity:.85}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-2);text-decoration:none;cursor:pointer;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--glass-border);padding-top:24px;gap:16px;flex-wrap:wrap}
.footer-copy-block{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .5em;max-width:100%;
font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-ui);color:var(--text-2);line-height:1.5}
.footer-copy,.footer-legal-link{color:inherit;font:inherit;letter-spacing:inherit;text-transform:uppercase}
.footer-legal-link{text-decoration:none;cursor:pointer;transition:opacity .2s;overflow-wrap:break-word}
.footer-legal-link:hover{opacity:.72;color:inherit}
.footer-legal-sep{color:inherit;opacity:.45;user-select:none}
.footer-social{display:flex;gap:12px}
.footer-social a{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);text-decoration:none;
padding:5px 10px;border:1px solid var(--glass-border);border-radius:6px;transition:all .3s}
.footer-social a:hover{color:var(--gold);border-color:var(--gold-border)}
/* ══════════════════════════════════════
INNER PAGES COMMON
══════════════════════════════════════ */
.page-wrap{max-width:1400px;margin:0 auto;padding:40px var(--margin) 80px}
.page-hero-centered{max-width:1400px;margin:0 auto;padding-left:var(--margin);padding-right:var(--margin)}
.page-hero-grid{display:grid;grid-template-columns:1fr minmax(280px,34rem);gap:80px;align-items:end;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--glass-border)}
.page-hero-aside{text-align:right;justify-self:end;max-width:34rem}
.page-hero-aside .page-intro{margin:0}
.page-hero-aside .page-credo{text-align:right}
.page-title{font-family:var(--font-ui);font-size:var(--text-hero);font-weight:700;line-height:var(--lh-heading);letter-spacing:-.01em;
color:var(--text-1);background:none;-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}
.page-title.era-page-title{color:var(--text-1);background:none;-webkit-text-fill-color:currentColor;
-webkit-background-clip:border-box;background-clip:border-box}
.page-title-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin-bottom:16px;opacity:.85}
.page-intro{font-family:var(--font-serif);font-style:italic;font-size:var(--text-md);color:var(--text-2);line-height:var(--lh-body)}
.page-credo{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;margin-top:22px;padding-top:18px;border-top:1px solid var(--gold-border);color:var(--gold);line-height:1.7}
#s-universe .page-wrap-universe-hero{padding-bottom:0}
#s-universe .page-wrap-universe-body{padding-top:48px}
#s-universe .page-wrap + .page-wrap{padding-top:48px;padding-bottom:80px}
.section-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin-bottom:32px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)}
.body-text{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);opacity:1;max-width:800px;line-height:var(--lh-body);margin-bottom:1.5em}
/* Characters */
.char-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:80px}
.char-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:28px 24px;transition:transform .3s,border-color .3s}
.char-card:hover{transform:translateY(-4px);border-color:var(--glass-border)}
.char-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;margin-bottom:16px}
.char-avatar-gold{background:rgba(196,151,58,.15);border:2px solid var(--gold-border);color:var(--gold)}
.char-avatar-nebula{background:rgba(139,92,246,.12);border:2px solid var(--nebula-border);color:var(--nebula-bright)}
.char-avatar-red{background:rgba(220,50,50,.12);border:2px solid rgba(220,50,50,.3);color:rgba(220,100,100,1)}
.char-name{font-family:var(--font-ui);font-size:var(--text-md);font-weight:600;color:var(--text-1);margin-bottom:3px}
.char-role{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--gold);margin-bottom:10px;text-transform:uppercase;opacity:.85}
.char-desc{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body)}
/* Thinkers (great scientists) */
.thinkers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;margin-bottom:80px}
.thinker-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:26px 24px;
display:flex;flex-direction:column;gap:6px;transition:transform .3s,border-color .3s,background .3s;
position:relative;overflow:hidden}
.thinker-card::before{content:'';position:absolute;top:0;left:0;width:2px;height:32px;background:var(--gold);opacity:.5}
.thinker-card:hover{transform:translateY(-4px);border-color:var(--gold-border);background:rgba(196,151,58,.04)}
.thinker-years{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--gold);opacity:.85;text-transform:uppercase}
.thinker-name{font-family:var(--font-serif);font-style:italic;font-size:var(--text-md);font-weight:700;color:var(--text-1);margin-top:2px;line-height:var(--lh-heading)}
.thinker-field{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-ui);color:var(--text-2);text-transform:uppercase;margin-bottom:10px;opacity:.8}
.thinker-field:has(+ .thinker-nobel){margin-bottom:8px}
.thinker-nobel{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--gold);background:rgba(196,151,58,.1);border:1px solid var(--gold-border);border-radius:var(--radius-md);padding:4px 11px;margin-bottom:12px}
.thinker-nobel::before{content:'★';font-size:.9em;line-height:1}
.thinker-desc{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body)}
@media (max-width:980px){.thinkers-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.thinkers-grid{grid-template-columns:1fr}}
/* Materials / glossary */
.materials-intro{font-family:var(--font-serif);font-style:italic;font-size:var(--text-md);color:var(--text-2);max-width:780px;line-height:var(--lh-body);margin-bottom:32px}
.glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:60px}
.glossary-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:22px 24px;
transition:border-color .3s,background .3s;display:flex;flex-direction:column;gap:6px}
.glossary-item:hover{border-color:var(--nebula-border);background:rgba(139,92,246,.04)}
.glossary-term{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;color:var(--text-1);letter-spacing:-.005em}
.glossary-symbol{font-family:var(--font-serif);font-style:italic;color:var(--nebula-bright);margin-right:.3em}
.glossary-tag{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--nebula-bright);text-transform:uppercase;opacity:.85}
.glossary-def{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body);margin-top:4px}
.materials-header{margin-bottom:36px}
.materials-pane-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);text-transform:uppercase;margin:24px 0 32px;opacity:.85}
#s-blog:has(.materials-header) .elementor-widget-era_page_header{display:none}
#s-blog:not(:has(.materials-header)) .elementor-widget-era_page_header + .elementor-widget-era_materials .page-wrap-materials{padding-top:48px}
.materials-tabs{display:inline-flex;gap:4px;padding:5px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-pill);margin-bottom:0}
.materials-tab{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--ls-ui);text-transform:uppercase;
padding:9px 22px;border-radius:var(--radius-pill);border:none;background:none;color:var(--text-2);cursor:pointer;transition:all .25s}
.materials-tab.active{background:var(--gold);color:#000}
.materials-tab:not(.active):hover{color:var(--text-1)}
.materials-pane{display:none}
.materials-pane.active{display:block}
@media (max-width:760px){.glossary-grid{grid-template-columns:1fr}}
/* Timeline */
.timeline-wrap{margin-bottom:80px;overflow-x:auto;padding-bottom:20px}
.timeline{display:flex;align-items:flex-start;gap:0;position:relative;min-width:700px}
.timeline::before{content:'';position:absolute;top:20px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border),var(--gold-border),transparent)}
.tl-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--gold-border);border:2px solid var(--void);box-shadow:0 0 0 2px var(--gold-border);margin-top:15px;flex-shrink:0}
.tl-dot.future{background:var(--surface);border-color:var(--glass-border);box-shadow:0 0 0 2px var(--glass-border)}
.tl-year{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--text-2);letter-spacing:var(--ls-ui);margin-top:8px}
.tl-label{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--text-1);text-align:center;max-width:110px;line-height:var(--lh-ui)}
.tl-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);text-align:center}
/* Volumes page */
.vol-detail-list{display:flex;flex-direction:column;gap:24px;margin-bottom:60px}
.vol-detail{display:grid;grid-template-columns:160px 1fr;gap:32px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:28px;transition:border-color .3s}
.vol-detail:hover{border-color:var(--gold-border)}
.vol-detail.available{border-color:var(--gold-border);background:var(--gold-dim)}
.vol-detail-cover{aspect-ratio:2/3;border-radius:var(--radius-md);overflow:hidden;position:relative}
.vol-detail-info{display:flex;flex-direction:column;justify-content:center}
.vol-detail-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-label);color:var(--gold);margin-bottom:8px;opacity:.85}
.vol-detail-title{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:700;color:var(--text-1);margin-bottom:4px}
.vol-detail-dates{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-ui);margin-bottom:16px}
.vol-detail-desc{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);opacity:.85;line-height:var(--lh-body);margin-bottom:20px}
.vol-detail-btns{display:flex;gap:10px;flex-wrap:wrap}
/* Read page */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto 60px}
.price-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:36px 32px}
.price-card-gold{border-color:var(--gold-border);background:var(--gold-dim)}
.price-card-nebula{border-color:var(--nebula-border);background:var(--nebula-dim)}
.price-tier{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--gold);margin-bottom:14px;opacity:.85}
.price-amount{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:700;color:var(--gold-border);margin-bottom:4px}
.price-card-nebula .price-amount{color:var(--nebula-bright)}
.price-per{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-ui);margin-bottom:20px}
.price-features{list-style:none;margin-bottom:24px}
.price-features li{font-family:var(--font-ui);font-size:var(--text-base);color:var(--text-1);opacity:.85;padding:8px 0;
border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:8px}
.price-features li::before{content:'·';color:var(--gold);font-size:var(--text-md);line-height:var(--lh-heading)}
.price-card-nebula .price-features li::before{color:var(--nebula-bright)}
.chapter-preview{max-width:700px;margin:0 auto 60px;position:relative}
.chapter-title{font-family:var(--font-ui);font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:20px}
.chapter-text{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body);margin-bottom:0}
.chapter-fade{position:absolute;bottom:0;left:0;right:0;height:120px;
background:linear-gradient(0deg,var(--void) 0%,transparent 100%);pointer-events:none}
.chapter-list{max-width:700px;margin:0 auto}
.chapter-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--glass-border)}
.chapter-item-title{font-family:var(--font-ui);font-size:var(--text-base);color:var(--text-1)}
.chapter-item.locked .chapter-item-title{color:var(--text-3)}
.chapter-item.locked .chapter-item-title.era-vol1-white-title{color:var(--text-1)}
.chapter-lock{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:#c4973a;letter-spacing:var(--ls-ui)}
.chapter-item[data-chapter-id],
.chapter-item[data-glossary-vol]{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.chapter-item[data-chapter-id]:active,
.chapter-item[data-glossary-vol]:active{opacity:.85}
.chapter-item[data-chapter-id]:hover .chapter-read,
.chapter-item[data-glossary-vol]:hover .chapter-read{opacity:.85}
.chapter-free{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--gold-border);letter-spacing:var(--ls-ui)}
.chapter-read{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:#fff;letter-spacing:var(--ls-ui);transition:opacity .2s}
.chapter-read:hover{opacity:.85}
/* Audio page */
.audio-player-dock{max-width:800px;margin:0 auto 40px;position:relative}
.audio-player{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:28px 32px;width:100%;box-sizing:border-box}
.audio-player.is-stuck{
position:fixed;left:50%;transform:translateX(-50%);
top:var(--era-nav-clear);z-index:950;
width:min(800px,calc(100vw - 32px));margin:0;
background:rgba(8,8,12,.94);backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border-color:var(--gold-border);
box-shadow:0 16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
padding:18px 24px
}
.audio-player.is-stuck .player-title{margin-bottom:12px;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-player.is-stuck .player-controls{margin-bottom:0}
.audio-player.is-stuck .play-btn{width:44px;height:44px}
@media (max-width:720px){
.audio-player.is-stuck{top:calc(var(--era-nav-top) + var(--era-nav-height) + 12px);padding:14px 16px;width:calc(100vw - 24px);border-radius:var(--radius-card)}
.audio-player.is-stuck .player-title{margin-bottom:8px;font-size:var(--text-xs)}
.audio-player.is-stuck .player-controls{gap:12px}
.audio-player.is-stuck .play-btn{width:40px;height:40px}
}
.player-title{font-family:var(--font-ui);font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:20px}
.player-controls{display:flex;align-items:center;gap:16px;margin-bottom:0}
.play-btn{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#000;border:none;
cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--text-md);
transition:background .3s,transform .2s;flex-shrink:0}
.play-btn:hover{background:var(--gold-bright);transform:scale(1.05)}
.progress-wrap{flex:1;padding:10px 0;margin:-10px 0}
.progress-bar{width:100%;height:6px;background:var(--glass-border);border-radius:3px;cursor:pointer;position:relative;touch-action:none}
.progress-bar.era-seeking .progress-fill{transition:none}
.progress-fill{height:100%;background:var(--gold-border);border-radius:3px;width:0%;transition:width .1s;position:relative;pointer-events:none}
.progress-fill::after{content:'';position:absolute;right:0;top:50%;width:14px;height:14px;margin-top:-7px;margin-right:-7px;border-radius:50%;
background:var(--gold);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--gold-border);opacity:0;transition:opacity .15s,transform .15s}
.progress-bar:hover .progress-fill::after,.progress-bar.era-seeking .progress-fill::after{opacity:1}
.progress-bar.era-seeking .progress-fill::after{transform:scale(1.12)}
.progress-times{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);margin-top:6px}
.audio-chapter-list{max-width:800px;margin:0 auto 60px}
.audio-chapter-item{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--radius-md);
cursor:pointer;transition:background .2s;border:1px solid transparent}
.audio-chapter-item:hover,.audio-chapter-item.playing{background:var(--glass);border-color:var(--glass-border)}
.audio-chapter-item.playing{border-color:var(--gold-border)}
.audio-play-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--text-2);flex-shrink:0}
.audio-chapter-item.playing .audio-play-icon{border-color:var(--gold);color:var(--gold)}
.audio-chapter-title{font-family:var(--font-ui);font-size:var(--text-base);color:var(--text-1);flex:1}
.audio-chapter-item.locked .audio-chapter-title{color:var(--text-3)}
.audio-chapter-item.locked .audio-chapter-title.era-vol1-white-title{color:var(--text-1)}
.audio-chapter-time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2)}
/* ── Volume reader / volume tabs (read + audio pages) ── */
.vol-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:880px;margin:0 auto 36px}
.vol-tab{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:var(--text-xs);
font-weight:600;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--text-2);
background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-btn);
padding:10px 18px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.vol-tab:hover{color:var(--text-1);border-color:var(--gold-border)}
.vol-tab.active{color:var(--gold);border-color:var(--gold);background:linear-gradient(rgba(196,151,58,.1),rgba(196,151,58,.1)),var(--surface)}
.vol-tab .vt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.vol-tab .vt-dot.available{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.vol-tab .vt-dot.soon{background:var(--text-3)}
.vol-reader{max-width:820px;margin:0 auto}
.vr-header{display:flex;align-items:center;gap:22px;padding:24px 26px;margin-bottom:28px;
background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card)}
.vr-cover{width:64px;height:90px;border-radius:8px;flex-shrink:0;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center}
.vr-cover.v1{background:linear-gradient(160deg,#1A1400,#0A0800,#1A1200)}
.vr-cover.v2{background:linear-gradient(160deg,#0D0A1A,#060310,#0A0618)}
.vr-cover.v3{background:linear-gradient(160deg,#001A0A,#000A04,#001208)}
.vr-cover.v4{background:linear-gradient(160deg,#1A0500,#0A0200,#120400)}
.vr-cover.v5{background:linear-gradient(160deg,#0A0A1A,#050510,#080818)}
.vr-cover-num{font-family:var(--font-ui);font-style:italic;font-weight:800;font-size:2.6rem;
background:linear-gradient(135deg,rgba(232,184,75,.5),rgba(196,151,58,.25));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vr-meta{flex:1;min-width:0}
.vr-era{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--text-2);text-transform:uppercase;margin-bottom:5px}
.vr-title{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:700;color:var(--text-1);line-height:1.15;margin-bottom:8px}
.vr-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3);letter-spacing:var(--ls-ui)}
.vr-status{flex-shrink:0;align-self:flex-start;font-family:var(--font-mono);font-size:var(--text-xs);
font-weight:600;letter-spacing:var(--ls-ui);text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-md)}
.vr-status.available{background:rgba(196,151,58,.15);color:var(--gold);border:1px solid var(--gold-border)}
.vr-status.soon{background:rgba(255,255,255,.05);color:var(--text-3);border:1px solid var(--glass-border)}
/* Coming-soon volume body */
.vr-soon-note{font-family:var(--font-serif);font-style:italic;font-size:var(--text-md);color:var(--text-2);
text-align:center;max-width:620px;margin:0 auto 28px;line-height:var(--lh-body)}
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-bottom:32px}
.cg-tile{display:flex;flex-direction:column;gap:6px;padding:14px 14px 13px;border-radius:var(--radius-md);
background:var(--surface);border:1px solid var(--glass-border);opacity:.62}
.cg-num{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--text-3)}
.cg-label{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-2)}
.cg-lock{font-size:var(--text-xs);color:var(--text-3)}
.cg-tile.is-glossary{border-color:var(--gold-border);opacity:.8}
.cg-tile.is-glossary .cg-label{color:var(--gold)}
.vr-cta{text-align:center}
.vr-cta-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-ui);margin-bottom:16px}
.chapter-item .chapter-glossary{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gold);letter-spacing:var(--ls-ui)}
.chapter-item.is-glossary:not([data-glossary-vol]) .chapter-item-title{color:var(--gold)}
.chapter-item.is-glossary[data-glossary-vol] .chapter-item-title{color:var(--text-1)}
.audio-chapter-item.is-glossary .audio-chapter-title{color:var(--gold)}
/* Music page */
.music-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto 60px}
.music-track{display:flex;align-items:center;gap:16px;padding:20px;background:var(--glass);
border:1px solid var(--glass-border);border-radius:var(--radius-card);cursor:pointer;transition:all .3s}
.music-track:hover{border-color:var(--nebula-border);background:var(--nebula-dim)}
.music-play{width:44px;height:44px;border-radius:50%;border:1px solid var(--nebula-border);
display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--nebula-bright);
flex-shrink:0;transition:all .3s}
.music-track:hover .music-play{background:var(--gold);border-color:var(--nebula);color:#fff}
.music-info{flex:1}
.music-name{font-family:var(--font-ui);font-size:var(--text-base);font-weight:600;color:var(--text-1)}
.music-vol{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-ui);margin-top:3px}
.music-dur{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2)}
.music-soon{color:var(--text-3)!important;border-color:var(--glass-border)!important}
/* Blog page */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto}
.blog-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);
padding:32px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,border-color .3s;cursor:pointer}
.blog-card:hover{transform:translateY(-4px);border-color:var(--gold-border)}
.blog-date{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);letter-spacing:var(--ls-meta)}
.blog-title{font-family:var(--font-ui);font-size:var(--text-md);font-weight:600;color:var(--text-1);line-height:var(--lh-ui)}
.blog-excerpt{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body);flex:1}
.blog-read{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--gold);letter-spacing:var(--ls-ui);margin-top:auto;display:flex;align-items:center;gap:6px}
.blog-read::after{content:'→'}
/* Chronicle article reader */
.article-wrap{max-width:760px}
.article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-xs);
font-weight:600;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--text-2);
background:none;border:none;cursor:pointer;padding:0;margin-bottom:40px;transition:color .25s}
.article-back:hover{color:var(--gold)}
.article-tag{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.article-date{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3);letter-spacing:var(--ls-meta);margin-bottom:10px}
.article-title{font-family:var(--font-ui);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;
color:var(--text-1);line-height:1.12;margin-bottom:32px;letter-spacing:-.01em;text-wrap:balance}
.article-lede{font-family:var(--font-serif);font-style:italic;font-size:var(--text-lg);color:var(--gold);
line-height:var(--lh-body);margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--gold-border)}
.article-body p{font-family:var(--font-serif);font-size:var(--text-md);color:var(--text-1);
line-height:1.75;margin-bottom:1.4em;text-wrap:pretty}
.article-body p.dim{color:var(--text-2)}
.article-pull{font-family:var(--font-serif);font-style:italic;font-size:var(--text-xl);font-weight:700;
color:var(--text-1);line-height:1.3;margin:36px 0;padding-left:24px;border-left:3px solid var(--gold);text-wrap:balance}
.article-foot{margin-top:48px;padding-top:28px;border-top:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.article-sign{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--text-3);text-transform:uppercase}
/* ── Internal-page cards & text blocks: SOLID (non-transparent) surfaces ── */
/* placed AFTER all card rules so it wins on source order */
.char-card,.thinker-card,.glossary-item,.vol-detail,.music-track,.blog-card,.price-card{
background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.vol-detail.available,.price-card-gold{
background:linear-gradient(rgba(196,151,58,0.12),rgba(196,151,58,0.12)),var(--surface)}
.price-card-nebula{
background:linear-gradient(rgba(139,92,246,0.12),rgba(139,92,246,0.12)),var(--surface)}
.char-card:hover,.blog-card:hover{background:var(--surface-light)}
.thinker-card:hover{background:linear-gradient(rgba(196,151,58,0.07),rgba(196,151,58,0.07)),var(--surface)}
.glossary-item:hover,.music-track:hover{background:linear-gradient(rgba(139,92,246,0.07),rgba(139,92,246,0.07)),var(--surface)}
.vol-detail-desc,.price-features li,.price-tier,.thinker-years,.thinker-field,.thinker-desc,.char-desc{opacity:1}
/* Preorder page */
.preorder-form{max-width:600px;margin:60px auto 0;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:40px}
.form-title{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;color:var(--text-1);margin-bottom:24px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--ls-meta);color:var(--text-2);text-transform:uppercase}
.form-input{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
padding:12px 16px;font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);
outline:none;transition:border-color .3s;width:100%}
.form-input:focus{border-color:var(--gold-border)}
.gift-box{background:var(--nebula-dim);border:1px solid var(--nebula-border);border-radius:var(--radius-card);padding:28px;margin-top:40px;text-align:center}
.gift-title{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;color:var(--text-1);margin-bottom:10px}
.gift-desc{font-family:var(--font-serif);font-size:var(--text-sm);color:var(--text-2);line-height:var(--lh-body)}
/* ══════════════════════════════════════
STATIC PAGE (обычные страницы WP)
══════════════════════════════════════ */
.era-page-shell{min-height:100vh;display:flex;flex-direction:column;padding:100px var(--margin) 48px}
.era-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
max-width:900px;width:100%;margin:0 auto 40px;padding-bottom:20px;border-bottom:1px solid var(--glass-border)}
.era-page-back{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-ui);
text-transform:uppercase;color:var(--text-2);text-decoration:none;transition:color .25s}
.era-page-back:hover{color:var(--gold)}
.era-page-brand{font-family:var(--font-ui);font-size:0.82rem;font-weight:600;letter-spacing:0.12em;
color:var(--gold);text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
transition:color .25s}
.era-page-brand:hover{color:var(--gold-bright)}
.era-page-wrap{flex:1;max-width:820px;width:100%;margin:0 auto;padding:0 0 60px}
.era-page-title{font-family:var(--font-ui);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;
color:var(--text-1);line-height:var(--lh-heading);letter-spacing:-.01em;margin-bottom:32px;text-wrap:balance}
.era-page-content{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-1);line-height:var(--lh-body)}
.era-page-content > *:first-child{margin-top:0}
.era-page-content p{margin-bottom:1.35em;color:var(--text-1)}
.era-page-content h2,.era-page-content h3,.era-page-content h4{
font-family:var(--font-ui);color:var(--text-1);line-height:var(--lh-heading);margin:2em 0 .75em;text-wrap:balance}
.era-page-content h2{font-size:var(--text-lg)}
.era-page-content h3{font-size:var(--text-md)}
.era-page-content h4{font-size:var(--text-base);letter-spacing:var(--ls-ui);text-transform:uppercase}
.era-page-content ul,.era-page-content ol{margin:0 0 1.35em 1.25em;padding:0}
.era-page-content li{margin-bottom:.45em}
.era-page-content a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.era-page-content a:hover{color:var(--gold-bright)}
.era-page-content blockquote{
margin:1.75em 0;padding:0 0 0 20px;border-left:3px solid var(--gold-border);
font-style:italic;color:var(--text-2)}
.era-page-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:var(--text-sm)}
.era-page-content th,.era-page-content td{border:1px solid var(--glass-border);padding:10px 12px;text-align:left;vertical-align:top}
.era-page-content th{font-family:var(--font-ui);background:var(--surface);color:var(--text-1)}
.era-page-content img,.era-page-content video,.era-page-content iframe{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.era-page-nav{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--glass-border);
font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2)}
.era-page-nav-label{margin-right:.5em;color:var(--gold)}
.era-page-nav a{color:var(--text-2);text-decoration:none;margin:0 .35em}
.era-page-nav a:hover{color:var(--gold)}
.era-page-footer{max-width:820px;width:100%;margin:0 auto;padding-top:24px;border-top:1px solid var(--glass-border)}
/* Elementor внутри текстовых страниц */
.era-page-shell.era-page-elementor{overflow-x:visible}
.era-page-elementor-root{flex:1;width:100%;max-width:100%;margin:0 auto;padding:0 0 48px}
.era-page-elementor-root > .elementor{width:100%;max-width:100%}
.era-page-elementor-root .elementor-section.elementor-section-boxed > .elementor-container{
max-width:min(820px,calc(100vw - var(--margin) * 2))}
.era-page-elementor-root .elementor-widget-wrap,
.era-page-elementor-root .elementor-widget{max-width:100%}
.era-page-elementor-root .elementor-widget-text-editor,
.era-page-elementor-root .elementor-widget-theme-post-content{
font-family:var(--font-serif);color:var(--text-1);line-height:var(--lh-body)}
.era-page-elementor-root .elementor-widget-heading .elementor-heading-title{
font-family:var(--font-ui);color:var(--text-1)}
.era-page-elementor .era-page-footer{max-width:100%;padding-left:var(--margin);padding-right:var(--margin)}
body.era-static-page.elementor-editor-active .era-page-shell,
body.era-static-page.elementor-editor-preview .era-page-shell{padding-top:24px}
body.era-static-page.elementor-editor-active #intro-overlay,
body.era-static-page.elementor-editor-preview #intro-overlay{display:none!important}
body.era-static-page.elementor-editor-active #era-page,
body.era-static-page.elementor-editor-preview #era-page{opacity:1}
/* ══════════════════════════════════════
INTRO: ПАДЕНИЕ В ЧЁРНУЮ ДЫРУ
══════════════════════════════════════ */
#intro-overlay{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
background:#000;
}
#intro-overlay.done{ display:none; }
.intro-bh-wrap{
position:absolute;
width:280px;height:280px;
left:50%;top:50%;
transform:translate(-50%,-50%);
transform-origin:center center;
}
.intro-bh-core{
position:absolute;inset:34%;border-radius:50%;
background:radial-gradient(circle,#000 50%,#050508 100%);
box-shadow:0 0 60px 30px rgba(0,0,0,1);
z-index:3;
}
.intro-bh-disk{
position:absolute;inset:18%;border-radius:50%;
background:conic-gradient(from 0deg,
rgba(255,200,80,.98) 0%,rgba(232,184,75,.7) 12%,
rgba(196,151,58,.9) 22%,rgba(139,92,246,.6) 35%,
rgba(167,139,250,.85) 48%,rgba(196,151,58,.95) 70%,
rgba(255,220,100,.8) 82%,rgba(255,200,80,.98) 100%);
-webkit-mask:radial-gradient(circle,transparent 52%,black 57%,black 100%);
mask:radial-gradient(circle,transparent 52%,black 57%,black 100%);
animation:bh-rotate 8s linear infinite;
filter:blur(2px);z-index:2;
}
.intro-bh-glow{
position:absolute;inset:4%;border-radius:50%;
box-shadow:
0 0 40px 10px rgba(255,200,80,.25),
0 0 100px 35px rgba(196,151,58,.15),
0 0 180px 60px rgba(139,92,246,.12);
z-index:0;
}
.intro-bh-photon{
position:absolute;inset:26%;border-radius:50%;
border:2px solid rgba(255,220,100,.5);
box-shadow:0 0 18px 4px rgba(255,200,80,.35),inset 0 0 14px 3px rgba(255,200,80,.25);
z-index:4;
}
.intro-stars-layer{
position:absolute;inset:0;overflow:hidden;
}
.intro-stars-layer::after{
content:'';position:absolute;inset:0;
background:transparent;
box-shadow:
120px 80px 1px 0px rgba(255,255,255,.8),340px 160px 1px 0px rgba(255,255,255,.6),
580px 90px 1px 0px rgba(255,255,255,.9),780px 220px 1px 0px rgba(255,255,255,.7),
1020px 140px 1px 0px rgba(255,255,255,.8),200px 350px 1px 0px rgba(255,255,255,.6),
450px 420px 1px 0px rgba(255,255,255,.9),700px 380px 1px 0px rgba(255,255,255,.7),
920px 460px 1px 0px rgba(255,255,255,.8),1150px 320px 1px 0px rgba(255,255,255,.6),
60px 520px 1px 0px rgba(255,255,255,.9),310px 590px 1px 0px rgba(255,255,255,.7),
540px 540px 1px 0px rgba(255,255,255,.8),750px 610px 1px 0px rgba(255,255,255,.6),
980px 570px 1px 0px rgba(255,255,255,.9),1200px 500px 1px 0px rgba(255,255,255,.7),
160px 700px 1px 0px rgba(255,255,255,.8),400px 760px 1px 0px rgba(255,255,255,.6),
640px 720px 1px 0px rgba(255,255,255,.9),860px 800px 1px 0px rgba(255,255,255,.7),
1080px 740px 1px 0px rgba(255,255,255,.8),30px 200px 2px 1px rgba(255,240,200,.9),
660px 300px 2px 1px rgba(200,180,255,.85),1250px 450px 2px 1px rgba(255,240,200,.9);
width:1px;height:1px;border-radius:50%;
}
/* Site hidden until intro done */
#pw, #nav, .variant-switcher{
opacity:0;
transition:opacity .9s ease;
}
#pw.revealed, #nav.revealed, .variant-switcher.revealed{
opacity:1;
}
/* Мгновенный возврат / открытие главы — без fade-in и scroll-анимаций */
body.era-instant-return #intro-overlay{display:none!important}
body.era-instant-return #nav{
opacity:1!important;transform:translateX(-50%)!important;
transition:none!important;animation:none!important}
body.era-instant-return #pw,
body.era-instant-return .variant-switcher,
body.era-instant-return #s-read,
body.era-instant-return #s-read .au,
body.era-instant-return #s-read .au.vis,
body.era-chapter-open #s-chapter,
body.era-chapter-open #s-chapter .era-chapter-body,
body.era-chapter-open #s-chapter .era-chapter-body *{
opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
#warp-canvas{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;transition:opacity .3s;
pointer-events:none;
}
#warp-canvas.active{ opacity:1; }
/* ════════════ Chapter reader page ════════════ */
body.era-chapter-active #pw{display:none}
body.era-chapter-active .stars-bg,
body.era-chapter-active .cosmos-gradient{opacity:0;transition:opacity .35s ease}
#s-chapter{
--rd-bg:#07070d;--rd-surface:rgba(17,17,24,.72);--rd-text:#F0ECE4;--rd-text-2:#A29CAA;
--rd-text-3:#6F6A78;--rd-border:rgba(255,255,255,.1);--rd-accent:#C4973A;
--rd-accent-dim:rgba(196,151,58,.15);--rd-toolbar-bg:rgba(12,12,20,.88);
--rd-toolbar-border:rgba(255,255,255,.12);--rd-toolbar-color:#F0ECE4;
--rd-font-scale:1;
display:none;position:fixed;inset:0;z-index:800;overflow-y:auto;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
box-sizing:border-box;padding-top:var(--era-nav-clear);
padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));
min-height:100vh;min-height:100dvh;background:var(--rd-bg);transition:background .35s ease,color .35s ease}
#s-chapter.active,#s-chapter.ps.active{display:block}
#s-chapter.era-rd-light{
--rd-bg:#F4F1EA;--rd-surface:rgba(255,255,255,.9);--rd-text:#1A1820;--rd-text-2:#4E4A56;
--rd-text-3:#7A7585;--rd-border:rgba(26,24,32,.12);--rd-accent:#9A7428;
--rd-accent-dim:rgba(154,116,40,.12);--rd-toolbar-bg:rgba(255,255,255,.92);
--rd-toolbar-border:rgba(26,24,32,.12);--rd-toolbar-color:#1A1820}
.era-chapter-wrap{padding:32px var(--margin) 24px}
.era-chapter-page{max-width:720px;margin:0 auto}
.era-chapter-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
font-size:var(--text-xs);letter-spacing:var(--ls-meta);color:var(--rd-text-2);background:none;
border:none;cursor:pointer;padding:0;margin-bottom:28px;transition:color .2s}
.era-chapter-back:hover{color:var(--rd-accent)}
.era-chapter-vol{font-family:var(--font-mono);font-size:calc(var(--text-xs) * var(--rd-font-scale, 1));font-weight:600;
letter-spacing:var(--ls-label);color:var(--rd-accent);text-transform:uppercase;margin-bottom:12px}
.era-chapter-head{font-family:var(--font-ui);font-size:calc(clamp(1.5rem, 3vw, 2.2rem) * var(--rd-font-scale, 1));font-weight:700;
color:var(--rd-text);line-height:var(--lh-heading);margin-bottom:32px;padding-right:8px}
.era-chapter-wrap,.era-chapter-page,.era-chapter-body{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}
.era-chapter-body{
font-family:var(--font-serif);color:var(--rd-text)!important;line-height:1.85;
font-size:calc(1.0625rem * var(--rd-font-scale, 1));
-webkit-text-size-adjust:100%;text-size-adjust:100%;
transition:color .35s ease}
.era-chapter-body .era-chapter-content,
.era-chapter-body .era-chapter-content p,
.era-chapter-body p,.era-chapter-body li,.era-chapter-body blockquote,
.era-chapter-body dd,.era-chapter-body dt,.era-chapter-body figcaption,
.era-chapter-body div:not(.article-pull),
.era-chapter-body .wp-block-paragraph,.era-chapter-body [class*="wp-block"] p{
color:var(--rd-text)!important;font-size:inherit!important;line-height:inherit;
white-space:normal!important;text-wrap:wrap!important;
overflow-wrap:break-word;word-break:break-word;max-width:100%}
.era-chapter-body h1,.era-chapter-body h2,.era-chapter-body h3,.era-chapter-body h4{
color:var(--rd-text)!important;font-size:1.15em!important;line-height:var(--lh-heading)}
.era-chapter-body .au,.era-chapter-body .au.vis{opacity:1!important;transform:none!important}
.era-chapter-body p{margin-bottom:1.4em}
.era-chapter-body .article-lede{font-size:1.15em!important;color:var(--rd-text)!important}
.era-chapter-body .article-pull{font-style:italic;color:var(--rd-accent)!important;border-left:2px solid var(--rd-accent-dim);
padding-left:20px;margin:1.6em 0;font-size:1.08em!important}
.era-chapter-body .dim{color:var(--rd-text-2)!important}
.era-chapter-body .era-glossary-reader{margin-top:8px}
.era-chapter-body .era-glossary-reader.glossary-grid{grid-template-columns:1fr;gap:16px}
.era-chapter-body .glossary-item{background:var(--rd-surface,rgba(255,255,255,.04));border-color:var(--rd-border,rgba(255,255,255,.08))}
.era-chapter-body .glossary-term{color:var(--rd-text)!important}
.era-chapter-body .glossary-def{color:var(--rd-text-2)!important}
.era-chapter-body .glossary-tag{color:var(--rd-accent)!important}
#s-chapter .article-body p{color:var(--rd-text)!important}
.era-chapter-toolbar{
position:fixed;left:0;right:0;bottom:0;z-index:901;flex-shrink:0;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
padding:14px max(18px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
pointer-events:none}
.era-chapter-toolbar > *{pointer-events:auto}
.era-rd-theme{justify-self:start;cursor:pointer;border:none;padding:0;background:none;
touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.era-rd-theme-track{
position:relative;display:inline-flex;align-items:center;justify-content:space-between;
width:76px;height:38px;padding:0 10px;
background:var(--rd-toolbar-bg);border:1px solid var(--rd-toolbar-border);border-radius:var(--radius-pill);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 8px 28px rgba(0,0,0,.22);color:var(--rd-toolbar-color);transition:background .35s,border-color .35s}
.era-rd-theme-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
color:var(--rd-text-3);transition:color .25s;position:relative;z-index:2}
.era-rd-theme-thumb{
position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:var(--rd-accent);
box-shadow:0 2px 10px rgba(0,0,0,.25);transition:left .28s cubic-bezier(.4,0,.2,1),background .35s;z-index:1}
#s-chapter.era-rd-dark .era-rd-icon-moon{color:#fff}
#s-chapter.era-rd-dark .era-rd-icon-sun{color:var(--rd-text-3)}
#s-chapter.era-rd-light .era-rd-theme-thumb{left:calc(100% - 34px);background:#E8B84B}
#s-chapter.era-rd-light .era-rd-icon-sun{color:#1a1820}
#s-chapter.era-rd-light .era-rd-icon-moon{color:var(--rd-text-3)}
.era-rd-font{justify-self:center;display:inline-flex;align-items:center;gap:4px;
background:var(--rd-toolbar-bg);border:1px solid var(--rd-toolbar-border);border-radius:var(--radius-pill);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 8px 28px rgba(0,0,0,.22);padding:4px;transition:background .35s,border-color .35s}
.era-rd-font-btn{
min-width:44px;height:44px;border:none;border-radius:var(--radius-pill);background:transparent;
font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;color:var(--rd-toolbar-color);
cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
transition:background .2s,color .2s}
.era-rd-font-btn:hover,.era-rd-font-btn:active{background:var(--rd-accent-dim);color:var(--rd-accent)}
.era-rd-back{justify-self:end;min-width:48px;height:48px;border-radius:50%;
border:1px solid var(--rd-toolbar-border);background:var(--rd-toolbar-bg);color:var(--rd-toolbar-color);
font-family:var(--font-mono);font-size:1.25rem;line-height:1;cursor:pointer;
touch-action:manipulation;-webkit-tap-highlight-color:transparent;
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 8px 28px rgba(0,0,0,.22);transition:background .35s,border-color .35s,color .2s,transform .2s}
.era-rd-back:hover{color:var(--rd-accent);border-color:var(--rd-accent-dim);transform:translateY(-2px)}
/* Десктоп: глава в центральной колонке 1280px, по бокам — фон сайта */
@media (min-width:981px){
body.era-chapter-active .stars-bg,
body.era-chapter-active .cosmos-gradient{opacity:1}
#s-chapter{
left:0;right:0;width:100%;max-width:1280px;margin-left:auto;margin-right:auto;
border-left:1px solid var(--rd-border);border-right:1px solid var(--rd-border);
box-shadow:0 0 80px rgba(0,0,0,.45)}
.era-chapter-toolbar{
left:0;right:0;width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
}
/* ════════════ Мобильная адаптация ════════════ */
@media (max-width:980px){
.bento-grid{grid-template-columns:1fr}
.bento-right{grid-template-columns:1fr}
.bento-desc,.bento-quote,.bento-actions{grid-column:1}
.media-stack{padding:60px var(--margin);gap:16px}
.media-panel{grid-template-columns:1fr;min-height:auto}
.media-panel+.media-panel{margin-top:0}
.panel-col,.wave-wrap{padding:36px 24px}
.preorder-grid{grid-template-columns:1fr}
.pre-card-featured{transform:none}
.pre-card-featured:hover{transform:translateY(-4px)}
.char-grid{grid-template-columns:repeat(2,1fr)}
.series-header{flex-wrap:wrap;gap:16px}
.quote-section{padding:80px var(--margin)}
.bento-section,.preorder-section{padding-top:60px;padding-bottom:60px}
/* Планшет: жанры ниже меню (как на мобильной) */
.hero-section{padding-top:calc(var(--era-nav-clear) + 16px)}
.hero-eyebrow{margin-top:0;white-space:normal;line-height:1.45}
}
@media (max-width:760px){
:root{--margin:clamp(1rem,4vw,1.5rem);--era-nav-gap:20px}
p,h1,h2,h3,h4,li,.body-text,.panel-title,.panel-text,.bento-desc-text,.blog-title{
overflow-wrap:break-word;word-wrap:break-word}
.page-wrap{padding:0 18px 60px}
.page-hero-grid{grid-template-columns:1fr;gap:32px;padding-bottom:32px;margin-bottom:32px}
.page-hero-aside{text-align:left;justify-self:stretch;max-width:none}
.page-hero-aside .page-credo{text-align:left}
.page-title{font-size:clamp(1.75rem,8vw,2.75rem);overflow-wrap:break-word;word-break:break-word}
.section-title,.series-title{overflow-wrap:break-word;word-break:break-word}
/* Hero — перенос длинных строк */
.hero-section{padding:72px 18px 48px;overflow-x:clip}
.hero-content{width:100%;max-width:100%}
.hero-title{font-size:clamp(1.55rem,7.5vw,2.4rem)}
.hero-title-prefix,.hero-title-main{white-space:normal;overflow-wrap:break-word;word-break:break-word;text-wrap:balance}
.hero-eyebrow{white-space:normal;line-height:1.45;margin-top:0;font-size:var(--text-sm)}
.hero-author{font-size:var(--text-sm);overflow-wrap:break-word}
.hero-desc{max-width:100%;padding:0 4px}
.hero-ctas{width:100%;flex-direction:column;align-items:stretch;gap:10px}
.hero-ctas .btn-primary,.hero-ctas .btn-ghost,.hero-ctas .btn-link{width:100%;max-width:100%}
/* Кнопки — текст переносится, не вылезает */
.btn-primary,.btn-ghost,.btn-link,.nav-cta,.mm-cta{
white-space:normal;overflow-wrap:break-word;word-break:break-word;
text-align:center;line-height:1.35;hyphens:auto;
display:inline-flex;align-items:center;justify-content:center}
.btn-primary,.btn-ghost{padding:12px 18px;max-width:100%}
.bento-actions .btn-primary,.bento-actions .btn-ghost,.panel-btn-wrap .btn-primary{width:100%;max-width:100%}
.vol-detail-btns{flex-direction:column;align-items:stretch}
.vol-detail-btns .btn-primary,.vol-detail-btns .btn-ghost{width:100%;max-width:100%}
/* Bento / медиа / сетки */
.bento-cover,.bento-desc,.bento-quote,.bento-actions{padding:22px 18px}
.bento-desc-title{overflow-wrap:break-word;word-break:break-word}
.media-stack{padding:48px 18px;gap:14px;overflow-x:clip}
.panel-col,.wave-wrap{padding:28px 18px}
.panel-title{font-size:clamp(1.25rem,5.5vw,1.75rem)}
.wave-container{height:64px}
.wave-label{font-size:0.68rem;letter-spacing:0.2em}
.char-grid{grid-template-columns:1fr}
.wave-track{flex-direction:column;align-items:flex-start;gap:8px}
.wave-track span{overflow-wrap:break-word;word-break:break-word;max-width:100%}
.series-section{padding:60px 0 60px var(--margin)}
.series-header{flex-direction:column;align-items:flex-start}
.series-sub{overflow-wrap:break-word}
.film-strip{padding-left:18px;padding-right:18px}
/* Предзаказ и подвал */
.preorder-label{white-space:normal;text-align:center;justify-content:center;flex-wrap:wrap;line-height:1.45}
.preorder-sub{overflow-wrap:break-word;padding:0 8px}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.footer-bottom{flex-direction:column;gap:14px;text-align:center;align-items:center}
.footer-copy-block{justify-content:center;text-align:center}
.footer-copy{overflow-wrap:break-word;word-break:break-word;line-height:1.5;max-width:100%}
.footer-links a{overflow-wrap:break-word}
/* Внутренние страницы */
.pricing-grid{grid-template-columns:1fr}
.music-grid{grid-template-columns:1fr}
.vol-detail{grid-template-columns:1fr;gap:18px;padding:22px 18px}
.blog-grid{grid-template-columns:1fr}
.materials-tabs{flex-wrap:wrap;width:100%;justify-content:center;max-width:100%}
.materials-tab{white-space:normal;text-align:center;line-height:1.3;padding:9px 14px}
.article-foot{flex-direction:column;align-items:flex-start}
.article-foot .btn-link{width:100%;text-align:left;padding-left:0}
.vr-header{flex-wrap:wrap;gap:14px}
.vr-title{overflow-wrap:break-word;word-break:break-word}
/* Elementor-обёртки */
.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap{
max-width:100%!important;overflow-wrap:break-word;word-break:break-word}
.era-chapter-wrap{padding:24px 18px 24px}
.era-rd-theme-track{width:84px;height:44px;padding:0 12px}
.era-rd-theme-thumb{width:34px;height:34px;top:5px}
#s-chapter.era-rd-light .era-rd-theme-thumb{left:calc(100% - 39px)}
.era-chapter-head{font-size:calc(clamp(1.35rem, 5.5vw, 1.85rem) * var(--rd-font-scale, 1))}
.era-chapter-toolbar{grid-template-columns:1fr auto 1fr;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.era-rd-font-btn{min-width:44px;height:44px}
.era-rd-back{min-width:44px;height:44px}
/* Удобные тач-цели */
.nav-cta,.btn-primary,.btn-secondary,.mm-links a,.vol-tab{min-height:44px}
}
@media (max-width:520px){
.footer-grid{grid-template-columns:1fr}
.preorder-form,.contact-form,.preorder-form.au{padding:26px 20px}
.hero-title{font-size:clamp(1.35rem,8vw,1.9rem)}
.hero-ctas{gap:8px}
.vol-tabs{gap:6px;justify-content:flex-start}
.vol-tab{padding:10px 12px;font-size:0.65rem;white-space:normal;text-align:center;line-height:1.25}
.cover-roman{font-size:6rem}
.vol-cover-num{font-size:5rem}
.mm-links a{font-size:1.15rem;padding:12px 4px;white-space:normal;line-height:1.3}
.quote-text{font-size:var(--text-lg);padding:0 4px}
.media-stack{padding:40px 16px;gap:12px}
.panel-col,.wave-wrap{padding:24px 16px}
.wave-container{height:56px}
.pre-card{padding:28px 20px}
.contact-form{padding:26px 18px}
.era-page-shell{padding:88px 18px 32px}
.era-page-header{margin-bottom:28px;gap:12px}
.era-page-brand{font-size:0.72rem;max-width:100%;white-space:normal;line-height:1.25}
.era-page-title{font-size:clamp(1.45rem,7vw,2rem)}
.era-page-content{overflow-wrap:break-word;word-wrap:break-word}
.era-page-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.era-page-elementor-root{padding-bottom:32px}
.era-page-elementor-root .elementor-section.elementor-section-stretched{
width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
}
/* Ридер: сообщение вместо текста главы */
.era-reader-msg{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:24px 0}
.era-reader-msg p{margin:0;max-width:560px;line-height:1.7}