/* Hallmark · shape: showroom acrostic · genre: editorial · theme: custom · job: visit · idea: "the name КДШ spells out what the pavilion makes: кухни, диваны, шкафы" · vibe: "dark wood showroom, quiet, exact, bronze" · redesign: full
 * paper: oklch(93% 0.006 80) · accent: oklch(70% 0.09 70) · display: Cormorant Garamond · body: Manrope · hero: the acrostic set huge beside the factory's island kitchen · nav: solid bar, wordmark, five links, call · footer: mast, the wordmark over three lines · imagery: photographs from the partner factory's portfolio · signature: К Д Ш, the three initials in bronze that spell the range
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: E, the factory photos are portrait-only; set them at 3:4 everywhere instead of forcing wide crops
 */
/* Hallmark · waive 38iii · the bronze initials appear once, in the hero h1 only · К Д Ш spell the shop's name, the page's signature */

@font-face{font-family:"Cormorant";src:url("fonts/cormorant-garamond-cyrillic-wght-normal.woff2") format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Manrope";src:url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}

:root{
  /* цвет */
  --color-ground:oklch(18% 0.008 70);
  --color-ground-2:oklch(22% 0.01 70);
  --color-paper:oklch(93% 0.006 80);
  --color-paper-2:oklch(89.5% 0.009 78);
  --color-ink:oklch(21% 0.01 70);
  --color-ink-2:oklch(40% 0.012 70);
  --color-on-dark:oklch(93% 0.01 80);
  --color-on-dark-2:oklch(75% 0.012 80);
  --color-on-dark-3:oklch(30% 0.012 70);
  --color-rule:oklch(21% 0.01 70 / .16);
  --color-rule-dark:oklch(93% 0.01 80 / .16);
  --color-accent:oklch(70% 0.09 70);
  --color-accent-2:oklch(78% 0.08 72);
  --color-accent-ink:oklch(18% 0.008 70);
  --color-scrim:oklch(14% 0.01 70 / .78);
  --color-scrim-0:oklch(14% 0.01 70 / 0);
  --color-backdrop:oklch(12% 0.01 70 / .96);
  --color-focus:oklch(78% 0.08 72);
  /* шрифты */
  --font-display:"Cormorant",ui-serif,Georgia,serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  /* шкала */
  --space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:144px;
  --text-sm:.9375rem;--text-md:1.0625rem;--text-lg:1.25rem;
  --text-title:clamp(1.5rem,.9vw + 1.1rem,2rem);
  --text-section:clamp(2.6rem,3.6vw + 1rem,4.75rem);
  --text-display:clamp(4.25rem,10vw,10.5rem);
  --container:1320px;--gutter:20px;--gap:32px;--section-gap:96px;
  --radius:4px;--bar-h:72px;
  --ease-out:cubic-bezier(.16,1,.3,1);--dur-short:220ms;--dur-long:420ms;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + var(--space-md))}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-md)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
h1,h2,h3,p,figure,blockquote,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:500;overflow-wrap:break-word;min-width:0;text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
svg{display:block;flex:none}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums lining-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Кнопки: одна заливка, один контур */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:52px;padding:0 var(--space-lg);border-radius:var(--radius);border:1px solid transparent;font:600 var(--text-sm)/1 var(--font-body);white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.btn svg{width:17px;height:17px;fill:currentColor}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--line{border-color:currentColor}
.btn[aria-disabled="true"],button:disabled{opacity:.45;cursor:not-allowed}

/* Шапка: сплошная полоса */
.bar{position:sticky;top:0;z-index:300;background:var(--color-ground);color:var(--color-on-dark)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);max-width:var(--container);height:var(--bar-h);margin-inline:auto;padding-inline:var(--gutter)}
.mark{font:500 1.75rem/1 var(--font-display);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.mark span{font:500 var(--text-sm)/1 var(--font-body);letter-spacing:0;color:var(--color-on-dark-2);margin-left:var(--space-xs)}
.nav{display:none}
.btn--bar{min-height:44px;padding:0 var(--space-md)}
.btn__long{display:none}

/* Первый экран */
.hero{background:var(--color-ground);color:var(--color-on-dark);padding:var(--space-xl) 0 var(--space-2xl)}
.hero__grid{display:grid;gap:var(--space-xl)}
.hero__title{font-size:var(--text-display);font-weight:400;line-height:.88;letter-spacing:-.02em}
.hero__title b{font-weight:inherit;color:var(--color-accent)}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:inline-block}
.hero__lead{max-width:30rem;margin-top:var(--space-lg);font-size:var(--text-lg);line-height:1.5}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.hero__facts{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-on-dark-2)}
.hero__media{position:relative}
.hero__main{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5}
.hero__main img{width:100%;height:110%;object-fit:cover;margin-top:-5%}
.hero__second{display:none}

