:root{
  --bg: #f1f1f1; /* f2f2f2 */
  --text: #0b0b0b;
  --muted: #1c1c1c;
  --accent: #55c35a;
  --page-pad: var(--logo-size);
  --icon-size: 31px;
  --logo-size: 45px;
  --icon-gap: 25px;
  --h1-size: 68pt;
  --h2-size: 36pt;
  --body-size: 11.5pt;
  --line-height: 1.40;
  --max-line-chars: 72ch;
  --inactivity-ms: 3000;
  --btn-font-size: 12pt;
  --image-lag: 0.35s;
  --img-radius: calc(var(--logo-size) / 2);
  --reveal-duration: 0.35s;
  --reveal-step: 0.08s;
  --hint-pad-x: 10px;
  --hint-pad-y: 8px;
  --hint-text-width: calc((var(--max-line-chars) - var(--logo-size)) / 2);
  --hint-width: calc(var(--hint-text-width) + (var(--hint-pad-x) * 2));

  --lh-h1: .88;
  --lh-h2: 1.04;
  --lh-h3: 1.08;
  --lh-body: 1.4;
  --space-1: 11px;
}

/**********************************************
******************** . . . ********************
***********************************************
******************* ******* *******************
******************   *****   ******************
****************       *       ****************
***************        .        ***************
***************                 ***************
***************      T   T      ***************
***************                 ***************
***************   O  |   |  O   ***************
@sivaagressiva#       ___       Anton Sivatski©
***************                 ***************
***************    *       *    ***************
***************   ***     ***   ***************
*************** ******* ******* ***************
***********************************************
****************** sivatski *******************
***********************************************
******************** 2026 *********************
***************************************[+GPT]*/

/* © – All the attachments on my web page or portfolio pages, or which I send to you, are my intellectual property, please don't use them.
If You make a post with my works, sign my mane (Anton Sivatski · @sivaagressiva), my hashtag (#sivaagressiva) and/or my logo. Thank you! --i */

::selection{
  background: #ffd400;
  color: #0b0b0b;
  padding: 3px;
}
::-moz-selection{
  background: #ffd400;
  color: #0b0b0b;
  padding: 3px;
}
sup {
  font-size: 0.5em;
  vertical-align: super;
}

body.inverted{
  --bg: #0b0b0b;
  --text: #f2f2f2;
  --muted: #d0d0d0;
  --accent: #55c35a;
  hyphens: auto;
}

/* base */
*{box-sizing:border-box}
html,body{ height:100%; margin:0; padding:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-family:"Helvetica Neue","Helvetica",Arial,sans-serif; font-size:var(--body-size); line-height:var(--line-height); overflow-x:hidden; overscroll-behavior-x:none; overflow-wrap: break-word;}

/* page */
.page{
  min-height:100vh;
  overflow-y:auto;
/*  -webkit-overflow-scrolling:touch; а с этим что */
  background:var(--bg); }

/* top logo */
.top-logo{
  position:fixed;
  top:var(--page-pad);
  left:50%;
  transform:translateX(-50%);
  width:var(--logo-size);
  height:var(--logo-size);
  z-index:666;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  transition:opacity .5s ease;
  pointer-events:auto;
  cursor:pointer;
  overflow:visible;
}
.top-logo img{ width:var(--logo-size); height:var(--logo-size); display:block; }
/* circular blur around logo */
.top-logo::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: calc(var(--logo-size) + 12pt);
  height: calc(var(--logo-size) + 12pt);
  transform: translate(-50%, -50%);
  border-radius:50%;
  backdrop-filter: blur(18px) saturate(100%);
  -webkit-backdrop-filter: blur(18px) saturate(100%);
  background: rgba(255, 255, 255, 0.06);
  z-index:-1;
}

/* header right */
.header-right{
  position:fixed;
  top:var(--page-pad);
  right:var(--page-pad);
  display:flex;
  gap:var(--icon-gap);
  align-items:center;
  pointer-events:auto;
  transition:opacity .5s ease;
  z-index:130;
}
.header-right img{
  transition: filter .5s ease;
}
.icon-link, .btn-icon{
  width:var(--icon-size);
  height:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  color:var(--text);
  cursor:pointer;
}
#iconMenuBtn{
  position:relative;
}
.icon-link img, .btn-icon img{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
  object-fit:contain;
/*  vertical-align:middle; fail */
  margin:0;
  padding:0;
}
body.inverted .header-right img{
  filter: invert(1) grayscale(1) brightness(1);
}
body:not(.inverted) .header-right.gallery-dark img{
  filter: invert(1) grayscale(1) brightness(1);
}

