/* Студия печати на холсте: шаблон главной страницы. Холст на песочной стене: картины разных размеров на одной сетке из 12 колонок. */
@font-face{font-family:Literata;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/literata-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Literata;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/literata-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/literata-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Literata;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/literata-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/literata-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Literata;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/literata-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#ddd6c6; --surface:#d2cab8; --edge:#b7ad96; --ink:#2a2a26; --muted:#3d3b34;
  --accent:#4f6238; --accent-dk:#3f5028; --accent-ink:#ffffff; --field:#3f5a2a; --field-ink:#ffffff;
  --f:Literata,Georgia,"Times New Roman",serif;
  --s-sm:1rem;
  --s-body:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --s-lead:clamp(1.375rem,1.05rem + 1.05vw,2.125rem);
  --s-head:clamp(2.25rem,1.5rem + 3.2vw,4rem);
  --s-disp:clamp(2.75rem,1rem + 6.4vw,7.25rem);
  --m:clamp(20px,6vw,96px); --g:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s-body)/1.55 var(--f);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-weight:500;letter-spacing:-.02em;line-height:1;margin:0}
h2{font-size:var(--s-head)}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--accent);color:var(--accent-ink);font:600 var(--s-body)/1 var(--f);text-decoration:none;transition:background .25s,transform .25s}
.btn:hover{background:var(--accent-dk)} .btn:active{transform:translateY(2px)}
.btn--s{min-height:44px;padding:0 20px;font-size:var(--s-sm)}
.link,.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;transition:color .2s}
.link:hover,.ul:hover{color:var(--accent)}

.top{display:flex;align-items:center;gap:28px;padding:18px var(--m)}
.mark{font:600 var(--s-body)/1 var(--f);text-decoration:none;letter-spacing:-.02em}
.top__nav{display:flex;gap:28px;margin-left:auto;font-size:var(--s-sm)}
.top__nav a{text-decoration:none;transition:color .2s}
.top__nav a:hover{color:var(--accent)}

/* Первый экран: строка крупного шрифта, ниже холст со смещением */
.hero{padding:clamp(20px,3.5vw,48px) var(--m) 0}
.hero__h{font-size:var(--s-disp);line-height:.98;max-width:13em}
.hero__h .w{display:inline-block;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .hero__h .w{opacity:0;transform:translateY(.4em)}
.js .hero__h.in .w{opacity:1;transform:none}
.hero__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:clamp(20px,3vw,40px)}
.hero__text{grid-column:1 / span 5;grid-row:1;align-self:start;padding-right:clamp(0px,2vw,32px)}
.lead{font-size:var(--s-lead);line-height:1.22;letter-spacing:-.01em;max-width:24em}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(20px,2.4vw,32px)}
.canvas{position:relative;margin:0;isolation:isolate}
.canvas::after{content:"";position:absolute;inset:12px -12px -12px 12px;background:var(--edge);z-index:-1}
.canvas img{width:100%;height:100%;object-fit:cover}
.canvas--hero{grid-column:6 / -1;grid-row:1 / span 2;aspect-ratio:16/10;margin-right:12px}
.canvas--hero img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.canvas--hero img.is-on{opacity:1}
.js .canvas--hero img{clip-path:inset(0 0 100% 0)}
.js .canvas--hero.in img{clip-path:inset(0);transition:opacity 1.6s ease,clip-path 1.7s cubic-bezier(.2,.7,.2,1)}
.canvas--tall{grid-column:4 / span 2;grid-row:2;align-self:end;aspect-ratio:3/4;margin:0 12px 0 0;transform:translateY(56px)}
.canvas--sq{grid-column:1 / span 2;grid-row:2;align-self:end;aspect-ratio:1;margin:0 12px 0 0;transform:translateY(112px)}
.hero + .print{padding-top:clamp(150px,16vw,260px)}

