/* ==========================================================================
   ВЯЗАЙКА — style.css
   Светлое элегантное редакционное направление. Один файл, без сборщика.
   ========================================================================== */

:root{
  --brown:      #4B362B;
  --brown-dim:  #6b5445;
  --caramel:    #C68B59;
  --caramel-dim:#a86f42;
  --beige:      #DCC9B6;
  --cream:      #F8F4EE;
  --sage:       #8FA58C;
  --sage-dim:   #6f8770;

  --text:       var(--brown);
  --text-dim:   rgba(75, 54, 43, 0.8);
  --text-dim2:  rgba(75, 54, 43, 0.45);
  --on-dark:    #F8F4EE;
  --on-dark-dim:rgba(248, 244, 238, 0.75);

  --white:#fff;

  --status-available: var(--sage);
  --status-taken:     var(--caramel);

  --border: 1px solid rgba(75, 54, 43, 0.14);

  --radius:    22px;
  --radius-s:  12px;
  --radius-pill: 100px;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', Arial, sans-serif;

  --container-width: 1440px;
  --pad-x: 24px;

  --dur: 0.3s;
}

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

a{ text-decoration: none; color: inherit; }
a, button{ transition: color var(--dur), background var(--dur), border-color var(--dur), transform var(--dur); }

h1,h2,h3{ font-family: var(--font-head); font-weight: 600; line-height: 1.1; }

img{ display:block; max-width:100%; }

::selection{ background: var(--caramel); color: var(--cream); }

.container{
  max-width: calc(var(--container-width) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-size:15px; font-weight:600;
  padding:15px 30px; border-radius: var(--radius-pill); border:none; cursor:pointer;
  white-space: nowrap;
}
.btn-primary{ background: var(--caramel); color:#fff; }
.btn-primary:hover{ background: var(--caramel-dim); transform: translateY(-1px); }
.btn-outline{ background: transparent; color: var(--on-dark); border:1px solid rgba(248,244,238,0.6); }
.btn-outline:hover{ border-color: var(--on-dark); background: rgba(248,244,238,0.12); }
.btn-outline-dark{ background: transparent; color: var(--brown); border:1px solid rgba(75,54,43,0.35); }
.btn-outline-dark:hover{ border-color: var(--brown); background: rgba(75,54,43,0.06); }

/* ===== SECTION SHELL ===== */
.section{ padding-block: 120px; position:relative; }
.section--tight{ padding-block: 90px; }
@media (max-width:1024px){ .section{ padding-block:80px; } }
@media (max-width:768px){ .section{ padding-block:60px; } }

/* Вязаная текстура фоном — фото реальной вязки, приглушённое кремовой вуалью.
   Один фиксированный слой (без повтора) — тайлинг большого фото по всей
   длинной секции сильно нагружал рендер. */
.knit-texture{
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(248,244,238,0.85), rgba(248,244,238,0.85)),
    url("../images/textures/knit-bg1.jpg");
  background-size: cover, cover;
  background-position: center, bottom;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}
@media (max-width:900px){
  .knit-texture{ background-attachment: scroll, scroll; }
}

.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color: var(--caramel); margin-bottom:16px;
}
.eyebrow--light{ color: var(--beige); }

.section-title{
  font-size: clamp(30px, 3.6vw, 48px); color: var(--text); max-width:760px; margin-bottom:20px;
}
.section-title em{ font-style:italic; color: var(--caramel); }
.section-title--light{ color: var(--on-dark); }
.section-title--light em{ color: var(--beige); }

.section-lead{ font-size:18px; color: var(--text-dim); max-width:640px; line-height:1.7; }

.section-head{ margin-bottom:56px; }
.section-head--center{display: flex;flex-direction: column; align-items: center; text-align:center; margin-inline:auto; }
.section-head--center .section-lead{ margin-inline:auto; }

