/* Career Idol Lab – общие стили: шапка, подвал, типографика, темы.
   Подключён на всех страницах. Правка здесь меняет весь сайт. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ivory:#f5f0e6; --dark:#0b0906; --ink:#1a160e; --cream:#ece2cd;
  --gold:#c9a84c; --gold-d:#b3902f; --gold-l:#d8bd6e;
  --serif:'Cormorant Garamond',Georgia,serif; --mono:'DM Mono',monospace;
  /* theme-driven tokens (light default) */
  --bg:var(--ivory); --fg:var(--ink); --logo:var(--ink);
  --accent:var(--gold-d); --dot:#c9a84c; --hair:rgba(26,22,14,.14);
}
body.dark{
  --bg:var(--dark); --fg:var(--cream); --logo:var(--cream);
  --accent:var(--gold-l); --dot:#d8bd6e; --hair:rgba(201,168,76,.16);
}
html{scroll-behavior:smooth}
#vbg{position:fixed;inset:0;z-index:0;pointer-events:none}
body{
  background:var(--bg); color:var(--fg); font-family:var(--serif); font-weight:300;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease; min-height:100vh;
  display:flex; flex-direction:column;
}

/* ============ HEADER ============ */
.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:24px clamp(20px,4vw,54px) 16px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair);
  transition:padding .45s ease, gap .45s ease;
}
.brand{order:1; display:block; line-height:0; text-decoration:none}
.brand-svg{display:block; height:auto; overflow:visible; transition:width .45s ease}
.brand-hero{width:clamp(250px,30vw,360px)}
.brand-compact{display:none; width:clamp(196px,22vw,250px)}
/* light theme recolours the baked-in dark fills (grid stays gold) */
body.light .brand-svg path[fill="#ece2cd"]{fill:#1a160e}
body.light .brand-svg path[fill="#d8bd6e"]{fill:#b3902f}
@media(prefers-reduced-motion:reduce){.brand-svg *{animation:none!important}}

/* nav – centred UNDER the mark */
.nav{order:2; display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.4vw,36px)}
.nav a.link{
  font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:.02em;
  color:var(--fg); text-decoration:none; position:relative; padding:3px 1px; opacity:.82;
  transition:opacity .25s;
}
.nav a.link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .3s ease;
}
.nav a.link:hover{opacity:1}
.nav a.link:hover::after,.nav a.link[aria-current="page"]::after{transform:scaleX(1)}
.nav a.link[aria-current="page"]{opacity:1}

/* utility cluster pinned top-right */
.utils{position:absolute; top:20px; right:clamp(20px,4vw,54px); display:flex; align-items:center; gap:10px}
.ctl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); background:transparent; border:1px solid var(--hair);
  padding:8px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .25s,background .25s;
}
.ctl:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ctl svg{display:block}
.req{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); background:transparent; border:1px solid var(--accent);
  padding:9px 17px; text-decoration:none; white-space:nowrap;
  transition:background .25s,color .25s;
}
.req:hover{background:var(--accent); color:var(--bg)}
.icon-btn{padding:8px 10px}
#theme svg{width:16px;height:16px;display:block}
#theme .ico-sun,#theme .ico-moon{display:none}
body.dark #theme .ico-sun{display:block}
body.light #theme .ico-moon{display:block}
/* джаз – значок ноты (винил живёт на фоне) */
.note{background:none;border:none;padding:7px;cursor:pointer;color:var(--accent);line-height:0;opacity:.72;transition:opacity .25s,filter .3s}
.note:hover{opacity:1}
.note.playing{opacity:1;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent));animation:notebob 1.9s ease-in-out infinite}
@keyframes notebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.note.playing{animation:none}}