/* Что печатаем: лента кадров одной высоты, один приподнят */
.print{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(96px,12vw,200px) 0 0 var(--m)}
.print__side{grid-column:1 / span 3;display:flex;flex-direction:column;gap:20px;padding-right:var(--g)}
.note{font-size:var(--s-sm);color:var(--ink);margin-top:clamp(28px,5vw,110px);max-width:26ch;line-height:1.5}
.arrows{display:flex;gap:8px}
.arrows button{width:48px;height:48px;border:0;background:var(--surface);color:var(--ink);font:600 var(--s-body)/1 var(--f);cursor:pointer;transition:background .2s,transform .2s}
.arrows button:hover{background:var(--accent);color:#fff} .arrows button:active{transform:translateY(2px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.run{grid-column:4 / -1;display:flex;align-items:flex-end;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:64px var(--m) 20px 0;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;cursor:grab}
.run.drag{cursor:grabbing;scroll-snap-type:none}
.fr{flex:none;margin:0;scroll-snap-align:start}
.fr img{height:clamp(240px,34vh,360px);width:auto;max-width:none;user-select:none;-webkit-user-drag:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fr:hover img{transform:translateY(-6px)}
.fr--lift{transform:translateY(-52px)}
.fr figcaption{margin-top:12px;font-size:var(--s-sm);line-height:1.4;color:var(--muted);max-width:21ch}
.fr figcaption b{display:block;color:var(--ink);font-weight:600}
.print__credit{grid-column:4 / -1;font-size:var(--s-sm);color:var(--muted);padding:0 var(--m) 0 0}

/* Примерка */
.try{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(96px,12vw,200px) var(--m) 0;align-items:start}
.try__side{grid-column:1 / span 5;display:flex;flex-direction:column;gap:22px;max-width:30em}
.try__side p{font-size:var(--s-body);color:var(--ink)}
.try__pick{display:flex;gap:10px}
.pick{width:76px;height:76px;padding:0;border:0;background:var(--surface);cursor:pointer;opacity:.55;transition:opacity .25s,transform .25s;outline-offset:4px}
.pick img{width:100%;height:100%;object-fit:cover}
.pick:hover{opacity:.9} .pick.is-on{opacity:1;transform:translateY(-6px)}
.try__range{display:flex;flex-direction:column;gap:10px;font-size:var(--s-sm);color:var(--muted)}
.try__range input{width:100%;accent-color:var(--accent);height:32px}
.try__out{font:500 var(--s-lead)/1 var(--f);letter-spacing:-.01em}
.wall{grid-column:7 / -1;position:relative;aspect-ratio:16/11;background:var(--surface);overflow:hidden;container-type:inline-size;--cm:100;--r:1.5}
.wall::before{content:"";position:absolute;left:0;right:0;bottom:0;height:17cqw;background:#c2b8a1}
.wall__art{position:absolute;left:50%;bottom:36cqw;width:calc(var(--cm) / 220 * 62cqw);aspect-ratio:var(--r);height:auto;object-fit:cover;transform:translateX(-50%);transition:width .25s ease,aspect-ratio .25s ease}
.sofa i{position:absolute;display:block}
.sofa__back{left:19cqw;bottom:23cqw;width:62cqw;height:13.5cqw;background:#8c9772}
.sofa__seat{left:19cqw;bottom:16cqw;width:62cqw;height:9cqw;background:#7a8561}
.sofa__arm{bottom:16cqw;width:5.5cqw;height:16cqw;background:#6c7756}
.sofa__arm--l{left:16.4cqw} .sofa__arm--r{left:78.2cqw}
.sofa__leg{bottom:13.4cqw;width:1.8cqw;height:2.6cqw;background:#2a2a26}
.sofa__leg--l{left:20.6cqw} .sofa__leg--r{left:77.6cqw}
.lamp{position:absolute;right:7cqw;bottom:16cqw;width:.6cqw;height:40cqw;background:var(--ink)}
.lamp::before{content:"";position:absolute;left:-3.6cqw;top:-5.4cqw;width:7.8cqw;height:6cqw;background:#efe6d0;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}

/* Как заказать: три снимка разных размеров по диагонали */
.how{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(110px,14vw,220px) var(--m) 0;align-items:start}
.how__h{grid-column:8 / -1;grid-row:1;font-size:var(--s-head)}
.how__a{grid-column:1 / span 4;grid-row:1 / span 3;margin:0;aspect-ratio:3/4}
.how__pa{grid-column:5 / span 3;grid-row:1;align-self:end}
.how__b{grid-column:6 / span 3;grid-row:2;aspect-ratio:1;margin:clamp(90px,10vw,170px) 0 0}
.how__pb{grid-column:9 / span 4;grid-row:2;margin-top:clamp(90px,10vw,170px)}
.how__c{grid-column:8 / span 5;grid-row:3;aspect-ratio:16/10;margin:clamp(90px,10vw,170px) 0 0}
.how__pc{grid-column:3 / span 4;grid-row:3;margin-top:clamp(90px,10vw,170px);text-align:left}
.how figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.how p{font-size:var(--s-body);max-width:36ch}
.how b{font-weight:600}

/* О студии */
.about{padding:clamp(110px,14vw,220px) var(--m) 0}
.about h2{font-size:var(--s-head);margin-bottom:24px}
.about .lead{max-width:20em}
.about__tiles{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:var(--g);margin-top:clamp(40px,5vw,72px)}
.about__photo{grid-column:1 / span 8;grid-row:1 / span 2;margin:0;position:relative;aspect-ratio:16/10;background:#0b0b0a}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__quote{position:absolute;top:0;right:0;width:min(340px,48%);padding:22px;background:var(--bg);font-size:var(--s-sm);line-height:1.5;color:var(--ink)}
.about__tile{grid-column:9 / -1;grid-row:1;background:var(--field);color:var(--field-ink);aspect-ratio:4/3;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.about__tile span{font:500 var(--s-disp)/.8 var(--f);letter-spacing:-.04em}
.about__tile small{font-size:var(--s-sm)}
.facts{grid-column:9 / -1;grid-row:2;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;align-content:start;padding-top:8px}
.facts dt{font-size:var(--s-sm);color:var(--muted)}
.facts dd{margin:2px 0 0;font-size:var(--s-sm);line-height:1.4;font-weight:600}

/* Контакты */
.contact{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start;padding:clamp(120px,15vw,240px) var(--m) clamp(80px,9vw,140px)}
.contact__s{grid-column:1 / span 6;font-size:var(--s-lead);line-height:1.15;letter-spacing:-.01em;max-width:21em}
.contact__p{grid-column:8 / span 2;margin:0}
.contact__p img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;max-width:170px}
.contact__l{grid-column:10 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.contact__q{font-weight:600;font-size:var(--s-body)}
.ul{font-size:var(--s-body)}
.contact__c{font-size:var(--s-sm);color:var(--muted);margin-top:6px}

/* Подвал: имя первым */
.foot{background:var(--field);color:var(--field-ink);padding:clamp(48px,6vw,96px) var(--m) 28px;overflow:hidden}
.foot__name{font:500 clamp(2.6rem,13vw,16rem)/.9 var(--f);letter-spacing:-.04em;white-space:nowrap;margin:0 0 clamp(40px,6vw,88px)}
.foot__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start}
.foot__places{grid-column:1 / span 5;display:flex;flex-direction:column;gap:8px}
.foot__places a{font-size:var(--s-lead);line-height:1.15;text-decoration:none;color:#e6efd9;transition:color .2s}
.foot__places a:hover{color:#ffffff;text-decoration:underline}
.foot__links{grid-column:8 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:var(--s-sm)}
.foot__links a{text-decoration:none;transition:opacity .2s} .foot__links a:hover{opacity:.7}
.foot__legal{display:grid;grid-template-columns:1fr auto;gap:12px 24px;margin-top:clamp(56px,7vw,110px);font-size:var(--s-sm);color:#d3dcc6;align-items:start}
.foot__legal p{max-width:70ch;line-height:1.5}
.foot__credits{grid-column:1 / -1;order:3;max-width:68ch !important;color:#c3cfb4;font-size:var(--s-sm);line-height:1.55}

/* Появление блоков */
.rv{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none}
.js .canvas--tall.rv{transform:translateY(96px)} .js .canvas--tall.rv.in{transform:translateY(56px)}
.js .canvas--sq.rv{transform:translateY(152px)} .js .canvas--sq.rv.in{transform:translateY(112px)}
.js .fr--lift{opacity:1}

@media (max-width:860px){
  .top__nav{display:none} .top{justify-content:space-between}
  .hero__h{font-size:clamp(2.6rem,11.5vw,4rem)}
  .hero__row{display:flex;flex-direction:column;gap:28px}
  .hero__text{padding:0}
  .canvas--hero{order:2;margin-right:12px;aspect-ratio:4/3}
  .canvas--tall,.canvas--sq{order:3;transform:none !important;width:64%;align-self:flex-start}
  .canvas--sq{width:46%;align-self:flex-end;margin-top:-90px}
  .js .canvas--tall.rv,.js .canvas--sq.rv{transform:translateY(26px) !important}
  .js .canvas--tall.rv.in,.js .canvas--sq.rv.in{transform:none !important}
  .hero + .print{padding-top:80px}
  .print{display:block;padding:80px 0 0 var(--m)}
  .print__side{padding-right:var(--m);margin-bottom:24px}
  .note{margin-top:8px}
  .run{padding:56px var(--m) 16px 0}
  .fr img{height:34vw;min-height:150px}
  .fr--lift{transform:translateY(-28px)}
  .print__credit{padding:0 var(--m) 0 0;margin-top:10px}
  .try{display:block;padding:80px var(--m) 0}
  .try__side{max-width:none}
  .wall{margin-top:28px}
  .how{display:flex;flex-direction:column;gap:22px;padding-top:90px}
  .how__h{margin-bottom:8px}
  .how__a{width:100%} .how__b{width:62%;align-self:flex-end;margin:20px 0 0} .how__c{width:78%;margin:20px 0 0}
  .how__pa,.how__pb,.how__pc{margin-top:0;max-width:none}
  .how p{font-size:var(--s-body)}
  .about{padding-top:90px}
  .about__tiles{display:flex;flex-direction:column}
  .about__photo{aspect-ratio:4/3} .about__quote{position:static;width:auto;padding:18px 0 0;background:none}
  .about__photo{display:flex;flex-direction:column;aspect-ratio:auto;background:none}
  .about__photo img{aspect-ratio:4/3;height:auto}
  .about__tile{aspect-ratio:3/2}
  .contact{display:flex;flex-direction:column;gap:28px;padding-top:96px}
  .contact__s{font-size:1.375rem}
  .contact__p img{max-width:96px}
  .foot__row{display:flex;flex-direction:column;gap:28px}
  .foot__places a{font-size:1.5rem}
  .foot__legal{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .js .rv,.js .hero__h .w{opacity:1 !important;transform:none !important}
  .js .canvas--hero img{clip-path:none !important}
}