/* ============================================================
   FLATHOUSE — flathousegoods.com
   Токены взяты из FLATHOUSE_brandbook.html v1.0 без изменений.
   Одна тема: костяной фон обязателен по брендбуку, тёмной версии
   у бренда нет. Ни одного растрового изображения — только SVG,
   поэтому грузить нечего кроме трёх шрифтов.
   ============================================================ */

:root{
  /* Палитра брендбука, раздел 04 */
  --bone:#F2EDE3;   /* фон, всегда. НЕ белый */
  --bone2:#E8E1D4;  /* шапки таблиц */
  --paper:#FFFDF9;  /* карточки поверх bone */
  --ink:#14110D;    /* весь текст, тёплая чернота */
  --soft:#6E675C;   /* вторичный текст — 4.79:1 на bone */
  --line:#D9D2C4;
  --verm:#FF3B1F;   /* Laundry   */
  --cobalt:#1F3BFF; /* Dishwasher */
  --kelp:#00A45A;   /* Toilet    */

  /* Типографика, раздел 05 */
  --display:"Archivo Black","Archivo Black Fallback",Helvetica,Arial,sans-serif;
  --heavy:"Archivo","Archivo Fallback",Helvetica,Arial,sans-serif;
  --body:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Шкала */
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:84px;
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
      padding:10px 16px;z-index:60;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px;top:8px}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}

/* ── шапка ─────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:20;background:var(--bone);
           border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;gap:var(--s3);padding-block:14px}
.lock{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.lock svg{display:block;flex:none}
.lock .word{font-family:var(--display);font-size:19px;letter-spacing:-.04em;line-height:1}
.site-nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.site-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--soft);text-decoration:none;padding:8px 10px;
            transition:color .12s ease,background-color .12s ease}
.site-nav a:hover{color:var(--ink);background:var(--bone2)}
.site-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

/* ── общие блоки ───────────────────────────────────── */
main{display:block}
.band{padding-block:var(--s6);border-top:1px solid var(--line)}
.band:first-child{border-top:0}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.22em;
         text-transform:uppercase;color:var(--soft);margin:0 0 var(--s3)}
h1,h2,h3{margin:0;text-wrap:balance}
.h-xl{font-family:var(--display);letter-spacing:-.035em;line-height:.94;
      font-size:clamp(32px,7.4vw,84px);max-width:20ch}
.h-lg{font-family:var(--display);letter-spacing:-.03em;line-height:1.06;
      font-size:clamp(25px,4.4vw,44px);max-width:19ch}
.h-md{font-family:var(--display);letter-spacing:-.03em;line-height:1.1;
      font-size:clamp(21px,3.2vw,30px);max-width:24ch}
.lede{font-size:18px;line-height:1.5;max-width:56ch;color:var(--soft);margin:var(--s3) 0 0}
.prose{max-width:66ch}
.prose p{margin:0 0 var(--s2)}
.prose h2{font-family:var(--heavy);font-weight:900;font-size:19px;letter-spacing:-.01em;
          margin:var(--s4) 0 var(--s1)}
.prose ul{margin:0 0 var(--s2);padding-left:20px}
.prose li{margin:5px 0}
.small{font-size:14px;color:var(--soft)}

/* ── герой ─────────────────────────────────────────── */
.hero{padding-block:var(--s5) var(--s6);border-top:0}
.hero-lower{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center;
            margin-top:var(--s5)}
@media(min-width:880px){.hero-lower{grid-template-columns:.8fr 1.45fr;gap:var(--s5)}}
.manifesto span{display:block;white-space:nowrap}
/* Строка манифеста никогда не должна переноситься: «Nothing to store.» — самая
   длинная, её ширина ровно 8.635 × кегль. Кегль считаем от ширины КАРТОЧКИ
   (cqw), а не от ширины окна — иначе в узком окне строка ломается пополам.
   Первая строка — запасной вариант для браузеров без контейнерных запросов. */
