/* spongeafrica.it — система донора huyml.co числами (TEARDOWN.md): один экран, поле #ECECEC, чернила #1E1E1E,
   служебный гротеск 10/13 (Wix Madefor Text 500 со spng.space в роли BT Grotesk), дисплей — Montserrat (spng.space)
   в роли BT Glyphius, приборная раскладка по фиксированным точкам x 20 · 74 · 198 · 288 · 518 · 561 · 731 · правый край. */
@font-face{font-family:"Wix Madefor Text";font-weight:400 800;font-display:swap;src:url(../fonts/wixmadefortext-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Wix Madefor Text";font-weight:400 800;font-display:swap;src:url(../fonts/wixmadefortext-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--field:#ECECEC;--ink:#1E1E1E;--acc:#E4150B;--panel:#080808;--fs:10px;--lh:13px;--m:20px;
  --e-out:cubic-bezier(.22,1,.36,1)}
@media (min-width:1920px){:root{--fs:12px;--lh:15.6px}}
@media (max-width:800px){:root{--fs:12px;--lh:15.6px;--m:16px}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--field);scrollbar-color:#A9A9A9 var(--field);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--field)}::-webkit-scrollbar-thumb{background:#A9A9A9;border-radius:10px;border:2px solid var(--field)}
html.js,html.js body{height:100%;overflow:hidden}
body{margin:0;background:var(--field);color:var(--ink);font-family:"Wix Madefor Text",system-ui,sans-serif;font-weight:500;font-size:var(--fs);line-height:var(--lh);letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;hyphens:manual}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h2,h3,ul,ol,dl,dd{margin:0;padding:0}ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:fixed;left:8px;top:-60px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px}.skip:focus{top:8px}
.o5{opacity:.5}
.svc{font-size:var(--fs);line-height:var(--lh)}

/* — лента — */
.ribbon{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}