/* Секции */
.sec{padding:var(--section-gap) 0}
.h2{font-size:var(--text-section);line-height:1;letter-spacing:-.015em}
.lead{max-width:34rem;font-size:var(--text-lg);line-height:1.5;color:var(--color-ink-2)}
.note{font-size:var(--text-sm);color:var(--color-ink-2)}

/* Что значит КДШ */
.range__head{display:grid;gap:var(--space-md);margin-bottom:var(--space-xl)}
.range__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
.panel{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;color:var(--color-on-dark);text-decoration:none;isolation:isolate;transition:transform var(--dur-long) var(--ease-out)}
.panel--photo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.panel--sofa img{object-position:45% 55%}
.panel--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--color-scrim) 0%,var(--color-scrim-0) 38%,var(--color-scrim-0) 48%,var(--color-scrim) 100%)}
.panel__letter{position:absolute;top:var(--space-md);left:var(--space-lg);font:400 clamp(6rem,14vw,10rem)/1 var(--font-display);color:var(--color-accent)}
.panel__body{position:absolute;left:var(--space-lg);right:var(--space-lg);bottom:var(--space-lg);display:grid;gap:var(--space-xs)}
.panel__t{font:500 2rem/1.1 var(--font-display)}
.panel__d{font-size:var(--text-sm);color:var(--color-on-dark-2);max-width:22rem}

/* Работы */
.works{background:var(--color-paper-2)}
.works__head{display:grid;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.tabs{display:flex;gap:var(--space-lg);overflow-x:auto;scrollbar-width:none;visibility:hidden}
.js .tabs{visibility:visible}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:var(--space-xs) 0;border:0;border-bottom:2px solid transparent;background:none;font-size:var(--text-md);font-weight:500;color:var(--color-ink-2);cursor:pointer;white-space:nowrap;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.tab.is-on{color:var(--color-ink);border-bottom-color:var(--color-ink)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:var(--space-xs)}
.track::-webkit-scrollbar{display:none}
.work{position:relative;scroll-snap-align:start;transition:transform var(--dur-long) var(--ease-out),opacity var(--dur-long) var(--ease-out)}
.work img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);background:var(--color-paper)}
.work figcaption{margin-top:var(--space-sm);font-size:var(--text-sm)}
.work button{position:absolute;inset:0;border:0;padding:0;background:none;cursor:zoom-in;border-radius:var(--radius)}
.work button:focus-visible{outline-offset:-2px}
.track.is-swap .work{opacity:0;transform:translateY(12px)}
.works__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-top:var(--space-lg)}
.arrows{display:none;gap:var(--space-xs)}
.arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius);border:1px solid var(--color-rule);background:none;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.arrow:active{transform:translateY(1px)}

/* Материалы */
.mat{background:var(--color-ground);color:var(--color-on-dark)}
.mat__grid{display:grid;gap:var(--space-xl)}
.mat__img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.mat__img figcaption{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-on-dark-2)}
.mat .lead{color:var(--color-on-dark-2);margin-top:var(--space-lg)}
.specs{margin-top:var(--space-xl)}
.specs>div{display:grid;gap:var(--space-xs);padding:var(--space-md) 0;border-top:1px solid var(--color-rule-dark)}
.specs>div:last-child{border-bottom:1px solid var(--color-rule-dark)}
.specs dt{font-size:var(--text-sm);color:var(--color-on-dark-2)}
.specs dd{font-size:var(--text-md)}
.specs a{text-decoration:none;font-weight:600}