body.inverted .invert{
  filter: invert(1) grayscale(1) brightness(1);
}

/* menu overlay */
.menu-overlay{
  position:fixed;
  inset:0;
  background: var(--bg);
  color:var(--text);
  z-index:120;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--reveal-duration) ease;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.menu-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.menu-shell{
  min-height:100%;
  padding: calc(var(--logo-size) * 3) var(--page-pad) calc(var(--logo-size) * 0.8);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--logo-size);
}
.menu-top,
.menu-bottom{
  display:grid;
  gap:var(--logo-size);
  align-items:start;
}
.menu-top{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.menu-bottom{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.menu-col{ min-width:0; }
.menu-link-h2,
.menu-link-h3{
  display:block;
  width: fit-content;
  color:var(--text);
  text-decoration:none;
  transition: color .5s ease;
}
.menu-link-h2{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:900;
  font-size:var(--h1-size); /* was h2 */
  line-height:var(--lh-h1);
  letter-spacing:-1px;
  margin:0 0 .4rem 0;
}
.menu-link-h3{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:100;
  font-size:20pt;
  line-height:var(--lh-h3);
  letter-spacing:+1px;
  margin:0 0 .4rem 0;
}
.menu-link-h2:hover,
.menu-link-h3:hover{
  color:var(--accent);
}
.menu-link-h2:visited,
.menu-link-h3:visited{
  color:var(--text);
}
.menu-link-h2:visited:hover,
.menu-link-h3:visited:hover{
  color:#8b81fe;
}

.menu-overlay .menu-item{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition: opacity var(--reveal-duration) ease calc(var(--i, 1) * var(--reveal-step)),
              transform var(--reveal-duration) ease calc(var(--i, 1) * var(--reveal-step)),
              color .5s ease 0s,
              border-color .5s ease 0s;
  transition-delay: calc(var(--i, 1) * var(--reveal-step)),
                    calc(var(--i, 1) * var(--reveal-step)),
                    0s,
                    0s !important;
}
.menu-overlay.is-open .menu-item{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.menu-overlay .panel-text{ max-width:none; }
.menu-overlay p,
.menu-overlay .panel-text{
  margin:0 0 var(--space-1) 0;
}
.menu-overlay p:last-child,
.menu-overlay .panel-text:last-child{
  margin-bottom:0;
}
.menu-open .page{ overflow:hidden; }
.menu-open #iconTottop,
.menu-open #iconHome{
  opacity:0;
  pointer-events:none;
}
.menu-open .blur-ico{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* generic hidden class used by inactivity logic */
.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .5s ease !important;
}

/* keep backwards compatibility for specific hidden targets (same 0.5s) */
.header-right.hidden, .top-logo.hidden, .intro-photo-wrap.hidden{
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}

/* задаём начальное скрытое состояние и длительность появление (2s) */
.intro-photo-wrap img.intro-photo-img {
  opacity: 0;                        /* start hidden */
  transition: opacity 3s ease;       /* плавный фейд 2 секунды */
  will-change: opacity;
}

/* когда панель становится видимой — картинка плавно появляется.
   добавляем небольшую дополнительную задержку, чтобы заголовок
   (overlay-title) успел появиться первым — отрегулируй var(--image-lag) */
:root { --image-lag: .5s; } /* можно менять: 0s..0.5s..1s по вкусу */
.panel.in-view .intro-photo-wrap img.intro-photo-img {
  opacity: 1;
  transition-delay: var(--image-lag);
}

/* если хочешь, чтобы при первой загрузке задержка была чуть длиннее,
   увеличь --image-lag в :root (например --image-lag: 0.6s;) */

/* форсируем скрытие для любых элементов скрываемых логикой */
.hide-on-inactivity.hidden,
.hidden.hide-on-inactivity {
  opacity: 0 !important;
  /* visibility убрана, управляем только через opacity + pointer-events */
  pointer-events: none !important;
  transform: translateY(0) !important;
  transition: opacity .5s ease !important;
}
.hide-on-inactivity { transition-delay: 0s !important; }

/* Добавлено: гарантируем переход для hide-on-inactivity */
.hide-on-inactivity { transition: opacity .5s ease, transform .5s ease; }

/* --- гарантированное скрытие кнопок до появления панели --- */
/* УБРАНО !important чтобы класс .hidden мог анимировать кнопку */
.btn-write {
  /* начальное состояние — полностью скрыты и не кликабельны до .panel.in-view */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition-property: opacity, transform, color, border-color;
  transition-duration: var(--reveal-duration), var(--reveal-duration), .5s, .5s;
  transition-timing-function: ease, ease, ease, ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step)),
                    calc(var(--i, 1) * var(--reveal-step)),
                    0s,
                    0s;
}