.beat .card{container-type:inline-size}
.beat .h-xl.manifesto{font-size:clamp(27px,4.4vw,52px)}
@supports (font-size:1cqw){
  .beat .h-xl.manifesto{font-size:min(11.2cqw,64px)}
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.link-strong{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;
             text-transform:uppercase;text-decoration:none;padding:12px 18px;
             border:1px solid var(--ink);color:var(--ink);
             transition:background-color .12s ease,color .12s ease}
.link-strong:hover{background:var(--ink);color:var(--bone)}
.link-quiet{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
            padding:12px 4px;color:var(--soft);text-decoration:none;
            border-bottom:1px solid var(--line);transition:color .12s ease}
.link-quiet:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── было/стало ─────────────────────── */
.cols2{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media(min-width:780px){.cols2{grid-template-columns:1fr 1fr}}
.swaplist{list-style:none;margin:0;padding:0}
.swaplist li{padding:14px 0;border-top:1px solid var(--line);font-size:15.5px}
.swaplist li:first-child{border-top:0}
.swaplist b{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.18em;
            text-transform:uppercase;color:var(--soft);display:block;margin-bottom:4px}
.swaplist li.now b{color:var(--ink)}

/* ── продукты ──────────────────────────────────────── */
.skus{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:780px){.skus{grid-template-columns:repeat(3,1fr)}}
.sku{background:var(--paper);border:1px solid var(--line);padding:24px 22px;
     display:flex;flex-direction:column}
.sku .cat{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.2em;
          text-transform:uppercase;color:var(--soft);line-height:1.6;margin:0;min-height:3.2em}
.sku .pack-art{display:block;width:100%;height:auto;margin:0 0 var(--s3);
               filter:drop-shadow(0 7px 11px rgba(20,17,13,.075))}
.sku .promise{font-family:var(--display);font-size:20px;letter-spacing:-.03em;line-height:1.08;
              color:var(--ink)}
.sku .form{font-size:14.5px;color:var(--soft);margin:var(--s2) 0 var(--s3)}
.sku .use{margin:auto 0 0;padding-top:var(--s2);border-top:2px solid var(--ink);
          font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
          color:var(--ink)}
.sku.verm .use{border-top-color:var(--verm)}
.sku.cobalt .use{border-top-color:var(--cobalt)}
.sku.kelp .use{border-top-color:var(--kelp)}

/* Знак как указатель SKU (брендбук §03): цветной тот брусок, что отвечает
   за продукт, два других чернильные. Легенда учит коду, карточка его повторяет. */
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
        margin-top:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.legend div{min-width:0}
.legend .mk{display:block}
.legend p{margin:10px 0 0;font-family:var(--mono);font-weight:700;font-size:10px;
          letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.sku .mk{display:none;margin:0 0 var(--s3)}
/* На десктопе легенда стоит ровно над своей колонкой — знак на карточке был бы
   повтором. Когда карточки встают в столбик, легенда уезжает наверх, и знак
   на карточке снова нужен. */
@media(max-width:779px){.sku .mk{display:block}}
@media(max-width:520px){
  .legend{gap:var(--s2)}
  .legend p{font-size:9px;letter-spacing:.12em}
}

/* ── без подписки ──────────────────────────────────── */
.slab{background:var(--ink);color:var(--bone);padding:clamp(30px,5vw,56px) clamp(22px,4vw,48px)}
.slab .eyebrow{color:#9A9287}
.slab p.body{color:#BDB5A8;max-width:54ch;margin:var(--s3) 0 0;font-size:15.5px}

/* ── чего мы не говорим ────────────────────────────── */
.saynot{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:700px){.saynot{grid-template-columns:1fr 1fr}}
.saynot div{background:var(--paper);border:1px solid var(--line);padding:22px 24px}
.saynot h3{font-family:var(--heavy);font-weight:900;font-size:17px;letter-spacing:-.01em;
           margin-bottom:var(--s1)}
.saynot p{margin:0;font-size:14.5px;color:var(--soft)}
.saynot .words{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink);
               margin-top:var(--s2);line-height:1.9;display:block}

/* ── таблицы раскрытия ─────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper);
           margin-bottom:var(--s3)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
caption{text-align:left;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;
        text-transform:uppercase;padding:14px 16px;background:var(--bone2);
        border-bottom:1px solid var(--line)}
th{text-align:left;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.13em;
   text-transform:uppercase;color:var(--soft);padding:11px 16px;
   border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-top:1px solid var(--line);color:var(--soft);
   font-variant-numeric:tabular-nums}
td.pending{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--soft)}
.notice{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--verm);
        padding:22px 24px;margin:var(--s3) 0 var(--s4)}
.notice p{margin:0 0 10px;max-width:68ch;font-size:15px}
.notice p:last-child{margin-bottom:0}
.notice .tag{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.2em;
             text-transform:uppercase;color:var(--verm);display:block;margin-bottom:10px}

/* ── контакты ──────────────────────────────────────── */
.tel{font-family:var(--display);font-size:clamp(28px,5.4vw,46px);letter-spacing:-.03em;
     line-height:1;text-decoration:none;display:inline-block;
     transition:color .12s ease}
.tel:hover{color:var(--verm)}
address{font-style:normal;font-size:15.5px;color:var(--soft);line-height:1.8}
address strong{color:var(--ink)}

/* ── подвал ────────────────────────────────────────── */
.site-foot{border-top:3px solid var(--ink);padding-block:var(--s3) var(--s5);margin-top:var(--s5)}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);justify-content:space-between}
.site-foot p,.site-foot nav{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
                            text-transform:uppercase;color:var(--soft);line-height:2;margin:0}
.site-foot nav{display:flex;gap:var(--s3);flex-wrap:wrap}
.site-foot a{text-decoration:none;color:var(--soft)}
.site-foot a:hover{color:var(--ink)}

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

}

.artnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;line-height:1.8;
         text-transform:uppercase;color:var(--soft);max-width:72ch;margin:var(--s3) 0 0}

