/* ════════════════════════════════════════
   LUMIYA.INK — стили
   Палитра брендбука: менять только здесь
   ════════════════════════════════════════ */
:root{
  --paper:    #F7F5F0;   /* Paper White     */
  --milk:     #EFECE5;   /* Soft Milk       */
  --offwhite: #FAF8F3;   /* Warm Off-White  */
  --graphite: #2B2A28;   /* Soft Graphite   */
  --deep:     #4A4742;   /* Deep Grey       */
  --taupe:    #A59E94;   /* Taupe Grey      */
  --stone:    #D8D3CA;   /* Light Stone     */
  --wine:     #6E3D3D;   /* Dusty Wine — редкий акцент */

  --font-display:'Cormorant Garamond','Forum',Georgia,serif;
  --font-body:'Manrope','Inter',-apple-system,'Segoe UI',sans-serif;

  --w-content:1120px;
  --pad-x:clamp(24px, 6vw, 72px);
  --header-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h) }

body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.85;
  color:var(--deep);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* «перелистывание»: мягкий snap на desktop, естественный скролл на телефоне */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html{ scroll-snap-type:y proximity }
  .page{ scroll-snap-align:start }
}

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
::selection{ background:var(--stone); color:var(--graphite) }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip-link{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--graphite); color:var(--paper); padding:10px 18px; font-size:13px }
.skip-link:focus{ left:8px }
:focus-visible{ outline:1px solid var(--deep); outline-offset:4px }

/* ─────────── типографика ─────────── */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:300;
  color:var(--graphite);
  line-height:1.12;
  text-wrap:balance;
}

.eyebrow{
  font-size:10.5px; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:clamp(22px, 3vw, 32px);
}

.h-section{
  font-size:clamp(38px, 6.4vw, 68px);
  letter-spacing:-.01em;
  margin-bottom:clamp(28px, 4.4vw, 52px);
  max-width:15em;
}
.h-section em{ font-style:italic }

.lead{
  font-size:clamp(16px, 1.9vw, 17.5px);
  line-height:1.95;
  max-width:31em;
}
.lead p + p{ margin-top:1.2em }

.muted{ color:var(--taupe) }
.small{ font-size:13px; line-height:1.75 }
.wine{ color:var(--wine) }

/* тонкая линия — «дорисовывается» при появлении секции */
.rule{
  height:1px; background:var(--stone); border:0;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.6s var(--ease) .2s;
}
.in .rule{ transform:scaleX(1) }

/* ─────────── фото ─────────── */
.ph{
  overflow:hidden;
  border:1px solid var(--stone);
  border-radius:2px;
  background:var(--milk);
}
.ph img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;          /* заполняет рамку без искажения пропорций */
  object-position:center;
  pointer-events:none;       /* фото — часть дизайна, не отдельный объект */
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none; /* без меню «Сохранить изображение» на iOS */
}

/* ─────────── layout ─────────── */
.wrap{ max-width:var(--w-content); margin-inline:auto; padding-inline:var(--pad-x) }

.page{
  min-height:92vh; min-height:92svh;
  display:flex; align-items:center;
  padding-block:clamp(110px, 17vh, 190px);
}
.page > .wrap{ width:100% }

.bg-paper{ background:var(--paper) }
.bg-off{ background:var(--offwhite) }
.bg-milk{ background:var(--milk) }

/* ─────────── появление блоков ─────────── */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none }
.d1[data-reveal]{ transition-delay:.14s }
.d2[data-reveal]{ transition-delay:.28s }
.d3[data-reveal]{ transition-delay:.42s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  [data-reveal]{ opacity:1; transform:none; transition:none }
  .rule{ transform:none; transition:none }
}