/* когда панель становится видимой — кнопка появляется с задержкой из --i */
.panel.in-view .btn-write {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: calc(var(--i, 1) * var(--reveal-step)),
                    calc(var(--i, 1) * var(--reveal-step)),
                    0s,
                    0s;
}

/* panels */
.panel{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top: var(--logo-size);
  padding-bottom: var(--logo-size);
  background:transparent;
  transition:background .25s ease,color .25s ease;
}
.panel-inner{
  width:100%;
  max-width:calc(var(--max-line-chars) + 2 * var(--page-pad));
  padding:2rem calc(var(--page-pad));
}
.panel .panel-inner{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}
.panel.in-view .panel-inner{
  opacity:1;
  transform:none;
}

/* ========== Reveal animation - универсальная, использует --i = порядок = 1,2,3... ========== */
.panel [style*="--i"]{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step));
}
.panel.in-view [style*="--i"]{
  opacity:1;
  transform:none;
}

/* allow --i to drive hashtag reveal even when nested */
.panel-inner .hashtag{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step));
}
.panel.in-view .panel-inner .hashtag{
  opacity:.6;
  transform:none;
}

/* support for intro-photo-wrap as ordered element */
.panel > .intro-photo-wrap{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step));
}
.panel.in-view > .intro-photo-wrap{
  opacity:1;
  transform:none;
}

/* INTRO panel specific */
.intro-panel{ position:relative; padding-top:0; padding-bottom:0; min-height:100vh; overflow:hidden; }

/* photo container — centered within viewport, image shown fully (no crop) */
.intro-photo-wrap{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  transition:opacity var(--reveal-duration) ease;
  position:relative; /* для overlay */
  z-index:1;
}
.intro-photo-wrap img.intro-photo-img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  display:block;
  z-index:1;
}

/* overlay title on intro image — centered and uses parent's --i (inherited) */
.intro-photo-wrap .overlay-title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  pointer-events:none;
  margin:0;
  color:var(--text);
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:700;
  font-size:var(--h1-size);
  line-height:var(--lh-h1);
  letter-spacing:-2px;
  /*  padding:0 .5rem; */
  padding-left: 35px;
  padding-right: 35px;
  word-break:break-word;
  width:100%;
  max-width: min(90ch, 100%);
  box-sizing:border-box;

  /* reveal behaviour (inherits --i from .intro-photo-wrap if not set inline) */
  opacity:0;
  transform: translateY(-10px) translateX(-50%) translateY(-50%);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i,1) * var(--reveal-step));
}
.panel.in-view .intro-photo-wrap .overlay-title{
  opacity:1;
  transform: translateX(-50%) translateY(-50%);
}

/* ensure highlight doesn't break centering */
.intro-photo-wrap .overlay-title .highlight{
  display:inline-block;
}

h1, h2, h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* typography — перенёс стили на теги, сохранил классы для совместимости */
h1{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:700;
  font-size:var(--h1-size);
  line-height:var(--lh-h1);
  color:var(--text);
  margin:0;
  letter-spacing:+2px;
  word-break:break-word; }

h2, .panel-title {
  margin:0 0 .5rem 0;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight: 900;
  font-size:var(--h2-size);
  color:var(--text);
  letter-spacing:-1px;
  line-height:var(--lh-h2);
  word-break:break-word;
}

h3{
  margin:0 0 .5rem 0;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:100;
  font-size:20pt;
  color:var(--text);
  letter-spacing: +1px;
  line-height:var(--lh-h3);
}

p, .panel-text{
  margin:0;
  color:var(--muted);
  letter-spacing: auto;
  max-width:var(--max-line-chars);
  text-align: left; /* <-- was justify */
  text-align-last:left;
  hyphens:auto;
  line-height:var(--lh-body);
}

