/* Общая шапка fun.eto-digital.com.
   Отдаётся с /shell/, подключается и галереей, и каждым приколом —
   правится в одном месте. Здесь же живут фирменные токены,
   чтобы приколы могли ими пользоваться. */

:root{
  --eto-bg:#F4F3EF;
  --eto-bg2:#ECE9E2;
  --eto-card:#FBFAF7;
  --eto-fg:#161310;
  --eto-muted:rgba(22,19,16,.52);
  --eto-line:rgba(22,19,16,.14);
  --eto-line-strong:rgba(22,19,16,.26);
  --eto-accent:#FF3B21;
  --eto-mono:'SFMono-Regular',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --eto-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --eto-head-h:57px;
}

/* Тёмная страница — например, сам прикол — просит шапку в инверсии */
.shell-head[data-theme="dark"]{
  --eto-bg:#161310;
  --eto-fg:#F4F3EF;
  --eto-muted:rgba(244,243,239,.55);
  --eto-line:rgba(244,243,239,.16);
  --eto-line-strong:rgba(244,243,239,.3);
}

.shell-head{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px clamp(20px,5vw,80px);
  background:color-mix(in srgb, var(--eto-bg) 72%, transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--eto-line);
  color:var(--eto-fg);
  /* Типографику задаём целиком, а не только семейство: шапку вставляют в
     чужие страницы, и раньше она наследовала у них font-size с line-height.
     У страницы со своим `font:15px/1.5` шапка вырастала с 57px до 62 — то
     есть --eto-head-h ниже начинал врать на 5px, и отступ body переставал
     совпадать с реальной высотой. Значения те же, что были по факту у
     приколов без своего шрифта. */
  font-family:var(--eto-sans);
  font-size:16px;
  line-height:normal;
}

.shell-logo{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.shell-mark{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:19px;
}
.shell-sub{
  font-family:var(--eto-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--eto-muted);
}

.shell-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,38px);
  font-family:var(--eto-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.shell-link{
  position:relative;
  text-decoration:none;
  color:var(--eto-muted);
  padding:4px 0;
  transition:color .16s ease;
}
.shell-link:hover{color:var(--eto-fg)}
.shell-link[aria-current="page"]{color:var(--eto-fg)}
.shell-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:var(--eto-accent);
}
.shell-link:focus-visible{
  outline:2px solid var(--eto-accent);
  outline-offset:4px;
}

/* Отступ под фиксированной шапкой — вешается на страницу целиком */
.shell-offset{padding-top:var(--eto-head-h)}

@media (prefers-reduced-motion:reduce){
  .shell-link{transition:none}
}