/* ── сквозная сцена ─────────────────────────────────── */
.track{position:relative}
.stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;z-index:0;overflow:hidden}
.stage-svg{width:100%;height:100%;display:block}
.stage-note{position:absolute;right:20px;bottom:18px;margin:0;font-family:var(--mono);font-size:10px;
             letter-spacing:.16em;text-transform:uppercase;color:var(--soft);opacity:.75}
.beats{position:relative;margin-top:-100svh;z-index:1;pointer-events:none}
.beat{min-height:100svh;display:flex;align-items:center;padding-inline:20px}
.beat .card{max-width:30rem;width:100%;margin-inline:auto;pointer-events:auto}
@media(min-width:1000px){
  .beat{padding-inline:calc((100vw - var(--maxw))/2 + 20px)}
  .beat .card{margin-inline:0}
  .beat[data-beat="1"] .card{max-width:34rem}
}
@media(max-width:999px){
  /* сцена живёт в нижней полосе, текст в верхней — они не пересекаются */
  .stage{place-items:end center}
  .stage-svg{height:52svh}
  .beat{align-items:flex-start;padding-top:3svh}
  .beat .card{max-width:34rem}
  .beat .h-xl{font-size:clamp(29px,7.6vw,52px)}
  .beat .lede{font-size:16.5px}
  .beat .swaplist li{padding:10px 0;font-size:14.5px}
  .stage-note{right:auto;left:18px;bottom:12px;font-size:9px;opacity:.55}
}
.beat .h-lg,.beat .h-xl{margin:0}
.specs{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s4)}
@media(min-width:560px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec{border-top:2px solid var(--ink);padding-top:10px}
.spec .k{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.2em;
          text-transform:uppercase;color:var(--soft);margin:0 0 6px}
.spec .v{font-family:var(--heavy);font-weight:900;font-size:17px;letter-spacing:-.01em;margin:0}
.spec .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
          color:var(--soft);margin:4px 0 0}
.beat .swaplist{margin-top:var(--s4)}
#bottles,.env{will-change:transform,opacity}
#cam,#drawer{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .stage{position:static;height:auto}
  .stage-svg{height:auto;max-height:64svh}
  .beats{margin-top:0}
  .beat{min-height:0;padding-block:var(--s5)}
}