:root{
 /* Палитра измерена по 32 интерьерным фото продукции (media/i),
    а не подобрана на глаз. Медианы по тоновым группам:
    --terra #A75A2D — медиана насыщенных тёплых (тон 10-35°). Прежнее
      значение #a6552f почти совпало: терракота у Oikos подтверждена данными.
    --paper #EEEEED — медиана светлых НЕЙТРАЛЬНЫХ пикселей. Прежний
      кремовый #f4f1ea в фотографиях не встречается: это был дефолт
      «крем + сериф + глина», по которому сайт читается как сгенерированный.
    --ink   #191610 — медиана самых тёмных пикселей.
    --sand  #AD8A64 — медиана средних тёплых, самая массовая группа. */
 --paper:#EEEEED;
 --paper2:#DEDEDB;
 --ink:#191610;
 --ink2:#4a4239;
 --mut:#75695C;
 --line:#CFCCC6;
 --line2:#BDB9B1;
 /* #A75A2D (медиана из фото) на светлом фоне давал контраст 4.37 —
    чуть ниже нормы AA 4.5. Затемнён по светлоте на 0.03 при том же
    тоне 22° и насыщенности: 4.89. Это тот же цвет, просто читаемый. */
 --terra:#9B542A;
 --sand:#AD8A64;
 /* Bodoni Moda и Karla не содержат кириллицы — весь русский текст
    рисовался подстановочным шрифтом браузера. Заменены на пару
    с кириллицей того же издательского характера. */
 --fd:"Spectral",Georgia,serif;
 --fs:"Commissioner",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fs);
 font-size:16.5px;line-height:1.62;font-weight:400;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--terra);color:#fff}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;margin:0;letter-spacing:-.01em}
h1,h2,h3{font-weight:500}

.sheet{max-width:1180px;margin:0 auto;padding:0 34px}

.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .in{max-width:1180px;margin:0 auto;padding:15px 34px;
 display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.top nav{display:flex;gap:24px;font-size:14px;color:var(--ink2)}
.top nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.top nav a:hover{border-bottom-color:var(--terra);color:var(--ink)}
.top .mark{font-family:var(--fd);font-size:25px;letter-spacing:.14em;
 text-align:center;white-space:nowrap}
.top .rt{justify-content:flex-end}

.spread{padding:56px 0 30px}
.spread .kick{font-size:13.5px;
 color:var(--mut);margin-bottom:22px}
.spread h1{font-size:clamp(46px,8.2vw,116px);line-height:.93;
 letter-spacing:-.025em;max-width:13ch}
.spread h1 em{font-style:italic;font-weight:400}
.spread .body{display:grid;grid-template-columns:repeat(12,1fr);gap:26px;
 margin-top:40px;align-items:start}
.spread figure{grid-column:1/9;margin:0}
.spread figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.spread figcaption{font-size:12px;color:var(--mut);margin-top:9px;
 padding-top:8px;border-top:1px solid var(--line)}
.spread .side{grid-column:9/13;margin-top:64px}
.spread .side p{margin:0 0 15px;font-size:15.5px;color:var(--ink2)}
.spread .quote{font-family:var(--fd);font-style:italic;font-size:20px;
 line-height:1.35;color:var(--ink);border-left:2px solid var(--terra);
 padding-left:16px;margin:22px 0 0}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 margin-top:44px;padding:13px 0;font-size:13px;color:var(--mut);
 display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}

.issue{padding:74px 0 0}
.lead{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;
 padding-bottom:26px;border-bottom:2px solid var(--ink)}
.lead h2{font-size:clamp(28px,4vw,48px);line-height:1.03;letter-spacing:-.02em}
.lead p{margin:0;color:var(--ink2);font-size:15.5px}

.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;
 padding:52px 0;border-bottom:1px solid var(--line);align-items:start}
.pair .ph{grid-column:1/8}
.pair.flip .ph{grid-column:6/13;order:2}
.pair .tx{grid-column:9/13;padding-top:16px}
.pair.flip .tx{grid-column:1/5;order:1}
.pair .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pair .folio{font-family:var(--fd);font-size:13px;color:var(--mut);
 letter-spacing:.1em;margin-bottom:12px}
.pair h3{font-size:31px;line-height:1.06;margin-bottom:7px}
.pair .tag{font-style:italic;font-family:var(--fd);color:var(--terra);
 font-size:17px;margin-bottom:13px}
.pair .dsc{font-size:15px;color:var(--ink2);margin:0 0 17px}
.pair .spec{border-top:1px solid var(--line);font-size:13.5px}
.pair .spec div{display:flex;justify-content:space-between;gap:14px;
 padding:7px 0;border-bottom:1px solid var(--line)}
.pair .spec dt{color:var(--mut)}
.pair .spec dd{margin:0;text-align:right}
.pair .more{display:inline-block;margin-top:16px;font-size:14px;
 
 border-bottom:1px solid var(--terra);padding-bottom:3px;color:var(--terra)}
.pair .more:hover{background:var(--terra);color:#fff;padding:2px 7px 4px}

.swatch{padding:64px 0 10px}
.swatch h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:6px}
.swatch .note{color:var(--ink2);font-size:15px;max-width:60ch;margin:0 0 26px}
.band{display:flex;gap:2px;overflow-x:auto;padding-bottom:12px;
 scrollbar-width:thin}
.band figure{margin:0;flex:0 0 132px}
.band img{width:132px;height:132px;object-fit:cover}
.band figcaption{font-size:10.5px;letter-spacing:.08em;color:var(--mut);
 margin-top:6px;font-variant-numeric:tabular-nums}