/* dot leaders */
.dot-leader{
  display:flex;
  align-items:baseline;
  gap:0.6ch;
}
.dot-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition: opacity .3s ease;
  position:relative;
}
.dot-link:hover,
.dot-link:visited:hover{
  color:var(--text);
}
.dot-link:visited{
  color:var(--text);
}
.dot-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1.4em;
  transform:translateY(-50%);
  background: currentColor;
  opacity:0;
  /*   transition: opacity .5s ease; */
  z-index:0;
}
.dot-link .dot-leader{
  position:relative;
  z-index:1;
}
.dot-link:hover::after{
  opacity:.15;
}
.dot-leader .dot-label,
.dot-leader .dot-value{
  white-space:nowrap;
}
.dot-leader .dot-fill{
  flex:1 1 auto;
  overflow:hidden;
  min-width: 1ch;
  align-self: baseline;
  white-space: nowrap;
  line-height: 1;
}
.dot-leader .dot-fill::before{
  content:"........................................................................................................................................................................................................................................................................................................................................................................................";
  color: currentColor;
}

/* call icons sizing */
.call-icons{
  position: absolute;
  left: 50%;
  bottom: calc(var(--page-pad) + var(--logo-size));
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
  --call-size: calc(var(--logo-size) * 1.2);
  gap: var(--call-size);
}
.call-icons img{
  width: var(--call-size);
  height: auto;
  display: block;
}
.call-icons a:hover img,
.call-icons button:hover img{
  animation: btn-buzz 0.25s linear 2;
}
.call-icons button{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 600px) {
  .call-icons{
    --call-size: calc(var(--logo-size) * 2);
  }
}


/* subtitle-style container */
.subs{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:400;
  font-size:18pt;
  letter-spacing:0.5px;
  text-align:center;
  white-space: nowrap;
  min-height: calc(1.2em + 12pt);
}
.subs p{
  display:none;
}
.subs-line{
  display:inline-block;
  padding: 3pt 8pt;
  background: var(--text);
  color: var(--bg);
  opacity:1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.subs-line.is-hidden{
  opacity:0;
  transform: translateY(4px);
}
@media (max-width: 900px) {
  .subs{
    font-size:9pt;
  }
}

a,
.content-link {
  color: currentColor;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
  transition: color .4s ease, text-decoration-color .4s ease;
}
a:visited,
.content-link:visited {
  color: currentColor;
  text-decoration-color: currentColor;
}
a:hover,
.content-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
a:active,
.content-link:active {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
a:visited:hover,
.content-link:visited:hover {
  color: #8b81fe;
  text-decoration-color: #8b81fe;
}

a.dot-link:visited{
  color:var(--text);
}

/* buttons */
.btn-write {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--btn-font-size) * 0.7) calc(var(--btn-font-size) * 1.5);
    color: var(--text);
    border: 2.4px solid var(--text);
    /* border-bottom: 2.4px dotted var(--text); */
    background: transparent;
    border-radius: 9999px;
    text-decoration: none;
    margin-bottom: calc(var(--logo-size) * .5);
    margin-right: calc(var(--logo-size) * .5);
    font-weight:500;
}
.btn-write:visited {
    color: var(--text);
    border-color: var(--text);
}
.btn-write,
.btn-write * {
    text-decoration: none !important;
}
.btn-write:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-write:visited:hover {
    color: #8b81fe;
    border-color: #8b81fe;
}
.btn-write:hover,
.btn-write:visited:hover{
    transition-delay: 0s;
}