/* — обвязка поверх WebGL: белое + difference — */
.ui{position:fixed;inset:0;pointer-events:none;color:#fff;mix-blend-mode:difference;z-index:5}
.ui a,.ui button,.ui .pcol,.ui .menu{pointer-events:auto}
.cube{position:absolute;left:var(--m);top:18px;width:56px;height:123px;perspective:1200px;display:block}
.cube__in{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-28px)}
.cube__f{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden}
.cube__f--0{transform:rotateY(0deg) translateZ(28px)}.cube__f--1{transform:rotateY(90deg) translateZ(28px)}
.cube__f--2{transform:rotateY(180deg) translateZ(28px)}.cube__f--3{transform:rotateY(-90deg) translateZ(28px)}
.wm{display:block;fill:currentColor}
.wm--v{position:absolute;left:50%;top:50%;width:123px;height:auto;transform:translate(-50%,-50%) rotate(-90deg)}
.cube__f svg:not(.wm){width:40px;fill:currentColor}
.cube__f b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:Montserrat,sans-serif;font-weight:300;font-size:19px;letter-spacing:.12em}
.svc--v{position:absolute;left:55px;top:18px;writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;white-space:nowrap;line-height:1.3;display:none}
.menu{position:absolute;left:198px;top:20px;width:260px}
.menu ul{margin-top:24px;display:grid;gap:0}
.mi{display:inline-block;font-family:Montserrat,sans-serif;font-weight:300;font-size:19px;line-height:19px;letter-spacing:.01em;text-transform:uppercase;padding:0 0 0 0;transition:filter .18s}
.menu__ar{position:absolute;left:0;top:41px;width:14px;height:5px;opacity:0}
.menu.is-blur .mi:not(.is-on){filter:blur(1.5px)}
.top{position:absolute;top:20px}.top--a{left:561px}.top--b{left:731px}.top--c{right:var(--m)}
.ln{position:relative;display:inline-block;overflow:hidden;padding-bottom:2px}
.ln i{position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor}
.ln i:last-child{transform:translateX(-120%)}
.meta{position:absolute;left:var(--m);top:373px;display:grid;gap:22px;margin:0}
.meta>div{display:grid;grid-template-columns:178px 1fr}
.meta dd{width:220px}
.count{position:absolute;left:198px;bottom:20px}
.count__n{display:flex;align-items:flex-end;gap:18px;margin-top:8px}
.count__a{font-family:Montserrat,sans-serif;font-weight:400;font-size:180px;line-height:153px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.count__b{padding-bottom:16px}
.pcol{position:absolute;right:calc(var(--m) + 50px);top:50%;width:246px;transform:translateY(-50%);height:0;overflow:visible;margin:0}
.pc{position:absolute;left:0;width:246px;transform:translateY(-50%);opacity:.24;transition:opacity .32s ease;display:grid;gap:6px;cursor:pointer}
.pc.is-c{opacity:1}
.pc__cat{opacity:.52}.pc__t{font-family:Montserrat,sans-serif;font-weight:300;font-size:16px;line-height:16px;letter-spacing:.01em;text-transform:uppercase}
.pc__dash{display:block;width:12px;height:1px;background:currentColor;margin:4px 0}
.pc__d{max-width:246px}
.chips{position:absolute;right:var(--m);top:50%;display:flex;gap:3px;transform:translateY(-50%);mix-blend-mode:normal}
.chips i{width:15px;height:15px;background:#888;transition:background-color .52s cubic-bezier(.22,.61,.36,1)}
.ui .chips{mix-blend-mode:normal}
.hint{position:absolute;left:var(--m);bottom:20px}
.reel{position:absolute;right:var(--m);bottom:20px}

/* — заставка «толкатель»: буква S упирается в шторку и сдвигает её вправо — */
.push{position:fixed;inset:0;z-index:50;background:#fff;overflow:hidden}
.push__word{position:absolute;left:50%;top:50%;width:min(76vw,1100px);transform:translate(-50%,-50%);color:var(--acc)}
.push__word .wm{width:100%;height:auto}
.push__curtain{position:absolute;top:0;bottom:0;left:0;right:-200vw;background:#000;transform:translateX(0)}
.push__s{position:absolute;left:-150px;bottom:12vh;width:120px;fill:var(--acc);transform-origin:100% 100%}
html.is-safe .push{display:none}

/* — переход — */
.trans{position:fixed;inset:0;z-index:60;background:var(--panel);color:#fff;display:grid;place-items:center;transform:translateY(100%);pointer-events:none}
.trans__t{font-family:Montserrat,sans-serif;font-weight:300;font-size:min(9vw,120px);letter-spacing:-.02em;color:var(--acc)}

/* — контакт: бумажные карточки внахлёст — */
.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center}
.overlay[hidden]{display:none}
.overlay__bg{position:absolute;inset:0;background:rgba(236,236,236,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.paper{position:absolute;width:min(420px,86vw);padding:28px;display:grid;gap:16px;box-shadow:-2px 4px 4px 0 rgba(0,0,0,.23)}
.paper h2{font-family:Montserrat,sans-serif;font-weight:300;font-size:48px;line-height:48px;text-transform:uppercase;letter-spacing:.01em}
.paper--dark{background:#1A1A1A;color:#fff;transform:translate(-30%,-12%) rotate(-4deg);z-index:2}
.paper--grey{background:#D4D4D4;color:var(--ink);transform:translate(52%,22%) rotate(3deg)}
.paper__p{font-size:14px;line-height:1.4;font-weight:400}
.paper__mail{font-family:Montserrat,sans-serif;font-weight:400;font-size:22px;line-height:1.3;padding-bottom:4px;width:max-content;max-width:100%}
.paper__s{width:64px;fill:var(--acc)}
.overlay__x{position:absolute;right:var(--m);top:20px;z-index:3}

/* — текст для чтения без скрипта и для поисковиков (на экране не виден) — */
.plain{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html:not(.js) .plain{position:static;width:auto;height:auto;clip:auto;padding:24px;background:#fff}

@media (min-width:1100px){.svc--v{display:block}}
@media (max-width:1099px){.top--a{display:none}.top--b{left:auto;right:var(--m);top:40px}}
@media (max-width:800px){
  .cube{left:50%;margin-left:-28px;top:12px;height:100px;width:56px}
  .wm--v{width:100px}
  .menu{left:var(--m);top:14px;width:auto}.menu ul{display:none}.menu .svc{display:none}
  .menu.is-open ul{display:grid;position:fixed;left:0;right:0;top:0;bottom:0;padding:120px var(--m);background:var(--field);color:var(--ink);gap:10px}
  .menu.is-open .mi{font-size:30px;line-height:33px}
  .top,.meta,.svc--v,.hint{display:none}
  .count{left:var(--m);bottom:auto;top:120px}.count__a{font-size:90px;line-height:76.5px;letter-spacing:-.04em}
  .pcol{left:var(--m);right:var(--m);top:auto;bottom:90px;transform:none;width:auto}
  .pc{width:auto;transform:none;bottom:0;opacity:0}.pc.is-c{opacity:1}
  .chips{right:var(--m);top:auto;bottom:150px;transform:none}
  .reel{left:var(--m);right:auto;bottom:calc(20px + env(safe-area-inset-bottom))}
  .burger{display:flex!important}
  .paper h2{font-size:34px;line-height:36px}
  .paper--dark{transform:translate(-4%,-28%) rotate(-3deg)}.paper--grey{transform:translate(4%,34%) rotate(2deg)}
}
.burger{display:none;position:absolute;left:var(--m);top:22px;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;pointer-events:auto}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}