/* ===== HEADER ===== */
.header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center;
  padding: 10px var(--pad-x);
  background: rgba(248,244,238,0.9); backdrop-filter: blur(10px);
  transition: box-shadow var(--dur);
}
@media (max-width:900px){.header{padding: 20px var(--pad-x)}}
.header.is-scrolled{
  box-shadow: 0 2px 24px rgba(75,54,43,0.08);
}
.header__logo{ display:block; width:150px; }
@media (max-width:900px) {.header__logo{width: 120px;}}
.header__logo img{ width:100%; height:auto; }

/* Меню сгруппировано вокруг логотипа и вместе с ним центрировано по хедеру */
.header__center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:28px;
}

.header__right{ display:flex; align-items:center; gap:24px; margin-left:auto; }

.header__nav{ display:flex; align-items:center; gap:28px; }
@media (max-width:900px){ .header__nav{ display:none; } }
.header__link{ font-size:14px; color: var(--text); position:relative; padding-bottom:4px; }
.header__link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--caramel);
  transition: width var(--dur);
}
.header__link:hover::after{ width:100%; }

.header__cta{ }
@media (max-width:900px){ .header__cta{ display:none; } }

.header__burger{
  display:none; background:transparent; border:none; width:30px; height:20px; position:relative; cursor:pointer;
}
.header__burger span, .header__burger span::before, .header__burger span::after{
  position:absolute; left:0; width:100%; height:2px; background: var(--brown); border-radius:2px;
}
.header__burger span{ top:9px; }
.header__burger span::before{ content:''; top:-8px; }
.header__burger span::after{ content:''; top:8px; }
@media (max-width:900px){ .header__burger{ display:block; } }

.mobile-menu{
  position:fixed; inset:0; z-index:101; background: var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transform: translateY(-10px);
  transition: opacity var(--dur), transform var(--dur);
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; transform:none; }
.mobile-menu__link{ font-family: var(--font-head); font-size:26px; color: var(--brown); }
.mobile-menu__close{
  position:absolute; top:20px; right:24px; background:transparent; border:none; font-size:28px; line-height:1;
  color: var(--brown); cursor:pointer;
}

/* ===== HERO (полноэкранное фото, контент поверх) ===== */
.hero{
  position:relative; height:100vh; min-height:640px; overflow:hidden;
  display:flex; flex-direction:column;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,14,10,0.6) 0%, rgba(20,14,10,0.3) 22%, rgba(20,14,10,0.65) 42%, rgba(20,14,10,0.7) 72%, rgba(20,14,10,0.8) 100%);
}
.hero__top{ position:relative; z-index:2; padding-top:104px; }
.hero__content{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom: 90px;
}
.hero__inner{ max-width:1200px;display: flex;flex-direction: column; align-items: center;}
.hero__tag{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,0.5); padding:8px 16px; border-radius: var(--radius-pill);
  background: rgba(75,54,43,0.25); backdrop-filter: blur(4px); margin-bottom:24px;
}
.hero__tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
.hero__title{
  font-size: clamp(38px, 5.2vw, 66px); color:#fff; margin-bottom:22px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 8px 40px rgba(0,0,0,0.5);
}
.hero__title em{ display:block; font-style:italic; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 8px 40px rgba(0,0,0,0.6); }