/* ---- shrunk state (on scroll): one slim row ---- */
.site-head.shrunk{flex-direction:row; justify-content:space-between; gap:22px; padding:11px clamp(20px,4vw,54px)}
.site-head.shrunk .brand{order:1}
.site-head.shrunk .brand-hero{display:none}
.site-head.shrunk .brand-compact{display:block}
.site-head.shrunk .nav{order:2; flex:1; justify-content:center}
.site-head.shrunk .utils{position:static; order:3}

/* hamburger (mobile) */
.burger{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--fg)}
.burger span{display:block; width:22px; height:1.4px; background:currentColor; margin:5px 0; transition:.3s}
.burger.open span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

@media(max-width:860px){
  /* single centred row on phones (no two-tier); scroll shrink disabled visually */
  .site-head,.site-head.shrunk{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    flex-direction:row; gap:16px; padding:12px clamp(16px,4vw,24px);
  }
  .burger{display:block; grid-column:1; grid-row:1; justify-self:start}
  .brand{grid-column:2; grid-row:1; justify-self:center}
  .brand-hero,.site-head.shrunk .brand-hero{display:block; width:clamp(178px,50vw,224px)}
  .brand-compact,.site-head.shrunk .brand-compact{display:none}
  .utils,.site-head.shrunk .utils{position:static; grid-column:3; grid-row:1; justify-self:end; gap:6px; order:0}
  /* «Связаться» остаётся в шапке и на телефоне – компактной */
  .utils .req{display:inline-block; font-size:9px; letter-spacing:.1em; padding:9px 11px}
  .nav .req{display:none}
  .ctl{padding:8px 9px; letter-spacing:0}
  .note svg{width:17px;height:17px}
  .nav,.site-head.shrunk .nav{
    position:fixed; inset:0 0 auto 0; top:0; padding:104px 34px 44px; z-index:55;
    flex:none; flex-direction:column; align-items:flex-start; gap:6px;
    background:var(--bg); border-bottom:1px solid var(--hair);
    transform:translateY(-100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .nav.open{transform:translateY(0)}
  .nav a.link{font-size:27px; padding:10px 0}
}
@media(max-width:560px){
  .site-head,.site-head.shrunk{gap:8px; padding:11px 14px}
  .brand-hero,.site-head.shrunk .brand-hero{width:clamp(128px,38vw,170px)}
  .utils,.site-head.shrunk .utils{gap:2px}
  .note{padding:5px}
  .note svg{width:16px;height:16px}
  .ctl{padding:7px}
  #theme svg{width:15px;height:15px}
  .utils .req{font-size:8.5px; letter-spacing:.06em; padding:8px 9px}
}
@media(min-width:861px){ .nav .req{display:none} }

/* ============ PAGE BODY (placeholder) ============ */
main{position:relative; z-index:1; flex:1 0 auto; max-width:760px; margin:0 auto; padding:clamp(70px,12vh,150px) 26px}
.eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); opacity:.7; margin-bottom:22px}
.page-h{font-size:clamp(34px,6vw,62px); font-weight:400; line-height:1.04; letter-spacing:-.012em}
.page-h em{font-style:italic}
.page-p{font-size:clamp(16px,2vw,19px); margin-top:24px; max-width:60ch; opacity:.82}
.hint{margin-top:60px; padding-top:24px; border-top:1px solid var(--hair); font-style:italic; font-size:15px; opacity:.6}

