/* =========================================================
   Портфолио · скетч-стиль · шрифты в духе whoisguilty.ru
   (Space Grotesk + Anonymous Pro)
   ========================================================= */

:root{
  --ink:#161413;
  --ink-soft:#3a3633;
  --muted:#8c8780;
  --muted-2:#b8b3a9;
  --paper:#f6f2e9;
  --paper-2:#efe9db;
  --radius:18px;
  --stroke:2px;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Anonymous Pro", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(0,0,0,.035) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 28%, rgba(0,0,0,.03) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 70%, rgba(0,0,0,.025) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 90%, rgba(0,0,0,.03) 0 1px, transparent 2px);
  background-size: 220px 220px, 260px 260px, 180px 180px, 300px 300px;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* система координат для приклеенного к странице декора
     (.side-gear и .tab-decor): они тянутся на всю высоту документа */
  position:relative;
}
/* пока открыт полноэкранный просмотр — страница под ним не скроллится */
body.lb-lock{ overflow:hidden; }

.filters{ position:absolute; width:0; height:0; pointer-events:none; }
.ink-stroke{ fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   Topbar
   ========================================================= */
/* Шапка вынута из потока и лежит поверх сцены. Так механизм начинается
   у самой кромки документа: вал и выхлопная труба уходят за верх
   страницы, а не обрываются под шапкой. Фона у шапки нет, поэтому она
   ничего не закрывает; клики сквозь неё проходят в canvas — ловят их
   только сам логотип и переключатель языка. */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 30px 6px; gap:14px;
  position:absolute; top:0; left:0; right:0; z-index:5;
  pointer-events:none;
}
.brand, .lang{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--ink); object-fit:cover;
  box-shadow:2px 2px 0 rgba(22,20,19,.18); background:var(--paper-2);
}
.logo{
  font-family:var(--font-display); font-weight:700;
  font-size:20px; letter-spacing:.5px; text-transform:lowercase;
}

.lang{ display:flex; gap:8px; }
.lang-btn{
  display:flex; align-items:center; gap:7px;
  border:2px solid var(--ink); border-radius:10px;
  background:var(--paper); padding:3px 9px 3px 7px;
  cursor:pointer; font-family:var(--font-body);
  font-size:14px; color:var(--muted);
  box-shadow:2px 2px 0 rgba(22,20,19,.16);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.lang-btn:hover{ transform:translateY(-1px); box-shadow:3px 3px 0 rgba(22,20,19,.24); }
.lang-btn[aria-pressed="true"]{ color:var(--ink); background:var(--paper-2); }
.flag{ width:26px; height:18px; display:block; border:1.4px solid var(--ink); box-shadow:1px 1px 0 rgba(22,20,19,.18); }

@media (max-width:560px){
  .topbar{ padding:14px 16px 4px; }
  .logo{ font-size:17px; }
  .lang-btn span{ display:none; }
  .lang-btn{ padding:4px; }
}

/* =========================================================
   Hero — 3D-механизм (шестерня + деревянные стрелки, Three.js)
   ========================================================= */
.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto; padding:0;      /* вплотную к верху: шапка вне потока */
}
.hero-mech{
  width:min(96vw, 900px);
  aspect-ratio:16/9;
  max-height:min(62vh, 520px);
  position:relative;
  touch-action:manipulation;   /* клики по стрелкам без задержки */
}
.hero-mech canvas{ display:block; width:100%; height:100%; }
/* курсор-pointer, когда луч попал в деревянную стрелку */
.hero-mech.is-hot{ cursor:pointer; }

@media (max-width:720px){
  .hero-mech{ width:100vw; aspect-ratio:4/3; max-height:46vh; }
}

/* боковая декоративная шестерёнка в позиции сайта (медленная).
   Опущена ниже: раньше висела у самого верха и лезла в шапку. */