/* marching-ants highlight */
.ants,
.ants-hover{
  position:relative;
}
.ants::after,
.ants-hover::after{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--logo-size) / 4);
  padding: 1px;
  border-radius: 0px;
  background:
    linear-gradient(90deg, #000 0 50%, #fff 50% 100%) repeat-x top left,
    linear-gradient(180deg, #000 0 50%, #fff 50% 100%) repeat-y top right,
    linear-gradient(90deg, #000 0 50%, #fff 50% 100%) repeat-x bottom right,
    linear-gradient(180deg, #000 0 50%, #fff 50% 100%) repeat-y bottom left;
  background-size:
    calc(var(--ants-size, 6px) * 2) var(--ants-width, 1px),
    var(--ants-width, 1px) calc(var(--ants-size, 6px) * 2),
    calc(var(--ants-size, 6px) * 2) var(--ants-width, 1px),
    var(--ants-width, 1px) calc(var(--ants-size, 6px) * 2);
  animation: ants-march var(--ants-speed, 2s) linear infinite;
  pointer-events:none;
  box-sizing:border-box;
  z-index:1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
}
.ants::after{
  opacity:1;
}
.ants-hover:hover::after{
  opacity:1;
}
.ants-hover.btn-write:hover{
  border-color: transparent;
}
@supports not (-webkit-mask-composite: xor) {
  .ants::after,
  .ants-hover::after{
    background: repeating-linear-gradient(
      90deg,
      #000 0 var(--ants-size, 6px),
      #fff var(--ants-size, 6px) calc(var(--ants-size, 6px) * 2)
    );
    background-size: calc(var(--ants-size, 6px) * 2) var(--ants-width, 1px);
    -webkit-mask: none;
    mask: none;
  }
}
@keyframes ants-march{
  0%{
    background-position:
      0 0,
      100% 0,
      100% 100%,
      0 100%;
  }
  100%{
    background-position:
      calc(var(--ants-size, 6px) * 2) 0,
      100% calc(var(--ants-size, 6px) * 2),
      calc(100% - (var(--ants-size, 6px) * 2)) 100%,
      0 calc(100% - (var(--ants-size, 6px) * 2));
  }
}

.btw-cta{
  border: none;
  background-color: #c1ff00;
  color: #0b0b0b;
}
.btw-cta:hover{
  color: #0b0b0b;
  border-color: transparent;
  animation: btn-buzz 0.25s linear 2;
}

@keyframes btn-buzz{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-1px); }
  40%{ transform: translateX(1px); }
  60%{ transform: translateX(-1px); }
  80%{ transform: translateX(1px); }
  100%{ transform: translateX(0); }
}

.hashtag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px 4px 7px;
    margin:5px 5px 5px 0;    /* gap: 7px; */
    line-height: normal;
    color: var(--text);
    opacity: .6;
    font-weight: 400;
    font-size: 11pt;
    /* border: 1.6px dotted; border-color: rgba(128, 128, 128, .5); */
    border-radius: 9px;
    text-decoration: none;
    cursor: default;
    background-color: rgba(150, 150, 150, 0.2);
}

.highlight {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.3px;
  text-underline-offset: 5px;
  text-decoration-color: #f8502b;
}

/* allow --i on highlight when it is set inline */
.panel-inner .highlight{ display:inline-block; }
.panel-inner .highlight[style*="--i"]{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step));
}
.panel.in-view .panel-inner .highlight[style*="--i"]{
  opacity:1;
  transform:none;
}

.blur-highlight {
  backdrop-filter: blur(18px) saturate(146%);
  -webkit-backdrop-filter: blur(18px) saturate(146%);
  background: rgba(255, 255, 255, 0.06);
  padding: calc(var(--logo-size) / 2);
  border-radius: calc(var(--logo-size) / 2);
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border: 1px solid color-mix(in srgb, var(--bg) 9%, transparent);
  background: color-mix(in srgb, var(--bg) 20%, transparent);
  /* box-shadow: 0 30px 35px -15px rgba(0, 0, 0, 0.05); */
}

.blur-ico {
  backdrop-filter: blur(7px) saturate(100%);
  -webkit-backdrop-filter: blur(7px) saturate(100%);
  padding: 5pt 16pt;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bg) 9%, transparent);
  background: color-mix(in srgb, var(--bg) 9%, transparent);
  /* border: solid 2.4px var(--text); */
}

.rainbow{
  color: #f8502b;
}

/* article panel columns */
.panel-article{ margin-top:0; max-width:var(--max-line-chars); column-gap:var(--logo-size); }
@media (min-width:900px){ .panel-article{ column-count:2; column-fill:balance; } }

/* vertical rhythm inside columns */
.panel-article > :not(.hashtag){
  margin:0;
}
.panel-article > :not(.hashtag) + :not(.hashtag){
  margin-top:var(--space-1);
}
.manual-col > :not(.hashtag){
  margin:0;
}
.manual-col > :not(.hashtag) + :not(.hashtag){
  margin-top:var(--space-1);
}

/* tall panels spacing */
.panel.tall{ align-items:flex-start; }
.panel.tall .panel-inner{ padding-top:30vh; padding-bottom:30vh; }

/* responsive tweaks */
@media (max-width:900px){
  :root{ --icon-size: var(--logo-size); }
  .top-logo{ top:var(--page-pad); left:var(--page-pad); transform:none; }
  .header-right{ top:var(--page-pad); right:var(--page-pad); }
  .panel-inner{ padding:1rem calc(var(--page-pad)); }
}

/* extra small phones adjustments */
@media (max-width:600px){
  :root{ --icon-gap:12px; --icon-size:27px; --logo-size:27px; --btn-font-size:11pt; --max-line-chars:44ch; --h1-size: 52pt; /* Может к стилю заголовка конкретного написать а не ко всем h1? */ }
  .top-logo{ width:var(--logo-size); height:var(--logo-size);  margin: 7px 13px;}
  .panel-inner{ padding:1rem calc(var(--page-pad)); }
}