/* Как работаем */
.steps{display:grid;gap:0;margin-top:var(--space-xl)}
.steps li{padding:var(--space-lg) 0;border-top:1px solid var(--color-rule)}
.steps h3{font-size:var(--text-title);line-height:1.15}
.steps p{margin-top:var(--space-xs);color:var(--color-ink-2)}

/* Диваны */
.sofas{background:var(--color-paper-2)}
.sofas__head{display:grid;gap:var(--space-md);margin-bottom:var(--space-xl)}
.catalog{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl) var(--gap);margin:0;padding:0;list-style:none}
.sofa-card{transition:transform var(--dur-long) var(--ease-out),opacity var(--dur-long) var(--ease-out)}
.sofa-card figure{position:relative}
.sofa-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--color-paper)}
.sofa-card button{position:absolute;inset:0;border:0;padding:0;background:none;cursor:zoom-in;border-radius:var(--radius)}
.sofa-card button:focus-visible{outline-offset:-2px}
.sofa-card h3{margin-top:var(--space-md);font-size:var(--text-title);line-height:1.15}
.sofa-card p{margin-top:var(--space-xs);color:var(--color-ink-2);max-width:36rem}
.sofas__foot{margin-top:var(--space-2xl)}

/* Отзывы */
.reviews__grid{display:grid;gap:var(--space-2xl)}
.score__n{margin-top:var(--space-lg);font:400 clamp(6rem,12vw,10rem)/.9 var(--font-display)}
.score__src{margin-top:var(--space-sm);color:var(--color-ink-2)}
.aspects{display:grid;gap:var(--space-sm);margin-top:var(--space-xl);max-width:26rem}
.asp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-xs) var(--space-md);font-size:var(--text-sm)}
.asp dd{font-weight:600}
.asp i{grid-column:1/-1;position:relative;height:3px;background:var(--color-rule);overflow:hidden}
.asp i::after{content:"";position:absolute;inset:0;background:var(--color-ink);transform-origin:left;transform:scaleX(var(--v))}
.js .asp i::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.js .aspects.is-in .asp i::after{transform:scaleX(var(--v))}
.quotes{display:grid;gap:var(--space-xl)}
.quote blockquote{font:500 1.6rem/1.25 var(--font-display)}
.quote--big blockquote{font-size:clamp(2.2rem,3.4vw + .6rem,3.6rem);line-height:1.08}
.quote figcaption{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2)}

/* Приезжайте */
.visit{background:var(--color-ground);color:var(--color-on-dark)}
.visit__grid{display:grid;gap:var(--space-xl)}
.status{margin-top:var(--space-lg);font:500 var(--text-title)/1.2 var(--font-display);color:var(--color-accent-2)}
.specs--light{margin-top:var(--space-lg)}
.visit__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.visit__map{min-height:420px;border-radius:var(--radius);overflow:hidden;background:var(--color-ground-2)}
.visit__map iframe{display:block;width:100%;height:100%;min-height:420px;border:0}

/* Подвал */
.foot{background:var(--color-ground-2);color:var(--color-on-dark-2);padding:var(--space-2xl) 0 calc(var(--space-3xl) + env(safe-area-inset-bottom))}
.foot__mark{font:400 clamp(7rem,30vw,22rem)/.8 var(--font-display);letter-spacing:.02em;color:var(--color-on-dark-3)}
.foot__row{display:grid;gap:var(--space-md);margin-top:var(--space-xl);font-size:var(--text-sm)}
.foot a{color:var(--color-on-dark);text-decoration:none}

/* Звонок на телефоне */
.fab{position:fixed;z-index:200;left:var(--space-sm);right:var(--space-sm);bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:var(--radius);background:var(--color-accent);color:var(--color-accent-ink);font-weight:700;text-decoration:none;transform:translateY(160%);transition:transform var(--dur-long) var(--ease-out)}
.fab.is-on{transform:none}