/* ─────────── шапка ─────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(247,245,240,.85);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .6s;
}
.site-header.scrolled{ border-bottom-color:var(--stone) }

.header-inner{
  width:100%; max-width:var(--w-content);
  margin-inline:auto; padding-inline:var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
}
.header-mark img{ height:28px; width:auto }

.header-nav{ display:flex; align-items:center; gap:clamp(18px,3vw,38px) }
.header-nav a{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep); transition:color .3s;
}
.header-nav a:hover{ color:var(--graphite) }
.nav-links{ display:none; gap:clamp(18px,2.6vw,34px) }
@media (min-width:900px){ .nav-links{ display:flex } }

.btn-header{
  border:1px solid var(--graphite);
  padding:9px 22px; border-radius:2px;
  transition:background .35s, color .35s;
}
.btn-header:hover{ background:var(--graphite); color:var(--paper) }

.progress{
  position:absolute; left:0; bottom:-1px;
  height:1px; width:0; background:var(--taupe);
}

/* ─────────── точки-навигация (desktop) ─────────── */
.dot-nav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:40; display:none; flex-direction:column; gap:18px;
}
@media (min-width:1180px){ .dot-nav{ display:flex } }
.dot-nav a{
  width:4px; height:4px; border-radius:50%;
  background:var(--stone);
  transition:background .4s, transform .4s;
}
.dot-nav a.active{ background:var(--deep); transform:scale(1.6) }

/* ─────────── кнопки ─────────── */
.btn{
  display:inline-block;
  font-size:12.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:17px 38px; border-radius:2px;
  border:1px solid var(--graphite);
  text-align:center;
  transition:background .4s, color .4s, border-color .4s;
}
.btn-solid{ background:var(--graphite); color:var(--paper) }
.btn-solid:hover{ background:var(--deep); border-color:var(--deep) }

.link-quiet{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep);
  border-bottom:1px solid var(--stone);
  padding-bottom:5px;
  transition:border-color .35s, color .35s;
  background:none; border-top:0; border-left:0; border-right:0; cursor:pointer;
  font-family:var(--font-body);
}
.link-quiet:hover{ color:var(--graphite); border-color:var(--taupe) }

/* ════════════ 1. HERO ════════════ */
.hero{ min-height:100vh; min-height:100svh; text-align:center }
.hero .wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(24px, 4vh, 40px);
}
.hero-logo img{ width:clamp(240px, 52vw, 440px); height:auto; margin-inline:auto }

.hero-tag{
  font-size:11.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--taupe);
}
.hero-tag span{ padding-inline:.55em }

.hero-sub{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 32px);
  font-weight:300; font-style:italic;
  color:var(--graphite);
  max-width:20em;
}

.hero-line{ max-width:30em; font-size:15px; color:var(--deep) }

.hero-actions{
  display:flex; flex-direction:column; align-items:center;
  gap:24px; margin-top:2px;
}
@media (min-width:600px){ .hero-actions{ flex-direction:row; gap:40px } }

.hero-photo img{ object-position:50% 30% }
.hero-photo{
  width:min(680px, 100%);
  aspect-ratio:4/3;
  margin-top:clamp(8px, 2.6vh, 22px);
}
@media (max-width:700px){
  .hero{ min-height:auto; padding-bottom:36px }
  .hero-photo{ aspect-ratio:1/1 }
  .page{ min-height:auto; padding-block:76px 64px }   /* без пустых хвостов между блоками */
}

/* ════════════ 2. О МАСТЕРЕ ════════════ */
.about-grid{ display:grid; gap:clamp(44px, 7vw, 96px) }
@media (min-width:900px){
  .about-grid{ grid-template-columns:5fr 6fr; align-items:center }
}
.about-photo{ aspect-ratio:4/5; max-width:400px; border-radius:2px }
.about-photo img{ object-position:50% 16% }
.about-photo-wrap{ max-width:400px }
.about-photo-cap{                    /* подпись сразу под фото, у правого края рамки */
  margin-top:12px;
  max-width:400px;
  text-align:right;
  font-family:var(--font-display); font-style:italic;
  font-size:15px; color:var(--wine); letter-spacing:.03em;
}

.signature-line{
  margin-top:clamp(30px, 4vw, 44px);
  display:flex; align-items:center; gap:20px;
}
.signature-line img{ height:24px; width:auto; opacity:.8 }