.hero__title--yarn{
  margin-bottom: 26px;
  opacity: 0;
  animation: hero-yarn-in 0.9s ease 0.15s forwards;
}
.hero__title--yarn img{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.4));
}
@keyframes hero-yarn-in{
  from{ opacity:0; transform: translateY(14px) scale(0.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero__title--yarn{ animation:none; opacity:1; }
}
.hero__sub{font-family: var(--font-head);
  font-style: italic; font-size: clamp(24px, 2.8vw, 38px); color: var(--cream); max-width:840px; margin-bottom:36px; text-shadow:0 2px 12px rgba(0,0,0,0.45); }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero__marquee{ position:relative; z-index:2; background: var(--caramel); overflow:hidden; }
.hero__marquee-track{ display:flex; width:max-content; gap:40px; padding:12px 0; animation: marquee 40s linear infinite; }
.hero__marquee-track span{ font-family: var(--font-head); font-style:italic; font-size:20px; color:#fff; white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== ФИКСИРОВАННЫЙ ФОН: фото стоит, контент скроллится поверх ===== */
.pinned{
  position:relative; overflow:hidden; color: var(--on-dark);
}
.pinned__bg{
  position:absolute; inset:0; z-index:0;
  background-attachment: fixed;
  background-size: cover;
  background-position: right top;
}

@media (max-width: 768px){
  .pinned__bg{background-position: 75% top;}
}
@media (max-width: 480px){
  .pinned__bg{background-position: 55% top;}
}
.pinned__overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(30,20,14,0.72) 0%, rgba(30,20,14,0.55) 100%);
}
.pinned__content{ position:relative; z-index:2; }

@media (max-width: 900px){
  /* background-attachment:fixed капризничает на мобильных — отключаем, оставляем статичный фон */
  .pinned__bg{ background-attachment: scroll; }
}

.manifesto-pinned{ padding-block: 140px; }
@media (max-width:768px){ .manifesto-pinned{ padding-top:320px; padding-bottom:80px; } }

.manifesto__quote{
  font-family: var(--font-head); font-style:italic; font-size: clamp(24px, 2.8vw, 38px);
  line-height:1.35; margin-bottom:28px; max-width:720px;
  padding-left:32px; border-left:3px solid var(--beige);
}
.manifesto__text{ font-size:20px; line-height:1.9; color: var(--on-dark-dim); max-width:520px; }

/* ===== HOW (timeline) ===== */
#how{position: relative; overflow:hidden;}
.how__bg1{position: absolute; top: -8%; left: -4%; opacity: 0.4; rotate: 30deg; z-index:0; pointer-events:none; width:26vw; height:auto; opacity: 0.1;rotate: 5deg;}
.how__bg2{position: absolute; bottom: 0%; right: -4%; opacity: 0.4; z-index:0; pointer-events:none; width:22vw; height:auto; opacity: 0.1;rotate: 35deg;}
#how .container{ position:relative; z-index:1; }
.how__timeline{ position:relative; display:flex; gap:56px; }
.how__line{ position:relative; width:2px; flex-shrink:0; background: rgba(75,54,43,0.14); border-radius:2px; }
.how__line-fill{
  position:absolute; top:0; left:0; width:100%; height:100%; background: var(--caramel); border-radius:2px;
  transform-origin: top center; transform: scaleY(0);
}
.how__steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; flex:1; }
.how__step{position: relative; max-width:350px; }
.how__arrow{position: absolute; bottom: 30px; right: -50px;width: 200px;}
.how__num{
  display:block; font-family: var(--font-head); font-size:52px; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke: 1.5px var(--caramel); margin-bottom:14px;
}
.how__title{ font-size:24px; font-style: italic; color: var(--text); margin-bottom:8px; }
.how__text{ font-size:16px; line-height:1.7; color: var(--text-dim); }

@media (max-width:900px){
  .how__timeline{ gap:32px; }
  .how__steps{ grid-template-columns: 1fr; gap:44px; }
  .how__step{ max-width:none; }
}
@media (max-width:480px){
  .how__bg1{top: -4%; left: -5%; width:52vw; }
  .how__bg2{bottom: 10%; width:46vw; }
  .how__num{ font-size:44px; }
}

/* ===== GALLERY ===== */
.gallery__filters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
.gallery__filter{
  background:transparent; font-family: var(--font-body); font-size:14px; font-weight:600; color: var(--text-dim);
  border:1px solid rgba(75,54,43,0.2); padding:10px 22px; border-radius: var(--radius-pill); cursor:pointer;
}
.gallery__filter:hover{ border-color: var(--caramel); color: var(--text); }
.gallery__filter.is-active{ background: var(--caramel); border-color: var(--caramel); color:#fff; }

.gallery__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width:1024px){ .gallery__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .gallery__grid{ grid-template-columns:1fr;} }