.why{padding:70px 0}
.why h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:26px}
.why ol{list-style:none;counter-reset:w;margin:0;padding:0;
 column-count:2;column-gap:44px}
.why li{counter-increment:w;break-inside:avoid;margin-bottom:22px;
 padding-left:42px;position:relative}
.why li::before{content:counter(w,decimal-leading-zero);position:absolute;
 left:0;top:1px;font-family:var(--fd);font-size:14px;color:var(--terra)}
.why b{display:block;font-family:var(--fd);font-size:19px;font-weight:500;
 margin-bottom:3px}
.why span{font-size:14.5px;color:var(--ink2)}

.ask{border-top:2px solid var(--ink);padding:60px 0 66px;margin-top:20px}
.ask .in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ask h2{font-size:clamp(26px,3.6vw,42px);line-height:1.05;margin-bottom:12px}
.ask p{color:var(--ink2);margin:0 0 18px;font-size:15.5px}
.ask .meta{font-size:14px;color:var(--ink2);border-top:1px solid var(--line);
 padding-top:16px}
.ask .meta div{margin-bottom:7px}
.ask .meta a{border-bottom:1px solid var(--line2)}
form{display:grid;gap:15px}
label{display:block;font-size:13px;
 color:var(--mut);margin-bottom:5px}
input,textarea{width:100%;font-family:var(--fs);font-size:15.5px;
 padding:11px 13px;border:1px solid var(--line2);border-radius:2px;
 background:#fffdf9;color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--terra)}
button{font-family:var(--fs);font-size:14.5px;padding:14px 26px;background:var(--ink);color:var(--paper);
 border:none;border-radius:4px;cursor:pointer}
button:hover{background:var(--terra)}
.hint{font-size:12.5px;color:var(--mut)}

footer{background:var(--ink);color:#d8d0c4;padding:52px 0 34px;font-size:14px}
footer a{color:#d8d0c4}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:2.2fr 1fr 1.4fr;gap:38px}
footer .mark{font-family:var(--fd);font-size:23px;letter-spacing:.14em;
 color:#fff;margin-bottom:10px}
footer h4{font-size:13px;
 color:#9a9083;margin:0 0 11px;font-family:var(--fs);font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
.legal{border-top:1px solid #3a332b;margin-top:34px;padding-top:18px;
 font-size:12.5px;color:#9a9083;display:flex;gap:22px;flex-wrap:wrap;
 justify-content:space-between}

.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:30px;
 padding:44px 0 20px;align-items:start}
.pgrid .main{grid-column:1/8}
.pgrid .info{grid-column:9/13;position:sticky;top:18px}
.gal{display:grid;gap:3px}
.gal .big img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal .row{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.gal .row img{width:100%;aspect-ratio:1;object-fit:cover}
.crumb{font-size:12px;color:var(--mut);margin-bottom:14px}
.crumb a:hover{color:var(--terra)}
.info h1{font-size:40px;line-height:1.02;margin-bottom:8px}
.info .tag{font-family:var(--fd);font-style:italic;color:var(--terra);
 font-size:18px;margin-bottom:16px}
.info .dsc{font-size:15px;color:var(--ink2);margin-bottom:20px}
.info .spec{border-top:1px solid var(--line);font-size:14px;margin-bottom:22px}
.info .spec div{display:flex;justify-content:space-between;gap:14px;
 padding:8px 0;border-bottom:1px solid var(--line)}
.info .spec dt{color:var(--mut)}
.info .spec dd{margin:0;text-align:right}
.btn{display:inline-block;font-size:14px;padding:13px 24px;background:var(--ink);
 color:var(--paper);border-radius:4px}
.btn:hover{background:var(--terra)}
.btn.line{background:none;color:var(--ink);border:1px solid var(--line2)}
.btn.line:hover{border-color:var(--terra);color:var(--terra)}
.also{padding:58px 0 70px;border-top:1px solid var(--line);margin-top:40px}
.also h2{font-size:26px;margin-bottom:22px}
.arow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.arow a img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:9px}
.arow b{font-family:var(--fd);font-size:17px;font-weight:500;display:block}
.arow span{font-size:13px;color:var(--mut)}

.chip{display:flex;flex-wrap:wrap;gap:3px}
.chip span{flex:0 0 auto;padding:9px 12px;background:var(--paper2);
 border:1px solid var(--line);font-family:var(--fd);font-size:13px;
 color:var(--ink2);font-variant-numeric:tabular-nums}

.nf{padding:110px 0 130px}
.nf h1{font-size:clamp(60px,14vw,170px);line-height:.88;letter-spacing:-.03em}
.nf p{font-size:17px;color:var(--ink2);max-width:46ch;margin:18px 0 26px}

@media(max-width:1000px){
 .spread .body{grid-template-columns:1fr}
 .spread figure,.spread .side{grid-column:auto}
 .spread .side{margin-top:6px}
 .pair{gap:20px}
 .pair .ph,.pair.flip .ph{grid-column:1/13;order:1}
 .pair .tx,.pair.flip .tx{grid-column:1/13;order:2;padding-top:0}
 .pgrid{grid-template-columns:1fr}
 .pgrid .main,.pgrid .info{grid-column:auto}
 .pgrid .info{position:static}
 .ask .in{grid-template-columns:1fr;gap:26px}
 .fgrid{grid-template-columns:1fr 1fr}
 .arow{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
 .sheet{padding:0 20px}
 .top .in{grid-template-columns:1fr;gap:10px;padding:13px 20px}
 .top nav{display:none}
 .top .mark{text-align:left}
 .lead{grid-template-columns:1fr;gap:12px}
 .why ol{column-count:1}
 .fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}