.side-gear{
  position:absolute;
  top:320px; right:-46px;
  width:170px; height:170px;
  pointer-events:none;
  opacity:.3;
  z-index:0;
  will-change:transform;
}
.side-gear svg{ width:100%; height:100%; display:block; overflow:visible; filter:url(#rough-hard); }
@media (max-width:720px){
  .side-gear{ width:120px; height:120px; top:250px; right:-30px; opacity:.24; }
}
@media (max-width:560px){ .hero{ margin-top:0; } }

/* =========================================================
   Stage / tabs
   ========================================================= */
.stage{ max-width:1180px; margin:0 auto; padding:0 22px 80px; position:relative; z-index:2; }

/* Вкладки живут на шестерне (3D). Этот слой — настоящие кнопки для
   клавиатуры и скринридеров: геометрия внутри canvas им недоступна.
   Визуально скрыт, но при фокусе кнопка проявляется — иначе tab-навигация
   вслепую. */
.mech-a11y{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:2px; display:flex; gap:6px; z-index:4;
}
.mech-tab{
  width:1px; height:1px; padding:0; margin:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--paper); color:var(--ink); cursor:pointer;
}
.mech-tab:focus-visible{
  width:auto; height:auto; padding:6px 14px; clip-path:none;
  border:2px solid var(--ink); border-radius:12px;
  font-family:var(--font-display); font-size:15px;
  outline:3px solid var(--ink); outline-offset:2px;
}
.mech-tab.is-active:focus-visible{ background:var(--ink); color:var(--paper); }

.tab-sub{
  text-align:center; font-family:var(--font-body);
  font-size:18px; color:var(--ink-soft); margin:8px 0 26px;
}
@media (max-width:560px){
  .tab-sub{ font-size:15px; margin-bottom:18px; }
}

/* =========================================================
   Content
   ========================================================= */
.content{ position:relative; }
.content-head{
  display:flex; align-items:baseline; gap:14px;
  margin:0 4px 22px; padding-bottom:12px; border-bottom:2px solid var(--ink);
}
.content-head h2{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:40px; line-height:1; letter-spacing:.5px;
}
.content-head .count{ font-size:15px; color:var(--muted); }
.content-head .rule{ flex:1; height:0; border-bottom:1px dashed var(--muted-2); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

.card{
  position:relative; border:var(--stroke) solid var(--ink); border-radius:var(--radius);
  background:var(--paper); box-shadow:5px 7px 0 rgba(22,20,19,.18); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translate(-2px,-2px) rotate(-.4deg); box-shadow:8px 10px 0 rgba(22,20,19,.24); }
.card .media{
  position:relative; aspect-ratio:16/10; background:var(--paper-2);
  border-bottom:var(--stroke) solid var(--ink); display:grid; place-items:center; overflow:hidden;
}
.card .media{ cursor:zoom-in; }
.card .media video,.card .media img{ width:100%; height:100%; object-fit:cover; display:block; filter:none; }
.card .media:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }

/* подсказка «откроется во весь экран» — уголки в углу кадра */
.media-zoom{
  position:absolute; top:9px; right:9px; width:26px; height:26px;
  display:grid; place-items:center; color:var(--ink);
  background:var(--paper); border:1.6px solid var(--ink); border-radius:7px;
  box-shadow:2px 2px 0 rgba(22,20,19,.18);
  opacity:0; transform:translateY(-3px);
  transition: opacity .2s ease, transform .2s ease;
}
.media-zoom svg{ width:14px; height:14px; display:block; }
.card:hover .media-zoom,
.card:focus-within .media-zoom{ opacity:1; transform:translateY(0); }

/* карточка без вложения: описание всегда открыто, скрывать нечего */
.card--nomedia .body{ padding:18px 18px 18px; }
.card--nomedia .desc{ max-height:none; opacity:1; margin:0 0 12px; }

.card .body{ padding:14px 16px 16px; }
.card .title{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.05; margin:0 0 6px; }
.card .desc{
  font-size:15px; line-height:1.4; color:var(--ink-soft);
  max-height:0; opacity:0; margin:0; overflow:hidden;
  transition: max-height .4s ease, opacity .3s ease, margin .35s ease;
}
.card:hover .desc,
.card:focus-within .desc{ max-height:260px; opacity:1; margin:0 0 12px; }
.card .link{
  display:inline-flex; align-items:center; gap:7px; font-size:14px;
  border:1.6px solid var(--ink); border-radius:7px; padding:3px 10px; text-decoration:none; background:var(--paper);
}
.card .link.live{ color:var(--ink); }
.card .link.live:hover{ background:var(--ink); color:var(--paper); }

/* =========================================================
   Галерея: кадр на всю площадь, стрелки по бокам, а номер
   кадра показывают плоские виджеты внизу — по одному на кадр.
   ========================================================= */
.card .media .gal-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  border:1.6px solid var(--ink); background:var(--paper);
  display:grid; place-items:center; cursor:pointer;
  font-family:var(--font-display); font-size:18px; line-height:1; color:var(--ink);
  box-shadow:2px 2px 0 rgba(22,20,19,.18); padding:0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gal-arrow:hover{ transform:translateY(-50%) scale(1.08); box-shadow:3px 3px 0 rgba(22,20,19,.26); }
.gal-prev{ left:8px; } .gal-next{ right:8px; }

/* виджеты-кадры: полоска на каждый кадр, активная залита и шире */
.gal-dots{
  position:absolute; left:0; right:0; bottom:9px;
  display:flex; justify-content:center; align-items:center; gap:5px;
}
.gal-dot{
  -webkit-appearance:none; appearance:none;
  padding:5px 3px; margin:0; border:0; background:none; cursor:pointer;
  display:block; line-height:0;
}
.gal-dot > span{
  display:block; width:14px; height:6px; border-radius:3px;
  border:1.6px solid var(--ink); background:var(--paper);
  box-shadow:1.5px 1.5px 0 rgba(22,20,19,.2);
  transition: width .26s cubic-bezier(.4,1.3,.5,1), background .2s ease;
}
.gal-dot.is-on > span{ width:30px; background:var(--ink); }
.gal-dot:hover > span{ background:var(--paper-2); }
.gal-dot.is-on:hover > span{ background:var(--ink-soft); }
.gal-dot:focus-visible > span{ outline:2.5px solid var(--ink); outline-offset:2px; }

/* =========================================================
   Биография
   ========================================================= */
.bio{ display:grid; grid-template-columns:minmax(220px,280px) 1fr; gap:32px; align-items:start; }
@media (max-width:760px){ .bio{ grid-template-columns:1fr; } }

.bio-photo{
  position:relative; border:var(--stroke) solid var(--ink); border-radius:var(--radius);
  background:var(--paper-2); box-shadow:6px 8px 0 rgba(22,20,19,.2); overflow:hidden; aspect-ratio:1/1;
}
.bio-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:none; }
.bio-photo::after{
  content:""; position:absolute; inset:6px; border:1.4px solid var(--paper);
  border-radius:calc(var(--radius) - 4px); pointer-events:none; opacity:.7;
}