.gallery-card{ position:relative; border-radius: var(--radius); overflow:hidden; background:#fff; box-shadow: 0 10px 30px rgba(75,54,43,0.08); }
.gallery-card.is-hidden{ display:none; }
.gallery-card__media{ position:relative; overflow:hidden; aspect-ratio: 4/5; }
.gallery-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
.gallery-card:hover .gallery-card__media img{ transform: scale(1.06); }

.gallery-card__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 0.35s ease; pointer-events:none;
}
.gallery-card--video.is-playing .gallery-card__video{ opacity:1; }
.gallery-card--video.is-playing .gallery-card__media img{ opacity:0; }
.gallery-card__badge{
  position:absolute; top:14px; left:14px; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  padding:6px 14px; border-radius: var(--radius-pill); color:#fff;
}
.gallery-card__badge[data-status="available"]{ background: var(--status-available); }
.gallery-card__badge[data-status="taken"]{ background: var(--status-taken); }
.gallery-card__body{ padding:18px 20px 22px; }
.gallery-card__name{ font-family: var(--font-head); font-size:18px; color: var(--text); margin-bottom:8px; }
.gallery-card__link{ font-size:13px; font-weight:600; color: var(--caramel); }
.gallery-card__link:hover{ color: var(--brown); }

/* ===== ABOUT ===== */
#about{ overflow:hidden; }
#about .container{ position:relative; z-index:1; }
/* Текстуры переиспользованы из #how, но у about секция намного компактнее —
   уменьшаем и уводим в самый угол, чтобы не перекрывали текст/ссылки. */
#about .how__bg1{ width:30vw; top:0; left:-8%; opacity: 0.1; }
#about .how__bg2{ width:20vw; bottom:5%; right:-0%; opacity: 0.1; rotate: 320deg; }
@media (max-width:480px){
  #about .how__bg1{ max-width:30vw; top:0%; left: 0%; rotate: 20deg;}
  #about .how__bg2{ width:40vw; bottom:0%; right:-10%; }
}

.about__socials{ display:flex; justify-content:center; gap:20px; position:relative; z-index:1; }
.about__social{ font-size:14px; font-weight:600; color: var(--text); border-bottom:1px solid var(--caramel); padding-bottom:2px; }
.about__social:hover{ color: var(--caramel); }

#about .contact__icon img{ filter: drop-shadow(0 8px 20px rgba(198,139,89,0.55)); }

/* ===== STORY (полные истории клиентки) ===== */
.story{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; }
@media (max-width:960px){ .story{ grid-template-columns:1fr; } }

.story__media{
  position:sticky; top:0; align-self:start;
  height:70vh; min-height:560px; overflow:hidden; order:1;
}
@media (max-width:960px){
  .story__media{ position:relative; top:auto; height:420px; min-height:0; order:1 !important; }
}
.story__media img{ width:100%; height:100%; object-fit:cover; }
.story__index{
  position:absolute; left:24px; bottom:8px; z-index:1;
  font-family: var(--font-head); font-weight:600; font-size:clamp(80px, 10vw, 140px); line-height:1;
  color:transparent; -webkit-text-stroke: 1.5px rgba(248,244,238,0.85);
}

.story__body{ display:flex; align-items:center; order:2; }
@media (max-width:960px){ .story__body{ order:2 !important; } }
.story__body-inner{ padding: 90px 64px; max-width:800px; }
@media (max-width:960px){ .story__body-inner{ padding:56px var(--pad-x); } }

.story__title{ font-family: var(--font-head); font-style:italic; font-weight:600; font-size: clamp(30px, 3.2vw, 44px); color: var(--text); margin:8px 0 24px; }
.story__text{
  max-height:280px; overflow:hidden;
  transition: max-height 0.5s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}
