/* etrog.рф — shared base styles (header, footer, etrog-cursor, 12-col grid, типографика).
   Каждая страница импортит это + добавляет свои specific styles inline. */

:root{
  --bg:#fbfbfb; --text:#000; --muted:#979797; --divider:#ececec;
  --accent:#f9d51a;

  --pad-x:8px; --gutter:24px; --header-h:56px;
  --nav-gap:clamp(40px, 12vw, 173px);
  --ease:cubic-bezier(.2,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth}
::selection{background:var(--accent);color:#000}
a{color:inherit}
button{font:inherit;cursor:pointer;background:transparent;border:0;color:inherit}

/* — etrog cursor — */
.etrog{
  position:fixed;left:0;top:0;
  width:47px;height:28px;
  pointer-events:none;z-index:1;
  transform-origin:center center;
  opacity:0;
  transition:opacity 220ms ease-out;
}
.etrog.visible{opacity:1}
.etrog svg{display:block;width:100%;height:100%;overflow:visible}
@media(pointer:coarse){.etrog{display:none}}

/* — ЖМЯК — */
.zhmiak{
  position:fixed;left:0;top:0;
  width:110px;height:40px;
  pointer-events:none;z-index:50;
  transform:translate(-50%, -50%) scale(0) rotate(-12deg);
  transform-origin:center;
  opacity:0;overflow:visible;
}
.zhmiak text{
  font-family:'Inter',sans-serif;font-weight:900;font-size:24px;
  letter-spacing:-.02em;fill:var(--text);
}
@keyframes zhmiak-pop{
  0%   { opacity:0; transform:translate(-50%, -50%)              scale(0)    rotate(-12deg); }
  15%  { opacity:1; transform:translate(-50%, -50%)              scale(1.4)  rotate(-12deg); }
  35%  { opacity:1; transform:translate(-50%, -50%)              scale(1)    rotate(-12deg); }
  70%  { opacity:1; transform:translate(-50%, calc(-50% - 6px))  scale(1.15) rotate(-12deg); }
  100% { opacity:0; transform:translate(-50%, calc(-50% - 14px)) scale(1.4)  rotate(-12deg); }
}
.zhmiak.show{animation:zhmiak-pop 700ms cubic-bezier(.5, 0, .3, 1) forwards}
@media (prefers-reduced-motion:reduce){.zhmiak{display:none}}

/* — header — Swiss layout: brand col 1 + 4 nav items с равномерным gap 173px (12vw) */
header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);
  padding:0 var(--pad-x);
  display:grid;grid-template-columns:1fr repeat(4, auto);
  column-gap:var(--nav-gap);
  align-items:center;background:var(--bg);z-index:100;
}
.brand{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);font-weight:500;text-decoration:none;
}
header nav{display:contents}
header nav a{
  font-size:13px;color:var(--text);text-decoration:none;
  transition:opacity 200ms var(--ease);
}
header nav a:hover{opacity:.55}
header nav a.active{font-weight:500;border-bottom:2px solid var(--accent)}

main{padding-top:var(--header-h);position:relative;z-index:2}
section{position:relative;z-index:2}

/* — 12-col grid utility — */
.grid12{
  display:grid;grid-template-columns:repeat(12, 1fr);
  column-gap:var(--gutter);padding:0 var(--pad-x);
}

/* — section-head pattern — */
.section-head{
  display:grid;grid-template-columns:repeat(12, 1fr);column-gap:var(--gutter);
  padding:0 var(--pad-x);
  align-items:center;margin-bottom:32px;
  font-size:11px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;
}
.section-head > :first-child{grid-column:1 / span 6}
.section-head > :last-child{grid-column:7 / span 6;justify-self:end}

/* — typography helpers — */
.h-display{
  font-size:clamp(40px,8.6vw,140px);
  font-weight:900;line-height:.9;
  letter-spacing:-.045em;text-transform:uppercase;
}
.h-display .l{display:block}
.h-display .yellow{color:var(--accent)}

.h-section{
  font-size:clamp(36px,5.4vw,76px);
  font-weight:900;line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
}
.h-section span{display:block}

.body-lg{font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:#333;max-width:62ch}
.body-md{font-size:13px;line-height:1.5}
.body-sm{font-size:11px;line-height:1.4;color:var(--muted);letter-spacing:.05em}
.body-xs{font-size:10px;line-height:1.4;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}

/* — footer — */
footer.colophon{
  padding:80px var(--pad-x) 32px;
  border-top:1px solid var(--divider);
  display:grid;grid-template-columns:repeat(12, 1fr);column-gap:var(--gutter);
}
footer.colophon > h4{
  grid-column:1 / span 12;
  font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:32px;font-weight:500;
}
footer.colophon .col-meta{grid-column:1 / span 6}
footer.colophon .col-glos{grid-column:7 / span 6}
footer.colophon dl{display:grid;grid-template-columns:auto 1fr;gap:8px 32px;font-size:12px;line-height:1.5}
footer.colophon dt{
  color:var(--muted);text-transform:uppercase;
  font-size:10px;letter-spacing:.16em;padding-top:3px;
}
footer.colophon dd{font-size:12px}
footer.colophon .footer-end{
  grid-column:1 / -1;
  margin-top:64px;font-size:10px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;
  display:flex;justify-content:space-between;
}
footer.colophon .footer-end a{text-decoration:none;color:var(--muted)}
footer.colophon .footer-end a:hover{color:var(--text)}

/* — buttons — */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 24px;
  border:1px solid var(--text);
  font-size:13px;letter-spacing:.05em;
  color:var(--text);text-decoration:none;
  background:transparent;cursor:pointer;
  transition:background 200ms var(--ease), color 200ms var(--ease);
}
.btn:hover{background:var(--text);color:var(--bg)}
.btn.primary{background:var(--text);color:var(--bg)}
.btn.primary:hover{background:transparent;color:var(--text)}
.btn:disabled{opacity:.3;pointer-events:none}

/* — reveal-on-scroll — */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms ease-out, transform 700ms var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* — debug grid (G to toggle) — */
.grid-overlay{
  position:fixed;inset:var(--header-h) 0 0 0;
  pointer-events:none;z-index:9500;
  display:grid;grid-template-columns:repeat(12, 1fr);
  column-gap:var(--gutter);padding:0 var(--pad-x);
}
.grid-overlay span{
  background:rgba(255, 64, 64, .07);
  border-left:1px solid rgba(255, 64, 64, .25);
  border-right:1px solid rgba(255, 64, 64, .25);
}

/* — chip — для wordstat-snippets — */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;letter-spacing:.1em;
  padding:3px 8px;border-radius:1px;
  font-variant-numeric:tabular-nums;text-transform:uppercase;
}
.chip.HIGH{background:#000;color:#fff}
.chip.AVERAGE{background:var(--divider);color:var(--text)}
.chip.LOW{background:transparent;color:var(--muted);border:1px solid var(--divider)}

/* — mobile — */
@media (max-width:720px){
  :root{--pad-x:16px;--gutter:12px;--nav-gap:14px}
  header{
    grid-template-columns:1fr;grid-template-rows:auto auto;
    height:auto;padding:8px var(--pad-x);gap:6px;
  }
  header nav{display:flex;gap:14px;font-size:11px}
  .section-head{grid-template-columns:1fr;gap:12px}
  .section-head > :first-child,.section-head > :last-child{grid-column:1;justify-self:start}
  footer.colophon{grid-template-columns:1fr}
  footer.colophon > h4,footer.colophon .col-meta,footer.colophon .col-glos{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}