/* small hover nicety for overlay if needed */
.intro-photo-wrap .overlay-title:hover{ transform:translate(-50%,-52%); transition:transform .15s ease; }

/* Footer specific layout + link styles */
.footer-panel .panel-inner {
  text-align: center; /* center everything inside footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* интересно есть ли тут конфликт */
  max-width: none;
  width: 100%;
  padding-left: var(--logo-size);
  padding-right: var(--logo-size);
  padding-bottom: 0;
}

.footer-panel .manual-grid-inner{
  width: 100%;
  max-width: none;
}
.footer-panel .manual-grid-row{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--logo-size);
  justify-items: start;
  align-items: start;
  margin-bottom: calc(var(--logo-size) * 0.6);
}
.footer-panel .manual-grid-row.footer-row-4{
  grid-template-columns: 1fr 2fr 1fr;
}
.footer-panel .manual-grid-row.footer-row-4 .manual-col{
  width:100%;
  max-width:none;
  justify-self:stretch;
}
.footer-panel .manual-col{
  max-width:100%;
}
.footer-panel p,
.footer-panel .panel-text{
  margin:0 0 var(--space-1) 0;
}
.footer-panel p:last-child,
.footer-panel .panel-text:last-child{
  margin-bottom:0;
}
.footer-panel .manual-col-short{
  text-align:left;
}
.footer-panel .manual-col-wide{
  text-align:center;
  justify-self:center;
  width:100%;
}
.footer-panel .manual-grid-row:last-child{
  margin-bottom:0;
}

.footer-panel{
  min-height:auto;
  padding-bottom: calc(var(--logo-size) * 0.8);
}

.footer-panel h1 { margin: 0; }
.footer-panel h1 a.footer-link {
  display:inline-block;
  color: var(--text);
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:var(--h1-size);
  line-height:var(--lh-h1);  /* Точно, это ж не строки а отдельные строки <p> а между ними расстояние установлено видно на тексте */
}

.footer-panel h1 a.footer-link {
  color: var(--text);
  text-decoration: none;
  transition: color .5s ease;
}

.footer-panel h1 a.footer-link:visited {
  color: var(--text);
}

.footer-panel h1 a.footer-link:hover {
  color: var(--accent);
}

.footer-panel h1 a.footer-link:visited:hover {
  color: #8b81fe;
}
.footer-panel [style*="--i"]{
  opacity:0;
  transform:translateY(-10px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  transition-delay: calc(var(--i, 1) * var(--reveal-step));
}
.footer-panel.panel.in-view [style*="--i"]{
  opacity:1;
  transform:none;
}
.footer-margin {
  margin-bottom: calc(var(--logo-size) * 1.1);
}

@media (max-width: 600px) {
  .footer-panel h1 a.footer-link {
    font-size: 45pt;
    display: inline-block;
  }

  .footer-panel h1 {
    margin: 0;
    line-height: 0.68;
  }
}
@media (max-width: 900px) {
  .footer-panel .manual-grid-row{
    grid-template-columns: 1fr;
    gap: calc(var(--logo-size) * 0.5);
  }
  .footer-panel .manual-grid-row.footer-row-4{
    grid-template-columns: 1fr;
  }
  .footer-panel .manual-grid-inner{
    width: 100%;
  }
}

.small-ico {
  height: 1.4ch;
  transform: translateY(+.5px);
}

.line {
  height: 0;
  border-top: 1.5px dotted;
  border-color: var(--text);
  width: 100%;
  margin-bottom: 7.5pt; /* а как var(--lh-body) ? */
  margin-top: 7.5pt;
  opacity: .4;
}

.flow-section{
  min-height:auto;
  padding-top: calc(var(--logo-size) * 2);
  padding-bottom: calc(var(--logo-size) * 2);
}

.img-round{
  display:block;
  width:100%;
  height:auto;
  clip-path: inset(0 round var(--img-radius)); /* clip-path немного тяжелее, чем overflow:hidden */
  /* mask-image: radial-gradient(#000 99%, transparent 100%); */
  /* border-radius:9px; */
  margin-top: calc(var(--logo-size) * .5);
  margin-bottom: calc(var(--logo-size) * .5);
}
.flow-inner img {
  width: 100%;
  height: auto;
  display: block;
}

.panel-article img,
.panel-article figure {
  break-inside: avoid;
  page-break-inside:avoid;
}
.panel-article img{
  display:block;
  margin-bottom: 12pt;
}

/* manual grid test section */
.manual-grid-panel{
  --manual-short: calc((var(--max-line-chars) - var(--logo-size)) / 2);
  --manual-wide: var(--max-line-chars);
  --manual-wider: calc(var(--manual-short) * 3 + var(--logo-size) * 2);
  --manual-widest: calc(var(--manual-short) * 4 + var(--logo-size) * 3);
  --manual-container: calc(var(--max-line-chars) * 2 + var(--logo-size));
}

.manual-grid-panel .panel-inner{
  max-width:none;
  width: min(100%, calc(var(--manual-container) + (var(--logo-size) * 2)));
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: var(--logo-size);
  padding-right: var(--logo-size);
}
.manual-grid-inner{
  width: min(100%, var(--manual-container));
  margin: 0 auto;
  box-sizing: border-box;
}
.manual-grid-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--logo-size);
  align-items:flex-start;
  justify-content:center;
  margin-bottom: calc(var(--logo-size) - 11px);
}
.manual-col{
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
}
.manual-col-short{
  flex:0 0 var(--manual-short);
  max-width:var(--manual-short);
}
.manual-col-wide{
  flex:0 0 var(--manual-wide);
  max-width:var(--manual-wide);
}
.manual-col-wider{
  flex:0 0 var(--manual-wider);
  max-width:var(--manual-wider);
}
.manual-col-widest{
  flex:0 0 var(--manual-widest);
  max-width:var(--manual-widest);
}
.manual-col-empty{
  min-height:1px;
}
.manual-grid-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  clip-path: inset(0 round var(--img-radius));
  margin-bottom: 0; /* was 12pt */
}