.bio-name{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; margin:0 0 4px; }
.bio-handle{ font-size:16px; color:var(--muted); margin:0 0 18px; }

.bio-facts{ list-style:none; padding:0; margin:0 0 24px; }
.bio-facts li{
  position:relative; padding:7px 0; font-size:17px; line-height:1.4; color:var(--ink);
  border-bottom:1px dashed var(--muted-2);
}
.bio-facts li:last-child{ border-bottom:0; }

.bio-stacks{ display:flex; flex-direction:column; gap:14px; }
.bio-stack h4{ margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.bio-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.bio-chip{ border:1.6px solid var(--ink); border-radius:8px; background:var(--paper); padding:3px 10px; font-size:14px; color:var(--ink-soft); box-shadow:2px 2px 0 rgba(22,20,19,.12); }

/* иллюстрация (в духе whoisguilty) */

/* =========================================================
   Footer + кнопка «начать» (анимация в духе whoisguilty)
   ========================================================= */
.footer{ max-width:1180px; margin:0 auto; padding:30px 22px 40px; text-align:center; position:relative; z-index:2; }
.footer-line{ display:block; height:0; width:120px; margin:0 auto 16px; border-top:2px solid var(--ink); }
.footer-tg{
  font-family:var(--font-display); font-weight:500; font-size:18px;
  color:var(--ink); text-decoration:none;
  border:2px solid var(--ink); border-radius:10px; padding:5px 16px; display:inline-block; background:var(--paper);
  box-shadow:3px 3px 0 rgba(22,20,19,.18); transition: transform .15s ease, box-shadow .15s ease;
}
.footer-tg:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(22,20,19,.26); }

/* =========================================================
   Animations
   ========================================================= */
@keyframes inkIn{ from{ opacity:0; transform:translateY(14px) rotate(-1deg);} to{ opacity:1; transform:translateY(0) rotate(0);} }
.card{ animation: inkIn .5s ease both; }
.card:nth-child(2){ animation-delay:.05s; } .card:nth-child(3){ animation-delay:.1s; }
.card:nth-child(4){ animation-delay:.15s; } .card:nth-child(5){ animation-delay:.2s; } .card:nth-child(6){ animation-delay:.25s; }

@media (prefers-reduced-motion: reduce){ .card{ animation:none !important; } }

/* =========================================================
   Переход-свап при смене языка
   ========================================================= */
