/* Оду Иво — стили раздела статей (общие токены повторяют лендинг) */
:root{
  --bg:#0f0a1c; --bg2:#160f29; --card:#1b1232; --violet:#8e5bd0; --lav:#d6c6f5; --teal:#5fd8cc; --gold:#e8c27a; --gold2:#b98c3e;
  --text:#efe8fb; --mute:rgba(239,232,251,.68); --line:rgba(232,194,122,.22);
  --display:'Forum',serif; --serif:'Cormorant Garamond',serif; --sans:'Manrope',system-ui,sans-serif;
  --pad:clamp(18px,4.5vw,64px); --ease:cubic-bezier(.16,1,.3,1);
  /* поверхность карточек: заметно светлее фона, с золотой кромкой и мягкой тенью */
  --card-grad:linear-gradient(180deg,rgba(52,34,92,.92),rgba(30,19,56,.97));
  --card-line:rgba(232,194,122,.34);
  --card-shadow:0 18px 50px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
  --card-hover:0 28px 70px rgba(0,0,0,.5),0 0 44px rgba(142,91,208,.28),inset 0 1px 0 rgba(255,255,255,.09);
}
*{-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{color:var(--text);font:400 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold)}
::selection{background:var(--gold);color:var(--bg)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:860px}
main{flex:1}