/* works carousel */
.works-carousel{
  position:relative;
  margin-bottom: calc(var(--logo-size) - 11px);
}
.works-carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  --carousel-item-width: var(--manual-short);
  width:100%;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
.works-carousel-viewport::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.works-carousel-track{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--logo-size);
  align-items:flex-start;
  width:max-content;
}
.works-carousel-track .manual-col{
  flex:0 0 var(--carousel-item-width);
  max-width:var(--carousel-item-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.works-carousel-track .manual-col > *{
  max-width:100%;
}
.works-carousel-fade{
  position:absolute;
  top:0;
  bottom:0;
  width: calc(var(--manual-short) / 2);
  opacity:0;
  pointer-events:none;
  transition: opacity .5s ease;
  z-index:2;
}
.works-carousel-fade-left{
  left:0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(0, 0, 0, 0) 100%);
}
.works-carousel-fade-right{
  right:0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(0, 0, 0, 0) 100%);
}
.works-carousel:hover .works-carousel-fade,
.works-carousel:focus-within .works-carousel-fade{
  opacity:1;
}
.works-carousel-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:var(--icon-size);
  height:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s ease;
}
.works-carousel:hover .works-carousel-nav,
.works-carousel:focus-within .works-carousel-nav{
  opacity:1;
  pointer-events:auto;
}
.works-carousel-nav::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: calc(var(--icon-size) + 12pt);
  height: calc(var(--icon-size) + 12pt);
  transform: translate(-50%, -50%);
  border-radius:50%;
  backdrop-filter: blur(18px) saturate(100%);
  -webkit-backdrop-filter: blur(18px) saturate(100%);
  background: rgba(255, 255, 255, 0.06);
  z-index:-1;
}
.works-carousel-nav img{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
}
.works-carousel-prev{ left: calc(var(--logo-size) * 0.2); }
.works-carousel-next{ right: calc(var(--logo-size) * 0.2); }
body.inverted .works-carousel-nav img{
  filter: invert(1) grayscale(1) brightness(1);
}
/* keep gallery nav icons consistent across themes */
.gallery-panel .works-carousel-nav img,
body.inverted .gallery-panel .works-carousel-nav img{
  filter: invert(1) grayscale(1) brightness(1);
}