/* Просмотр фото */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--color-backdrop);color:var(--color-on-dark)}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:transparent}
.lb__fig{display:grid;justify-items:center;gap:var(--space-sm);padding:var(--space-3xl) var(--space-md)}
.lb__fig img{max-height:78vh;max-height:78dvh;width:auto;border-radius:var(--radius)}
.lb__fig figcaption{font-size:var(--text-sm);color:var(--color-on-dark-2)}
.lb__btn{position:fixed;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius);border:1px solid var(--color-rule-dark);background:none;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out)}
.lb__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lb__close{top:calc(var(--space-md) + env(safe-area-inset-top));right:var(--space-md)}
.lb__prev{left:var(--space-md);bottom:calc(var(--space-lg) + env(safe-area-inset-bottom))}
.lb__next{right:var(--space-md);bottom:calc(var(--space-lg) + env(safe-area-inset-bottom))}

/* Появление: видно без скриптов, прячется только когда скрипт есть */
.js .ln>span{transform:translateY(105%);animation:lineUp 1.1s var(--ease-out) forwards}
.js .ln:nth-child(2)>span{animation-delay:.1s}
.js .ln:nth-child(3)>span{animation-delay:.2s}
.js .intro{opacity:0;animation:fadeIn .9s var(--ease-out) .55s forwards}
.js .intro-img{opacity:0;animation:fadeIn 1.2s var(--ease-out) .25s forwards}
@keyframes lineUp{to{transform:none}}
@keyframes fadeIn{to{opacity:1}}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}
.m .ln>span,.m .intro,.m .intro-img{animation:none}
.m .rv{transition:none}

/* Планшет */
@media (min-width:640px){
  :root{--gutter:32px;--section-gap:120px}
  .btn__long{display:inline}
  .btn__short{display:none}
  .range__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .range__grid .panel:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .track{grid-auto-columns:calc((100% - var(--space-md)) / 2.3)}
  .js .arrows{display:flex}
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
  .foot__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fab{display:none}
}

/* Десктоп */
@media (min-width:1024px){
  :root{--gutter:48px;--section-gap:144px}
  .nav{display:flex;gap:var(--space-lg)}
  .nav a{font-size:var(--text-sm);text-decoration:none;color:var(--color-on-dark-2);padding:var(--space-xs) 0;border-bottom:1px solid transparent;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
  .hero{display:flex;align-items:center;min-height:calc(100svh - var(--bar-h));padding:var(--space-2xl) 0}
  .hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:var(--space-2xl)}
  .hero__media{height:min(72svh,720px)}
  .hero__main{position:absolute;inset:0 0 0 22%;aspect-ratio:auto}
  .hero__second{display:block;position:absolute;left:0;bottom:8%;width:34%;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);outline:8px solid var(--color-ground)}
  .hero__second img{width:100%;height:100%;object-fit:cover}
  .range__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--gap)}
  .range__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
  .range__grid .panel:first-child{grid-column:auto;aspect-ratio:auto}
  .panel{aspect-ratio:3/4}
  .works__head{grid-template-columns:auto auto;justify-content:space-between;align-items:end}
  .track{grid-auto-columns:calc((100% - 3 * var(--space-md)) / 4)}
  .mat__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-3xl);align-items:center}
  .steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .steps li{padding-right:var(--space-md)}
  .sofas__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--gap)}
  .reviews__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-3xl)}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--space-2xl)}
  .quote--big{grid-column:1/-1}
  .visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-3xl);align-items:stretch}
  .visit__map{min-height:560px}
  .foot{padding-bottom:var(--space-2xl)}
}

/* Наведение: только мышь, сигнал на контейнере */
@media (hover:hover) and (pointer:fine){
  .btn--accent:hover{background:var(--color-accent-2)}
  .btn--line:hover{border-color:var(--color-accent);color:var(--color-accent)}
  .nav a:hover{color:var(--color-on-dark);border-bottom-color:var(--color-accent)}
  .tab:hover:not(.is-on){color:var(--color-ink)}
  .arrow:hover{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
  .work:hover{transform:translateY(-4px)}
  .sofa-card:hover{transform:translateY(-4px)}
  .panel:hover{transform:translateY(-4px)}
  .lb__btn:hover{background:var(--color-rule-dark)}
  .foot a:hover{color:var(--color-accent-2)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ln>span,.js .intro,.js .intro-img{animation:none;opacity:1;transform:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .asp i::after{transform:scaleX(var(--v));transition:none}
  [data-par]{transform:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}