/* ════════════ 3. НАПРАВЛЕНИЯ ════════════ */
.styles-list{ border-top:1px solid var(--stone); max-width:900px }
.style-row{
  display:grid; gap:4px 32px;
  padding-block:clamp(24px, 3.6vw, 36px);
  border-bottom:1px solid var(--stone);
}
@media (min-width:760px){
  .style-row{ grid-template-columns:minmax(220px,5fr) 7fr; align-items:baseline }
}
.style-name{
  font-family:var(--font-display);
  font-size:clamp(26px, 4vw, 38px);
  font-weight:300; color:var(--graphite);
}
.style-desc{ font-size:14px; color:var(--taupe); max-width:32em; transition:color .4s }
.style-row:hover .style-desc{ color:var(--deep) }

.styles-note{
  margin-top:clamp(22px, 3vw, 30px);
  font-size:14.5px; font-style:italic;
  color:var(--deep); max-width:32em;
}

/* ════════════ 4. ЧТОБЫ БЫЛО СПОКОЙНО ════════════ */
.calm-grid{ display:grid; gap:clamp(40px, 6vw, 88px) }
@media (min-width:900px){
  .calm-grid.has-photo{ grid-template-columns:7fr 5fr; align-items:start }
  .calm-photo{ position:sticky; top:120px }
}

.calm-list{ border-top:1px solid var(--stone); max-width:560px }
.calm-list li{
  position:relative;
  font-size:15px;
  padding:clamp(14px, 2vw, 18px) 0 clamp(14px, 2vw, 18px) 34px;
  border-bottom:1px solid var(--stone);
}
.calm-list li::before{           /* тонкое тире вместо иконки */
  content:""; position:absolute; left:0; top:1.55em;
  width:18px; height:1px; background:var(--taupe);
}
.calm-note{ margin-top:clamp(22px, 3vw, 30px); color:var(--deep); max-width:30em }

.calm-photo{ aspect-ratio:4/5; max-width:420px }

/* ════════════ 5. МОДЕЛЬНЫЕ РАБОТЫ ════════════ */
.model-grid{ display:grid; gap:clamp(40px, 6vw, 88px) }
@media (min-width:900px){
  .model-grid.has-photo{ grid-template-columns:6fr 5fr; align-items:start }
  .model-media{ position:sticky; top:120px }
}
.model-media{ max-width:440px }
.model-carousel{ margin-top:0 }

.model-cap{
  margin-top:16px;
  font-family:var(--font-display); font-style:italic;
  font-size:14px; line-height:1.65;
  color:var(--deep);
}
.model-actions{
  display:flex; flex-direction:column; align-items:stretch;
  gap:14px; margin-top:clamp(28px, 4vw, 40px);
  width:100%; max-width:440px;
}
.model-cta{ text-align:center }
.model-actions-secondary{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.model-actions-secondary .btn-outline{ min-width:0 }
@media (max-width:520px){
  .model-actions{ width:88%; max-width:520px; margin-left:auto; margin-right:auto }
}

/* вторичные outline-кнопки — деликатные, винный акцент */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  width:100%; height:52px;
  padding:0 20px;
  margin:0;
  font-family:var(--font-body);
  font-size:12px; font-weight:500; line-height:1;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wine);
  background:rgba(239,236,229,.45);
  border:1px solid var(--wine); border-radius:999px;
  cursor:pointer; text-align:center;
  transition:background .3s, border-color .3s, color .3s;
  -webkit-appearance:none; appearance:none;
}
.btn-outline:hover{
  border-color:var(--wine);
  color:var(--wine);
  background:rgba(110,61,61,.06);
}
.btn-outline:active{
  background:rgba(110,61,61,.10);
}

/* ════════════ 6. СТОИМОСТЬ ════════════ */
.price-cols{
  display:grid; gap:clamp(44px, 6vw, 72px);
  margin-top:clamp(34px, 5vw, 52px);
}
@media (min-width:860px){ .price-cols{ grid-template-columns:1fr 1fr; gap:clamp(56px,7vw,96px) } }