/* gallery section */
.gallery-panel{
  --gallery-pad: var(--logo-size);
  --gallery-short: calc((var(--max-line-chars) - var(--logo-size)) / 2);
  --gallery-max: calc(var(--gallery-short) * 4 + var(--logo-size) * 3);
  --gallery-w: min(calc(100vw - (var(--gallery-pad) * 2)), var(--gallery-max));
  --gallery-h: calc(100vh - (var(--gallery-pad) * 2));
  background: var(--bg);
  color:var(--text);
  padding-top:0;
  padding-bottom:0;
  min-height:100vh;
}
.gallery-panel .panel-inner{
  max-width:none;
  width:100%;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-panel .panel-inner,
.gallery-panel [style*="--i"]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.gallery{
  width:100%;
  padding:0;
}
.gallery-panel .works-carousel{
  margin-bottom:0;
  width: var(--gallery-w);
  height: var(--gallery-h);
  border-radius: var(--img-radius);
  border: 1.4px solid color-mix(in srgb, var(--text) 9%, transparent);
  background: #0b0b0b;
  overflow: hidden;
  box-sizing: border-box;
}
.gallery-panel .works-carousel-viewport{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}
.gallery-panel .works-carousel-track{
  gap:0;
  height:100%;
  width:100%;
}
.gallery-panel .works-carousel-track > .gallery-item{
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery-panel .manual-grid-image{
  clip-path: none;
  border-radius: 0;
  width:100%;
  height:100%;
  object-fit: contain;
}
.gallery-panel .works-carousel-prev{ left: var(--logo-size); }
.gallery-panel .works-carousel-next{ right: var(--logo-size); }

/* hint tooltip (CSS-only) */
.hint{
  position:relative;
  display:inline-block;
  cursor:help;
}
.hint::after{ /* ⓘ */
  content: attr(data-hint);
  position:fixed;
  right: var(--logo-size);
  bottom: var(--logo-size);
  display:block;
  display:inline-block;
  inline-size: max-content;
  max-inline-size: min(var(--hint-width), 90vw);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  box-sizing: border-box;
  padding: var(--hint-pad-y) var(--hint-pad-x);
  border-radius: 16px 16px 0 16px;
  background: #24a4ff; /* 0080ff 56c1ff 00b0f4 4790fd*/
  color: var(--bg);
  font-size: 11pt;
  font-weight: 400;
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif;
  font-style: normal;
  font-variant: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  font-size: var(--body-size);
  line-height: var(--lh-body);
  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
  z-index:9999;
}
.hint:hover::after,
.hint:focus-visible::after,
.hint:active::after{
  opacity:1;
  transform: translateY(0);
}

.info-hint {
  color: #24a4ff;
}

@media (max-width: 900px) {
  .hint::after{
    max-inline-size: calc(100% - (var(--logo-size) * 2));
  }
}

@media (max-width: 900px) {
  .manual-grid-panel .panel-inner{
    padding-left: var(--logo-size);
    padding-right: var(--logo-size);
  }
  .manual-grid-row{
    gap: calc(var(--logo-size) * 0.8);
    margin-bottom: var(--logo-size);
  }
  .manual-grid-panel [style*="--i"]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .manual-col,
  .manual-col-short,
  .manual-col-wide,
  .manual-col-wider,
  .manual-col-widest{
    flex:0 0 100%;
    max-width:100%;
  }
  .works-carousel-fade,
  .works-carousel-nav{
    display:none;
  }
  .works-carousel-viewport{
    overscroll-behavior-x: contain;
    padding-inline: 0;
    scroll-padding-inline: 0;
    --carousel-item-width: calc(100vw - (var(--logo-size) * 2));
    width: var(--carousel-item-width);
    margin-left: auto;
    margin-right: auto;
  }
  .works-carousel-track .manual-col{
    flex:0 0 var(--carousel-item-width);
    max-width:var(--carousel-item-width);
  }
}

/* step down widest when container no longer fits: 2*max-line-chars + 3*logo-size */
@media (max-width: calc(144ch + 135px)) and (min-width: 901px) {
  .manual-col-widest{
    flex:0 0 var(--manual-wider);
    max-width:var(--manual-wider);
  }
}

/* step down wider -> wide when container no longer fits: 1.5*max-line-chars + 2.5*logo-size */
@media (max-width: calc(108ch + 113px)) and (min-width: 901px) {
  .manual-col-widest{
    flex:0 0 var(--manual-wide);
    max-width:var(--manual-wide);
  }
}

@media (max-width: 900px) {
  .menu-top,
  .menu-bottom{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--logo-size) * 0.8);
  }
  .menu-shell{
    padding: calc(var(--logo-size) * 3) var(--page-pad) calc(var(--logo-size) * 0.8);
  }
}

@media (max-width: 600px) {
  .menu-top,
  .menu-bottom{
    grid-template-columns: 1fr;
    gap: calc(var(--logo-size) * 0.5);
  }
  .menu-shell{
    padding: calc(var(--logo-size) * 3) var(--logo-size) calc(var(--logo-size) * 0.8);
  }
}