.swap{
  position:fixed; inset:0; z-index:50;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  transform:translateX(100%);
  pointer-events:none;
  overflow:hidden;
}
.swap::after{
  content:""; position:absolute; left:0; right:0; bottom:14px;
  height:1px; background:var(--paper); opacity:.25;
}
.swap__text{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px, 7vw, 64px); letter-spacing:1px;
  transform:translateY(6px); opacity:0;
  white-space:nowrap;
}
.swap.run{ animation: swapSweep 900ms cubic-bezier(.7,0,.2,1) forwards; }
.swap.run .swap__text{ animation: swapText 900ms cubic-bezier(.7,0,.2,1) forwards; }
@keyframes swapSweep{
  0%{ transform:translateX(100%); }
  38%{ transform:translateX(0); }
  62%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
@keyframes swapText{
  0%{ transform:translateY(8px); opacity:0; }
  22%{ transform:translateY(0); opacity:1; }
  78%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(-8px); opacity:0; }
}
@media (max-width:560px){ .swap__text{ font-size:30px; } }

/* =========================================================
   Декор вкладок (js/decor.js): у каждого раздела свой набор
   деталей в полях страницы — шестерёнки и вентили крутятся,
   трубы ржавые.

   Слой ПРИКЛЕЕН К СТРАНИЦЕ (position:absolute относительно body,
   как .side-gear): детали уезжают вместе с контентом при скролле,
   а не висят перед камерой. Кластеры разбросаны по высоте
   документа — у каждой вкладки свои места.
   ========================================================= */