.price-label{
  font-size:10.5px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:14px;
}
.price-table{ border-top:1px solid var(--stone) }
.price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-block:clamp(20px, 2.8vw, 28px);
  border-bottom:1px solid var(--stone);
}
.price-name{
  font-family:var(--font-display);
  font-size:clamp(19px, 2.6vw, 25px); font-weight:300;
  color:var(--graphite);
}
.price-value{
  font-size:13px; font-weight:400; letter-spacing:.06em;
  color:var(--deep); white-space:nowrap;
}
.price-combo{ margin-top:clamp(34px, 5vw, 48px); max-width:760px }
.price-combo-note{ margin-top:14px; max-width:40em }
.price-included{
  margin-top:clamp(34px, 5vw, 48px);
  max-width:44em;
  font-size:14.5px;
}
.price-included strong{ font-weight:500; color:var(--graphite) }
.price-note{ margin-top:14px; max-width:40em }

/* ════════════ 7. РАБОТЫ — карусель ════════════ */
.works-carousel{
  max-width:480px;
  margin-top:clamp(34px, 5vw, 56px);
}
.works-strip{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:2px;
}
.works-strip::-webkit-scrollbar{ display:none }
.works-strip .ph{
  flex:0 0 100%;
  aspect-ratio:3/4;
  scroll-snap-align:center;
}
.works-nav{
  display:flex; gap:28px;
  margin-top:20px;
}
.works-arrow{
  background:none; border:0; cursor:pointer;
  padding:6px 4px;
  font-size:20px; line-height:1;
  color:var(--wine);
  transition:opacity .3s;
}
.works-arrow:hover{ opacity:.55 }
.works-caption{ margin-top:clamp(18px, 2.6vw, 26px); max-width:40em }

/* ════════════ 8. FAQ ════════════ */
.faq{ margin-top:clamp(30px, 4.4vw, 48px); border-top:1px solid var(--stone); max-width:820px }
.faq-item{ border-bottom:1px solid var(--stone) }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding-block:clamp(20px, 3vw, 28px);
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(19px, 2.7vw, 24px); font-weight:400;
  color:var(--graphite);
}
.faq-icon{ position:relative; flex:0 0 14px; height:14px }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; background:var(--taupe);
  top:50%; left:0; width:14px; height:1px;
  transition:transform .5s var(--ease);
}
.faq-icon::after{ transform:rotate(90deg) }
.faq-item.open .faq-icon::after{ transform:rotate(0) }

.faq-a{ overflow:hidden; max-height:0; transition:max-height .55s var(--ease) }
.faq-a p{
  font-size:14px; max-width:36em; color:var(--deep);
  padding-bottom:clamp(20px, 3vw, 28px);
}

/* ════════════ 9. ЗАПИСЬ ════════════ */
.contact{ text-align:center }
.contact .wrap{ display:flex; flex-direction:column; align-items:center }
.contact .h-section{ max-width:13em; margin-inline:auto }
.contact .lead{ margin-inline:auto }

.contact-mark{ height:22px; width:auto; opacity:.75; margin-bottom:16px }
.checklist-label{
  font-size:10.5px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:16px;
}

.checklist{
  width:100%; max-width:540px;
  margin-top:clamp(24px, 3.6vw, 36px);
  border-top:1px solid var(--stone);
  counter-reset:item;
  text-align:left;
}
.checklist li{
  counter-increment:item;
  display:flex; align-items:baseline; gap:20px;
  padding-block:clamp(13px, 2vw, 17px);
  border-bottom:1px solid var(--stone);
  font-size:14.5px;
}
.checklist li::before{
  content:counter(item);
  font-family:var(--font-display); font-style:italic;
  font-size:21px; color:var(--taupe);
  min-width:1em; text-align:center;
}

.contact-actions{
  display:flex; flex-direction:column; align-items:center;
  gap:24px; margin-top:clamp(28px, 4.4vw, 44px);
}
@media (min-width:600px){ .contact-actions{ flex-direction:row; gap:40px } }