.story__text.is-expanded{
  max-height:3000px;
  -webkit-mask-image:none;
          mask-image:none;
}
.story__text p{ font-size:16px; line-height:1.9; color: var(--text-dim); margin-bottom:18px; }
.story__text p:last-child{ margin-bottom:0; }
.story__text .story__beat{
  font-family: var(--font-head); font-style:italic; font-size:21px; color: var(--caramel-dim); margin:30px 0;
}

.story__toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-family: var(--font-body); font-size:14px; font-weight:600; color: var(--caramel);
  background:none; border:none; border-bottom:1px solid var(--caramel); cursor:pointer; padding:0 0 2px;
}
.story__toggle:hover{ color: var(--brown); border-color: var(--brown); }
.story__toggle-icon{ display:inline-block; transition: transform var(--dur); }
.story__text.is-expanded ~ .story__toggle .story__toggle-icon{ transform: rotate(180deg); }

.story--reverse .story__media{ order:2; }
.story--reverse .story__body{ order:1; }

#story-phoebe .story__body{ background: rgba(143,165,140,0.10); }
#story-budapest .story__body{ background: rgba(198,139,89,0.08); }

/* ===== CONTACT ===== */
.contact{
  position:relative; overflow:hidden;
  background-color: var(--brown);
  background-image:
    linear-gradient(rgba(75,54,43,0.82), rgba(75,54,43,0.82)),
    url("../images/textures/knit-bg1.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.contact__inner{ position:relative; z-index:1; text-align:center; padding-block:100px; }
@media (max-width:768px){ .contact__inner{ padding-block:64px; } }
.contact__title{ font-size: clamp(30px,4.2vw,52px); color:var(--cream); margin-bottom:18px; }
.contact__title em{ font-style:italic; color: var(--beige); }
.contact__sub{ font-size:17px; color: rgba(248,244,238,0.75); margin-bottom:44px; }
.contact__icons{ display:flex; justify-content:center; align-items:flex-end; flex-wrap:wrap; gap:28px; }
.contact__icon{ display:block; width:96px; transition: transform var(--dur); }
.contact__icon img{ display:block; width:100%; height:auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35)); }
.contact__icon:hover{ transform: translateY(-4px); }
@media (max-width:600px){ .contact__icon{ width:60px; } }

/* ===== MATERIALS MARQUEE ===== */
.materials-marquee{ overflow:hidden; border-top: var(--border); border-bottom: var(--border); padding-block:18px; }
.materials-marquee__track{ display:flex; width:max-content; gap:28px; animation: marquee 26s linear infinite reverse; }
.materials-marquee__track span{ font-size:16px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-dim2); white-space:nowrap; }
@media (max-width:768px){.materials-marquee__track span{font-size: 10px;}}
/* ===== ATMOSPHERE VIDEO ===== */
.atmosphere{
  position:relative; height:80vh; min-height:420px; max-height:705px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.atmosphere__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.atmosphere__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,14,10,0.35) 0%, rgba(20,14,10,0.15) 40%, rgba(20,14,10,0.5) 100%);
}
.atmosphere__content{ position:relative; top: 40%; z-index:1; text-align:center; }

.atmosphere__quote{
  font-family: var(--font-head); font-style:italic; font-weight:500;
  font-size: clamp(24px, 3.2vw, 42px); color:var(--cream);
  text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
@media (max-width:768px){
  .atmosphere{ height:62vh; min-height:320px; }
}

/* ===== FOOTER ===== */
.footer{ padding: 0 40px 32px 40px; }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  border-top: var(--border); padding-top:32px;
}
.footer__logo{ width:120px; }
.footer__logo img{ width:100%; height:auto; }
.footer__socials{ display:flex; gap:20px; }
.footer__social{ font-size:14px; color: var(--text-dim); }
.footer__social:hover{ color: var(--caramel); }
.footer__copy{ font-size:13px; color: var(--text-dim2); }
@media (max-width:600px){
  .footer__inner{ flex-direction:column; align-items:center; text-align:center; }
}

/* ===== REVEAL (GSAP выставит из JS, тут просто безопасный дефолт) ===== */
[data-reveal]{ will-change: transform, opacity; }