.tab-decor{
  position:absolute; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.dc-pane{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity .55s ease, visibility .55s;
  /* «поле» страницы — сколько места остаётся слева от текстовой колонки
     (.stage: max-width 1180 + padding 22). Декор живёт в поле и не
     наползает на текст, пока поле есть. */
  --gut: max(22px, calc((100vw - 1180px)/2 + 22px));
}
.dc-pane.is-on{ opacity:1; visibility:visible; }

/* кластер: место задаёт js (side + top по высоте страницы) */
.dc-c{
  position:absolute;
  opacity:0; transform:translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.dc-pane.is-on .dc-c{ opacity:1; transform:translateY(0); }
/* появляются по очереди — набор «собирается», а не мигает целиком */
.dc-pane.is-on .dc-c:nth-child(2){ transition-delay:.07s; }
.dc-pane.is-on .dc-c:nth-child(3){ transition-delay:.14s; }
.dc-pane.is-on .dc-c:nth-child(4){ transition-delay:.21s; }

.dc-svg{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:visible; stroke-linejoin:round;
  opacity:.30; filter:url(#rough-hard);
}

/* Поля не хватает — декор уходит за край и остаётся лёгкой фактурой:
   текст рисуется поверх, но конкурировать за внимание он не должен. */
/* Полоса под контентом — вариант для узких экранов. В потоке,
   поэтому текст на неё не наезжает: под ней его просто нет. */
.tab-decor-strip{
  display:none; position:relative; z-index:1;
  margin:2px auto 18px; max-width:620px;
  pointer-events:none;
}
.tab-decor-strip .dc-pane--strip{
  position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
}
.tab-decor-strip .dc-pane--strip.is-on{ opacity:1; }
/* У вкладки может не быть полосы совсем (Minecraft: там 3D-сцена).
   Панели внутри абсолютные, высоту держит aspect-ratio — без этого
   пустой контейнер оставлял провал над сценой. */
.tab-decor-strip.is-empty{ display:none; }
.dc-s{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:visible; stroke-linejoin:round;
  opacity:.26; filter:url(#rough-hard);
}

/* Сцена Minecraft: 3D-канвас в потоке, только на своей вкладке.
   Не декор в полях, а часть раздела — поэтому по центру колонки и
   на любой ширине экрана. */
.mc-stage{
  display:none; position:relative; z-index:1;
  /* Во всю ширину колонки и без max-width: в сцене появились блоки
     по бокам, и узкий контейнер их срезал — «рамка», которая
     ограничивала кадр. Пропорция равна пропорции самой сцены
     (габарит 9.42 × 4.30 юнита с полями вписывания), поэтому пустой
     бумаги не остаётся ни сверху, ни снизу. */
  margin:0 auto 14px; width:100%;
  aspect-ratio:1136/528;
  opacity:0; transition:opacity .5s ease;
}
.mc-stage.is-on{ display:block; }
.mc-stage.is-lit{ opacity:1; }
.mc-stage canvas{ display:block; width:100%; height:100%; }
@media (max-width:720px){
  .mc-stage{ margin-bottom:10px; }
}

/* Поля страницы больше нет: боковые колонки пришлось бы либо загонять
   под текст, либо срезать почти целиком. Показываем полосу. */
@media (max-width:1400px){
  .tab-decor{ display:none; }
  .tab-decor-strip{ display:block; aspect-ratio:560/182; }
}
@media (max-width:720px){
  .tab-decor-strip{ margin-bottom:12px; }
  .dc-s{ opacity:.2; }
}

.dc-spin{ animation:dcSpin 26s linear infinite; transform-origin:0 0; }
@keyframes dcSpin{ to{ transform:rotate(360deg); } }

/* поршень: шток ходит в гильзе */
.dc-piston{ animation:dcPiston 3.6s ease-in-out infinite; }
@keyframes dcPiston{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(16px); }
}

/* стрелка манометра: подрагивает в пределах сектора */
.dc-needle{ animation:dcNeedle 5.2s ease-in-out infinite; transform-origin:0 0; }
@keyframes dcNeedle{
  0%,100%{ transform:rotate(-52deg); }
  35%    { transform:rotate(28deg); }
  55%    { transform:rotate(14deg); }
  80%    { transform:rotate(44deg); }
}

/* dcBob и dcSwing удалены вместе с плоскими блоками и плоским
   Стивом: на вкладке Minecraft теперь только 3D-сцена. */

@media (prefers-reduced-motion: reduce){
  .dc-spin, .dc-piston, .dc-needle{ animation:none; }
  .dc-c{ transition:none; transform:none; }
}

/* =========================================================
   Полноэкранный просмотр вложений (lightbox): кадр целиком,
   стрелки по бокам у галереи, крестик и ESC — закрыть.
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:60;
  display:none; place-items:center;
  background:rgba(22,20,19,.88);
  padding:clamp(14px, 4vw, 54px);
  /* место снизу под виджеты-кадры */
  padding-bottom:clamp(58px, 9vh, 96px);
}
.lightbox.is-on{ display:grid; animation:lbIn .22s ease both; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }

.lb-frame{
  max-width:100%; max-height:100%;
  display:grid; place-items:center;
  border:2px solid var(--paper); border-radius:12px;
  background:var(--ink); overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  animation:lbPop .26s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes lbPop{ from{ transform:scale(.96); } to{ transform:scale(1); } }
.lb-media{
  display:block; max-width:100%;
  max-height:calc(100vh - clamp(90px, 17vh, 190px));
  width:auto; height:auto; object-fit:contain;
}

.lb-close, .lb-arrow{
  position:absolute; z-index:2;
  border:2px solid var(--paper); border-radius:50%;
  background:rgba(22,20,19,.6); color:var(--paper);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition: transform .15s ease, background .15s ease;
}
.lb-close:hover, .lb-arrow:hover{ background:var(--paper); color:var(--ink); transform:scale(1.08); }
.lb-close:focus-visible, .lb-arrow:focus-visible{ outline:3px solid var(--paper); outline-offset:3px; }

.lb-close{ top:clamp(10px,2.4vw,22px); right:clamp(10px,2.4vw,22px); width:44px; height:44px; }
.lb-close svg{ width:20px; height:20px; display:block; }

.lb-arrow{
  top:50%; transform:translateY(-50%);
  width:52px; height:52px;
  font-family:var(--font-display); font-size:30px; line-height:1;
  padding-bottom:5px;
}
.lb-arrow:hover{ transform:translateY(-50%) scale(1.08); }
.lb-prev{ left:clamp(8px,2vw,26px); } .lb-next{ right:clamp(8px,2vw,26px); }
.lb-arrow[hidden]{ display:none; }

/* виджеты-кадры в большом виде: та же логика, светлая палитра */
.lb-dots{ position:absolute; left:0; right:0; bottom:clamp(14px,2.6vh,26px); }
.lb-dots-row{ display:flex; justify-content:center; align-items:center; gap:6px; }
.lb-dots-row .gal-dot > span{
  border-color:var(--paper); background:transparent;
  box-shadow:none; width:16px; height:7px;
}
.lb-dots-row .gal-dot.is-on > span{ width:34px; background:var(--paper); }
.lb-dots-row .gal-dot:hover > span{ background:rgba(246,242,233,.45); }
.lb-dots-row .gal-dot:focus-visible > span{ outline:2.5px solid var(--paper); outline-offset:2px; }

@media (max-width:560px){
  .lb-arrow{ width:42px; height:42px; font-size:24px; }
  .lb-close{ width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox.is-on, .lb-frame{ animation:none; }
  .lb-close, .lb-arrow, .gal-dot > span{ transition:none; }
}