.prepay{
  margin-top:clamp(26px, 4vw, 36px);
  max-width:36em;
  font-style:italic;
  color:var(--deep);
}
.contact-place{ margin-top:14px }

/* ─────────── футер ─────────── */
.site-footer{ padding-block:52px; border-top:1px solid var(--stone); background:var(--paper) }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center }
.footer-inner img{ height:32px; width:auto; opacity:.85 }
.footer-sign{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe) }
.footer-tg{ font-size:12px; letter-spacing:.08em; color:var(--deep); border-bottom:1px solid var(--stone); padding-bottom:3px; transition:border-color .35s }
.footer-tg:hover{ border-color:var(--taupe) }
.footer-fine{ font-size:11px; color:var(--taupe) }

/* ════════════ ПОЯСНЕНИЕ + КНОПКА «УСЛОВИЯ» + МОДАЛКА ════════════ */
.model-price-note{
  margin-top:26px;
  font-size:13.5px; line-height:1.7;
  color:var(--deep);
  max-width:34em;
}
.model-price-more-btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:16px;
  padding:14px 24px;
  border:1px solid var(--taupe);
  border-radius:999px;
  background:rgba(239,236,229,.55);
  color:var(--graphite);
  font-family:var(--font-body);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer;
  transition:background .35s, border-color .35s;
}
.model-price-more-btn span{
  font-size:14px;
  transition:transform .35s var(--ease);
}
.model-price-more-btn:hover{
  background:var(--stone);
  border-color:var(--taupe);
}
.model-price-more-btn:hover span{ transform:translateX(3px) }
@media (max-width:600px){
  .model-price-more-btn{ display:flex; width:100%; justify-content:center }
}

.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 40px);
}
.modal[hidden]{ display:none }

.modal-overlay{
  position:absolute; inset:0;
  background:rgba(43,42,40,.42);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal.open .modal-overlay{ opacity:1 }

.modal-card{
  position:relative;
  width:min(560px, 100%);
  max-height:90vh; max-height:90svh;
  overflow-y:auto;
  background:var(--offwhite);
  border:1px solid var(--stone); border-radius:3px;
  padding:clamp(28px, 5vw, 48px);
  box-shadow:0 30px 80px rgba(43,42,40,.18);
  transform:translateY(16px); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.modal.open .modal-card{ transform:none; opacity:1 }

.modal-close{
  position:absolute; top:14px; right:18px;
  background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1;
  color:var(--taupe);
  transition:color .3s;
}
.modal-close:hover{ color:var(--graphite) }

.modal-title{
  font-size:clamp(26px, 4.6vw, 38px);
  font-weight:300; margin-bottom:4px;
}
.modal-title em{ font-style:italic }

.modal-lead{
  font-size:15px; line-height:1.85;
  max-width:44em; margin-bottom:24px;
}

.modal-list{ border-top:1px solid var(--stone) }
.modal-list li{
  font-size:14px; line-height:1.7;
  color:var(--deep);
  padding:16px 0;
  border-bottom:1px solid var(--stone);
}
.modal-list-h{
  display:block;
  font-family:var(--font-display);
  font-size:18px; font-style:italic;
  color:var(--graphite);
  margin-bottom:3px;
}

.modal-note{ margin-top:22px; max-width:42em }
.modal-actions{
  display:flex; flex-direction:column; gap:14px;
  margin-top:28px;
}
@media (min-width:600px){
  .modal-actions{ flex-direction:row; align-items:center; gap:20px }
}
.modal-cta{ width:100% }
@media (min-width:600px){ .modal-cta{ width:auto } }
.modal-ok{
  background:none; cursor:pointer;
  border:1px solid var(--stone); border-radius:999px;
  padding:14px 28px;
  font-family:var(--font-body);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--deep);
  transition:background .35s, border-color .35s;
  width:100%;
}
@media (min-width:600px){ .modal-ok{ width:auto } }
.modal-ok:hover{ background:var(--stone); border-color:var(--taupe) }

/* обёртка кнопки «Свободные эскизы» в блоке модельных работ */