/* V4 — эволюция утверждённого макета. Палитра выведена из кадра сцены. */

:root{
  --paper:#FBF6ED;        /* фон вне сцены, тёплый крем */
  --paper-2:#F3EADC;
  --wood:#D9BE97;
  --wood-deep:#8A6B47;
  --ink:#3B2E20;          /* основной текст */
  --ink-2:#6E5A44;
  --brass:#A98B4F;        /* латунь табличек */
  --olive:#7F8A5F;
  --dawn:#F6C989;

  --ease:cubic-bezier(.22,1,.36,1);
  --fast:160ms; --mid:220ms; --slow:460ms;

  --shadow:0 1px 2px rgba(59,46,32,.05),0 14px 34px -20px rgba(59,46,32,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Roboto Condensed',system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);padding:.6em 1.2em;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--ink);box-shadow:0 0 0 6px var(--paper);border-radius:6px}

/* ─── Шапка ─────────────────────────────────────────────── */
.site-head{
  display:flex;align-items:center;gap:2rem;
  padding:.9rem clamp(1rem,3vw,2.4rem);
  background:var(--paper);
}
.site-head__name{margin-right:auto}
.name{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.1;
}
.role{
  font-size:clamp(.72rem,1vw,.82rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-top:.2rem;
}
.motto{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:clamp(1rem,1.6vw,1.3rem);color:var(--ink-2);
  text-align:right;max-width:20em;
}
.burger{
  flex:none;width:46px;height:46px;border:1px solid rgba(59,46,32,.25);border-radius:12px;
  background:transparent;cursor:pointer;display:grid;place-content:center;gap:5px;
  transition:background var(--fast) var(--ease);
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--mid) var(--ease),opacity var(--fast)}
.burger:hover{background:var(--paper-2)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── Меню ──────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:50;
  background:rgba(251,246,237,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--mid) var(--ease);
}
.menu[hidden]{display:none}
.menu.open{opacity:1;pointer-events:auto}
.menu ol{list-style:none;text-align:center;padding:1rem}
.menu li{margin:.35em 0}
.menu a{
  display:inline-block;color:var(--ink);text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(1.25rem,3.2vh,1.8rem);line-height:1.35;
  border-bottom:1px solid transparent;
  transition:border-color var(--fast) var(--ease),color var(--fast);
}
.menu a:hover{border-bottom-color:var(--brass);color:var(--wood-deep)}
.menu__books a{display:block}

/* ─── Сцена (десктоп) ───────────────────────────────────── */
.hero{
  background:
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  display:flex;justify-content:center;
}
.stage{
  position:relative;
  width:min(100vw,calc((100svh - 84px)*16/9));
  aspect-ratio:2731/1536;
  overflow:hidden;
}
.stage__bg{display:block;width:100%;height:100%;object-fit:cover}
.stage__grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* Невидимые зоны-входы. Надписи запечены в кадр; зона даёт hover-отклик,
   плашку-подсказку и фокус. */
.obj{
  position:absolute;
  left:calc(var(--x)*1%);top:calc(var(--y)*1%);
  width:calc(var(--w)*1%);height:calc(var(--h)*1%);
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.obj::before{ /* мягкий световой отклик */
  content:"";position:absolute;inset:-4%;border-radius:inherit;
  background:radial-gradient(ellipse at 50% 55%,rgba(255,244,214,.34),rgba(255,244,214,0) 68%);
  opacity:0;transition:opacity var(--mid) var(--ease);
  pointer-events:none;
}
.obj:hover::before,.obj:focus-visible::before{opacity:1}
.obj:focus-visible{outline:3px solid var(--ink);box-shadow:0 0 0 6px rgba(251,246,237,.9)}

.cue{
  position:absolute;left:calc(var(--px,50)*1%);top:calc(var(--py,104)*1%);
  transform:translate(-50%,4px);
  white-space:nowrap;
  background:rgba(251,246,237,.96);color:var(--ink);
  font-family:'Roboto Condensed',sans-serif;font-weight:600;font-size:clamp(.78rem,1cqw,1rem);
  letter-spacing:.02em;
  padding:.4em .9em;border-radius:9px;box-shadow:var(--shadow);
  opacity:0;transition:opacity var(--mid) var(--ease),transform var(--mid) var(--ease);
  pointer-events:none;
}
.cue::after{content:" →"}
.obj:hover .cue,.obj:focus-visible .cue{opacity:1;transform:translate(-50%,0)}

/* ─── Мобильная лента ───────────────────────────────────── */
.mobile-flow{display:none}

/* ─── Секции ────────────────────────────────────────────── */
.sections{
  max-width:680px;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) 1.4rem 3rem;
}
.section{
  padding:2.2rem 0;border-top:1px solid rgba(59,46,32,.12);
  scroll-margin-top:90px;
}
.section h2{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-style:normal;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.015em;margin-bottom:.5em;
}
.section p{color:var(--ink-2);max-width:56ch}

.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ─── Панель раздела ────────────────────────────────────── */
.panel{
  border:none;border-radius:18px;
  background:var(--paper);color:var(--ink);
  width:min(560px,92vw);
  padding:2.4rem 2.2rem 2.2rem;
  box-shadow:0 30px 80px -30px rgba(59,46,32,.45);
}
.panel::backdrop{background:rgba(59,46,32,.35)}
.panel h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;margin-bottom:.5em}
.panel p{color:var(--ink-2)}
.panel__close{
  position:absolute;top:.9rem;right:.9rem;
  width:40px;height:40px;border:none;border-radius:10px;
  background:var(--paper-2);color:var(--ink);font-size:1rem;cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.panel__close:hover{background:var(--wood)}

/* ─── Футер ─────────────────────────────────────────────── */
.site-foot{
  padding:1.6rem;text-align:center;color:var(--ink-2);
  font-size:.85rem;border-top:1px solid rgba(59,46,32,.1);
}

/* ─── Мобильная пересборка: полноэкранные кадры сцены ───────── */
@media (max-width:899px){
  .hero{display:none}
  .motto{display:none}

  /* на мобиле шапка — только кнопка меню; имя живёт на интро-кадре */
  .site-head{
    position:fixed;top:0;left:0;right:0;z-index:60; /* поверх меню: крестик-бургер должен закрывать */
    padding:calc(env(safe-area-inset-top) + 10px) 14px 0;
    background:none;pointer-events:none;
  }
  .site-head__name{display:none}
  .burger{
    width:48px;height:48px;pointer-events:auto;
    background:rgba(251,246,237,.92);border-color:rgba(59,46,32,.18);
    box-shadow:0 2px 12px rgba(30,20,10,.18);
  }

  html{scroll-snap-type:y proximity;scroll-padding-top:0}

  .mobile-flow{display:block;background:var(--paper)}

  .mshot{
    position:relative;display:block;
    min-height:100vh;min-height:100dvh;
    overflow:hidden;
    scroll-snap-align:start;
    -webkit-tap-highlight-color:transparent;
  }
  .mshot > img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 62%;
  }

  /* интро: крупное имя на спокойном небе */
  .mshot--intro > img{object-position:center 30%}
  .mshot--intro::before{
    content:"Ирена Голикова";
    position:absolute;left:0;right:0;
    top:calc(env(safe-area-inset-top) + 68px);
    text-align:center;z-index:2;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
    font-size:clamp(2.1rem,9.5vw,2.7rem);color:#3B2E20;letter-spacing:-.02em;
    text-shadow:0 1px 14px rgba(251,246,237,.9),0 0 34px rgba(251,246,237,.7);
  }
  .mshot--intro::after{
    content:"психолог · семейный терапевт · автор методик";
    position:absolute;left:0;right:0;
    top:calc(env(safe-area-inset-top) + 126px);
    text-align:center;z-index:2;
    font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#4E3E2C;
    text-shadow:0 1px 10px rgba(251,246,237,.95);
  }
  .mshot__intro-hint{
    position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);
    text-align:center;color:rgba(251,246,237,.95);font-size:.85rem;letter-spacing:.06em;
    text-shadow:0 1px 8px rgba(30,20,10,.5);
  }
  .mshot__intro-hint .chev{display:block;font-size:1.3rem;line-height:.9;animation:chev 2.2s var(--ease) infinite}
  @keyframes chev{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:1}}
  @media (prefers-reduced-motion:reduce){.mshot__intro-hint .chev{animation:none}}

  /* нижняя плашка кадра: название раздела живым текстом + CTA */
  .mshot__plate{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:4rem 1.4rem calc(env(safe-area-inset-bottom) + 1.6rem);
    background:linear-gradient(180deg,rgba(30,20,10,0) 0%,rgba(30,20,10,.34) 34%,rgba(30,20,10,.62) 100%);
    display:flex;flex-direction:column;gap:.45rem;
  }
  .mshot__plate strong{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-style:normal;
    font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.12;letter-spacing:-.015em;
    color:#FBF6ED;max-width:76%;
    text-shadow:0 1px 10px rgba(30,20,10,.35);
  }
  .mshot__plate em{
    font-style:normal;color:rgba(251,246,237,.92);font-size:1rem;max-width:80%;
  }
  .mshot__plate em:empty{display:none}
  .mshot__cta{
    display:inline-flex;align-items:center;justify-content:center;
    align-self:flex-start;min-height:44px;padding:0 1.15rem;margin-top:.35rem;
    border:1px solid rgba(251,246,237,.65);border-radius:999px;
    color:#FBF6ED;font-family:'Roboto Condensed',sans-serif;font-weight:600;
    font-size:.95rem;letter-spacing:.04em;
    background:rgba(30,20,10,.18);
  }
  /* книжный экран: кадр сдвинут выше, чтобы HTML-названия не сидели на корешках */
  .mshot--books > img{object-position:center 18%}
  .mshot--books .mshot__plate{
    padding-top:6rem;
    background:linear-gradient(180deg,rgba(30,20,10,0) 0%,rgba(30,20,10,.45) 30%,rgba(30,20,10,.72) 100%);
  }
  .mshot--books .mshot__plate a{
    display:flex;flex-direction:column;text-decoration:none;margin-bottom:.55rem;
  }
  .mshot--books .mshot__plate strong{font-size:clamp(1.25rem,5.4vw,1.5rem)}

  /* последний кадр мягко сводится в фон секций */
  .mshot:last-of-type::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:18%;
    background:linear-gradient(180deg,rgba(251,246,237,0),var(--paper));
    pointer-events:none;
  }

  /* горизонтальный телефон: обычный поток, без кинотеатра */
  @media (orientation:landscape) and (max-height:520px){
    html{scroll-snap-type:none}
    .mshot{min-height:auto}
    .mshot > img{position:static;height:auto;aspect-ratio:9/16}
  }

  /* Секции — источник для панели и no-JS-фоллбек; лентой они дублируют
     предметы, поэтому видимы только адресованные напрямую (#якорь). */
  .sections{padding-top:0;padding-bottom:0}
  .section{display:none}
  .section:target{display:block;padding-top:6rem}
}
@media (min-width:900px){
  .mobile-flow{display:none}
}