/* ============ FOOTER ============ */
.site-foot{position:relative; z-index:1; flex-shrink:0; border-top:1px solid var(--hair); padding:78px 0 46px; text-align:center}
.foot-wrap{max-width:820px; margin:0 auto; padding:0 26px}
.finale-heading{font-size:clamp(18px,2.2vw,24px); font-weight:300; font-style:italic; opacity:0; margin-bottom:30px}
.finale-heading.built{opacity:1}
.finale-heading .pw{display:inline-block; opacity:0; transform:translateY(8px)}
.finale-heading.reveal .pw{animation:fadeUp .85s ease forwards; animation-delay:calc(var(--i)*.12s)}
@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:.55;transform:none}}
.cta{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent); text-decoration:none;
  border:1px solid var(--hair); padding:14px 36px; margin-bottom:54px;
  opacity:0; transform:translateY(6px);
  transition:opacity .7s ease,transform .7s ease,border-color .25s,background .25s;
}
.cta.show{opacity:1; transform:none}
.cta:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.band{width:min(680px,94%); height:170px; margin:6px auto -50px}
.band canvas{width:100%; height:100%; display:block; pointer-events:none}
.lockup{font-family:var(--serif); font-weight:300; font-size:clamp(28px,5vw,54px); letter-spacing:.20em; color:var(--accent); line-height:1; white-space:nowrap}
.ltr{display:inline-block; opacity:0; transform:translateY(10px)}
.ltr.sp{width:.30em}
.lockup.reveal .ltr{animation:shimmerIn 1.15s ease forwards; animation-delay:calc(var(--i)*.11s)}
@keyframes shimmerIn{
  0%{opacity:0;transform:translateY(10px)}18%{opacity:.5}32%{opacity:.16}
  48%{opacity:.85}64%{opacity:.34}84%{opacity:1;transform:none}100%{opacity:.9;transform:none}
}
.ltr.reg{font-size:.20em; letter-spacing:0; vertical-align:super; opacity:0}
.lockup.reveal .ltr.reg{animation:shimmerIn 1.15s ease forwards; animation-delay:calc(var(--i)*.11s)}
.descriptor{font-family:var(--serif); font-size:clamp(11px,1.3vw,14px); letter-spacing:.34em; text-transform:uppercase; color:var(--accent); opacity:0; margin-top:15px; transition:opacity .9s ease}
.descriptor.show{opacity:.62}
.foot-meta{margin-top:60px; display:flex; flex-wrap:wrap; gap:6px 26px; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.5}
.foot-meta a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s}
.foot-meta a:hover{border-color:var(--accent)}
.foot-rights{display:none;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.4;text-align:center}
.p-article .foot-rights{display:block}
/* иконки в подвале */
.foot-soc{margin-top:44px; display:flex; justify-content:center; gap:14px}
.soc{width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); color:var(--accent);
  opacity:.75; transition:opacity .3s, border-color .3s, background .3s, transform .3s}
.soc svg{width:19px;height:19px;max-width:19px;max-height:19px;display:block}
.soc-soon{opacity:.3;cursor:default;border-style:dashed}
.soc-soon:hover{opacity:.3;transform:none;background:none;border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.soc:hover{opacity:1; border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); transform:translateY(-2px)}

/* плавающая кнопка связи */
.fab{position:fixed; right:24px; bottom:24px; z-index:40; width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center; padding:4px; text-decoration:none;
  background:conic-gradient(from 210deg,var(--gold-l),var(--gold),var(--gold-d),var(--gold),var(--gold-l));
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none;
  transition:opacity .45s ease, transform .45s ease}
body.light .fab{box-shadow:0 8px 24px rgba(26,22,14,.18)}
.fab.show{opacity:1; transform:none; pointer-events:auto}
.fab-in{width:100%; height:100%; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-deep,var(--bg)); overflow:hidden}
.fab svg{width:32px;height:32px;max-width:32px;color:var(--accent)}
.fab img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.fab::after{content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  animation:fabRing 3.6s ease-in-out infinite}
@keyframes fabRing{0%,100%{opacity:.25; transform:scale(1)} 50%{opacity:.6; transform:scale(1.05)}}
.fab:hover{transform:translateY(-3px)}
@media(max-width:640px){
  .fab{right:16px; bottom:16px; width:56px; height:56px}
  .fab svg{width:27px; height:27px}
  .foot-soc{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){.fab::after{animation:none}}
/* подсказка о музыке */
.note-hint{position:fixed;z-index:60;padding:9px 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.note-hint.show{opacity:1;transform:none}
@media(max-width:560px){.note-hint{font-size:9px;padding:8px 11px}}