/* background */
.sky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-2}
.nebula{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.nebula i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3}
.nebula i:nth-child(1){width:62vw;height:62vw;left:-20vw;top:-22vw;background:radial-gradient(circle,#5b2aa0,transparent 65%)}
.nebula i:nth-child(2){width:52vw;height:52vw;right:-16vw;top:38vh;background:radial-gradient(circle,#1f6f78,transparent 65%)}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(8,5,16,.75) 100%)}
@media (max-width:760px){.nebula i{filter:blur(60px)}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 28px;border-radius:999px;font:700 15px var(--sans);letter-spacing:.02em;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s}
.btn--gold{background:linear-gradient(180deg,#f4d9a0,var(--gold) 50%,#d2a456);color:#24123f;box-shadow:0 10px 40px rgba(232,194,122,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--gold:hover{box-shadow:0 14px 60px rgba(232,194,122,.55);transform:translateY(-2px)}
.btn--ghost{border:1px solid rgba(232,194,122,.5);color:var(--gold);background:rgba(15,10,28,.4)}
.btn--ghost:hover{background:rgba(232,194,122,.12)}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn--ghost:active{background:rgba(232,194,122,.22)}
.btn:focus-visible{outline-offset:4px;border-radius:999px}

/* nav (same as the landing) */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;background:rgba(15,10,28,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav__logo{display:flex;align-items:center;gap:12px;font:400 24px var(--display);letter-spacing:.04em}
.nav__logo img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(232,194,122,.6),0 0 20px rgba(142,91,208,.6)}
.nav__links{display:flex;gap:30px;font:500 14px var(--sans);color:var(--mute)}
.nav__links a{transition:color .3s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--gold)}
.nav__right{display:flex;align-items:center;gap:12px}
.nav .btn{padding:12px 22px;font-size:14px}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid rgba(232,194,122,.5);background:rgba(15,10,28,.4);z-index:2}
.burger i{position:absolute;left:14px;right:14px;top:50%;height:1.5px;background:var(--gold);transition:transform .4s var(--ease)}
.burger i:nth-child(1){transform:translateY(-5px)}.burger i:nth-child(2){transform:translateY(4px)}
.nav.is-open .burger i:nth-child(1){transform:rotate(45deg)}.nav.is-open .burger i:nth-child(2){transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:calc(90px + env(safe-area-inset-top)) var(--pad) calc(40px + env(safe-area-inset-bottom));background:rgba(15,10,28,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu__links{display:flex;flex-direction:column;gap:6px}
.menu__links a{display:flex;align-items:baseline;gap:14px;padding:10px 0;font:400 clamp(26px,6vw,36px)/1.1 var(--display);border-bottom:1px solid var(--line)}
.menu__links a:active{color:var(--gold)}
.menu__links a small{font:600 12px var(--sans);letter-spacing:.2em;color:var(--teal)}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.menu__foot .btn{flex:1 1 auto}
@media (max-width:980px){.nav__links{display:none}.burger{display:block}}

/* music button: bottom-left on desktop, in the header next to the burger on phones/tablets */
.music-fab{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));z-index:75;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(27,18,50,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(232,194,122,.55);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 30px rgba(232,194,122,.15);color:var(--text);font:600 14px var(--sans);transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}
.music-fab:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 40px rgba(232,194,122,.3)}
.music-fab__ico{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f4d9a0,var(--gold) 50%,#d2a456);color:#24123f}
.music-fab__eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.music-fab__eq b{width:3px;height:100%;background:currentColor;border-radius:2px;transform-origin:bottom;transform:scaleY(.25)}
.music-fab.is-on .music-fab__eq b{animation:eq .9s ease-in-out infinite}
.music-fab.is-on .music-fab__eq b:nth-child(2){animation-delay:-.3s}.music-fab.is-on .music-fab__eq b:nth-child(3){animation-delay:-.6s}.music-fab.is-on .music-fab__eq b:nth-child(4){animation-delay:-.45s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.music-fab__mute{width:24px;height:24px}
.music-fab:not(.is-on) .music-fab__eq,.music-fab.is-on .music-fab__mute{display:none}
.music-fab__txt small{display:block;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
@media (max-width:980px){
  .music-fab{position:static;width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(15,10,28,.4);box-shadow:none;border-color:rgba(232,194,122,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
  .music-fab:hover{transform:none;box-shadow:none}
  .music-fab__txt{display:none}
  .music-fab__ico{width:38px;height:38px}
  .music-fab__eq{height:14px}
  .music-fab__mute{width:20px;height:20px}
}
@media (max-width:560px){.nav .btn{display:none}.nav__logo{font-size:20px}}
body.menu-open{overflow:hidden}

/* page header */
.page{padding:calc(110px + env(safe-area-inset-top)) 0 40px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 13px var(--sans);color:rgba(239,232,251,.5);margin-bottom:26px}
.crumbs a:hover,.crumbs a:active{color:var(--gold)}
.crumbs li{list-style:none;display:flex;gap:10px}
.crumbs li+li::before{content:"✦";color:var(--gold);font-size:9px;line-height:20px}
.kick{display:inline-flex;align-items:center;gap:12px;font:600 13px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal)}
.kick::before{content:"✦";letter-spacing:0;color:var(--gold)}
.h1{font:400 clamp(38px,5.6vw,72px)/1.04 var(--display);margin-top:16px;text-shadow:0 0 50px rgba(142,91,208,.35)}
.lead{margin-top:18px;font-size:clamp(16px,1.3vw,19px);color:var(--mute);max-width:760px}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:14px;color:rgba(239,232,251,.5)}
.meta b{color:var(--gold);font-weight:600}

/* article */
.cover{position:relative;margin:34px 0 40px;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 60px rgba(142,91,208,.18);aspect-ratio:16/9;background:var(--card)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(15,10,28,.55))}
.prose{font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:rgba(239,232,251,.9)}
.prose>*+*{margin-top:1.25em}
.prose p:first-child::first-letter{float:left;font:400 4.2em/.82 var(--display);color:var(--gold);margin:.08em .14em 0 0;text-shadow:0 0 30px rgba(232,194,122,.5)}
.prose h2{font:400 clamp(26px,2.6vw,36px)/1.15 var(--display);margin-top:1.7em;color:var(--text)}
.prose h3{font:400 clamp(22px,2vw,28px)/1.2 var(--display);margin-top:1.4em}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding:14px 18px 14px 44px;border-radius:14px;background:linear-gradient(180deg,rgba(52,34,92,.6),rgba(30,19,56,.75));border:1px solid rgba(232,194,122,.28)}
.prose ul li::before{content:"✦";position:absolute;left:18px;top:15px;color:var(--gold)}
.prose ol{counter-reset:n}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:16px;top:12px;font:400 18px var(--display);color:var(--gold)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose hr{border:0;height:1px;background:var(--line);margin:2em 0}
.prose blockquote{padding:20px 24px;border-left:2px solid var(--gold);background:linear-gradient(180deg,rgba(52,34,92,.55),rgba(30,19,56,.7));border-radius:0 16px 16px 0;font-family:var(--serif);font-style:italic;font-size:1.15em}
.prose strong{color:var(--text);font-weight:600}
.src{margin-top:40px;font-size:13px;color:rgba(239,232,251,.45)}
.src a{color:var(--gold)}
.prose a:active{opacity:.7}

/* CTA box */
.cta{margin:60px 0 0;padding:clamp(28px,4vw,44px);border-radius:28px;border:1px solid rgba(232,194,122,.45);background:radial-gradient(circle at 20% 30%,rgba(142,91,208,.45),transparent 60%),linear-gradient(180deg,rgba(52,34,92,.9),rgba(30,19,56,.97));box-shadow:var(--card-shadow);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta h2{font:400 clamp(26px,3vw,38px)/1.1 var(--display)}
.cta p{margin-top:10px;color:var(--mute);font-size:15px}
.cta__btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.cta{grid-template-columns:1fr}.cta__btns .btn{flex:1 1 100%}}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pn a{display:block;padding:20px 22px;border-radius:18px;border:1px solid var(--card-line);background:var(--card-grad);box-shadow:var(--card-shadow);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.pn a:active{transform:scale(.985);border-color:var(--gold);transition-duration:.15s}
.pn a:hover{border-color:rgba(232,194,122,.75);transform:translateY(-3px);box-shadow:var(--card-hover)}
.pn small{display:block;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.pn b{font:400 20px/1.2 var(--display)}
.pn a.next{text-align:right}
@media (max-width:600px){.pn{grid-template-columns:1fr}.pn a.next{text-align:left}}

/* cards grid (section + hub) */
.sec{padding:clamp(50px,7vw,90px) 0}
.h2{font:400 clamp(30px,3.6vw,48px)/1.05 var(--display)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;border:1px solid var(--card-line);background:var(--card-grad);box-shadow:var(--card-shadow);transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.card:hover{transform:translateY(-6px);border-color:rgba(232,194,122,.75);box-shadow:var(--card-hover)}
.card:active{transform:scale(.985);border-color:var(--gold);transition-duration:.15s}
.card__img{position:relative;aspect-ratio:16/10;background:var(--card);overflow:hidden}
.card__img::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(44,28,80,.9))}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card small{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.card h3{font:400 24px/1.15 var(--display);margin:10px 0 8px}
.card p{font-size:14px;color:rgba(239,232,251,.74);flex:1}
.card span{margin-top:14px;color:var(--gold);font-size:14px;font-weight:600}
.card--sec .card__body{padding-top:26px}
.card--sec b{display:block;font:400 54px/1 var(--display);color:var(--gold);margin-bottom:6px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card--sec b{font-size:48px}
@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid,.grid--2{grid-template-columns:1fr}.card--sec .card__body{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}.card--sec b{grid-row:1/4;font-size:44px;margin:0;min-width:64px}.card--sec small,.card--sec h3,.card--sec p,.card--sec span{grid-column:2}.card--sec h3{margin:4px 0 6px}}

/* crystal catalogue list */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span,.chips a{font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--mute);background:rgba(52,34,92,.35)}
.chips a:active{background:rgba(232,194,122,.25)}
.chips a{color:var(--gold);border-color:rgba(232,194,122,.5)}
.chips a:hover{background:rgba(232,194,122,.12)}
.sub-h{font:400 22px/1.2 var(--display);margin-top:34px}

footer{border-top:1px solid var(--line);padding:40px 0 calc(40px + env(safe-area-inset-bottom));font-size:13px;color:rgba(239,232,251,.5);margin-top:60px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--gold)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}