/* Дарья Коршун — сайт-визитка.
   Стили перенесены из дизайна (.dc.html), где всё лежало инлайном.
   Единицы clamp() и cqw сохранены как есть — это и есть адаптивность макета. */

/* ---------- Шрифты ---------- */

@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/manrope-300-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/manrope-300-latin.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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-400-latin.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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500-latin.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:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600-latin.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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-display-400-italic-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-display-400-italic-latin.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:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-display-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-display-400-latin.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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/playfair-display-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/playfair-display-500-latin.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:#F4F0EA;
  --ink:#17181B;
  --gold:#A8834E;
  --muted:#54524C;
  --muted-2:#6E6B64;
  --muted-3:#8C877D;
  --slate:#4C4A45;
  --photo-bg:#FBF9F5;
  --line:rgba(23,24,27,.14);

  --dark-bg:#15161A;
  --dark-ink:#EDE9E2;
  --dark-gold:#C4A06A;
  --dark-muted:#9C988F;
  --dark-line:rgba(237,233,226,.18);

  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;

  --shell:1180px;
  --pad-x:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- База ---------- */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

h1,h2,h3,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%}
picture{display:contents}

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- Каркас секций ---------- */

/* Отступ якоря считаем от фактической высоты шапки: на узких экранах меню
   переносится в три ряда и шапка вырастает со 69 до 164px. Фиксированные 96px
   из макета прятали бы заголовок секции под шапкой. --header-h ставит app.js. */
.section{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--pad-x);
  scroll-margin-top:calc(var(--header-h,96px) + 12px);
}
.section--bordered{border-top:1px solid rgba(23,24,27,.12)}
.section--gallery{padding:clamp(24px,4vw,56px) var(--pad-x) clamp(48px,7vw,96px)}

.band{background:var(--dark-bg);color:var(--dark-ink);scroll-margin-top:calc(var(--header-h,96px) + 12px)}
.band .kicker{color:var(--dark-gold)}

.kicker{
  margin:0 0 clamp(18px,2.4vw,28px);
  font-size:12px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}

.rule{border:0;height:1px;background:var(--line);margin:clamp(26px,3.4vw,40px) 0}

/* ---------- Шапка ---------- */

.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);
  padding:12px var(--pad-x);
  background:rgba(244,240,234,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(23,24,27,.10);
}
.site-header__brand{
  font-family:var(--serif);font-size:20px;font-weight:500;
  letter-spacing:.01em;color:var(--ink);
}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.8vw,28px)}
.site-nav__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:400;letter-spacing:.02em;
  color:var(--muted);transition:color .3s ease;
}
.site-nav__link:hover{color:var(--gold)}

/* ---------- Кнопки ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:16px 32px;border-radius:6px;
  font-size:15px;font-weight:500;letter-spacing:.04em;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.btn--sm{min-height:44px;padding:11px 22px;font-size:14px;letter-spacing:.03em}
.btn--dark{background:var(--ink);color:var(--bg)}
.btn--dark:hover{background:var(--gold);color:#fff;box-shadow:0 14px 34px rgba(168,131,78,.32)}
.btn--sm.btn--dark:hover{box-shadow:0 8px 22px rgba(168,131,78,.26)}
.btn--ghost{border:1px solid rgba(23,24,27,.28);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 10px 28px rgba(168,131,78,.16)}
.btn--gold{
  min-height:56px;padding:18px 36px;
  background:var(--dark-gold);color:var(--dark-bg);font-weight:600;
}
.btn--gold:hover{background:#DBBB86;color:var(--dark-bg);box-shadow:0 16px 40px rgba(196,160,106,.34)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.icon-btn{
  width:48px;height:48px;border-radius:6px;
  border:1px solid rgba(23,24,27,.24);background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .3s ease,color .3s ease;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Соцсети ---------- */

.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,34px)}
.social{
  width:46px;height:46px;border-radius:6px;
  border:1px solid rgba(23,24,27,.18);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--slate);transition:border-color .3s ease,color .3s ease;
}
/* Наведение только на настоящих ссылках: заглушка не должна прикидываться
   кликабельной. Приглушать её не стали — посетитель не знает, что это
   заглушка, и полупрозрачная иконка читалась бы как поломка. */
a.social:hover{border-color:var(--gold);color:var(--gold)}
.social--idle{cursor:default}

.band .socials{margin-top:0}
.band .social{border-color:rgba(237,233,226,.24);color:var(--dark-ink)}
.band a.social:hover{border-color:var(--dark-gold);color:var(--dark-gold)}

/* ---------- Фотоблоки ---------- */

.photo{
  border-radius:10px;overflow:hidden;background:var(--photo-bg);
  aspect-ratio:4/5;
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--hero{width:100%;max-width:430px;box-shadow:0 26px 60px rgba(23,24,27,.10)}
.photo--about{width:100%;max-width:300px;box-shadow:0 20px 48px rgba(23,24,27,.09)}
.photo--tile{box-shadow:0 18px 44px rgba(23,24,27,.08)}

/* ---------- Первый экран ---------- */

.hero{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(48px,7vw,104px) var(--pad-x) clamp(40px,6vw,72px);
  display:flex;flex-wrap:wrap-reverse;align-items:center;
  gap:clamp(24px,4vw,56px);
}
.hero__text{flex:1 1 340px;min-width:260px}
.hero__media{flex:1 1 300px;min-width:240px;display:flex;justify-content:center}
.hero__name{
  font-family:var(--serif);font-size:clamp(42px,6.6vw,78px);font-weight:500;
  letter-spacing:-.005em;line-height:1.04;color:var(--ink);
}
.hero__tagline{
  margin:clamp(18px,2.4vw,26px) 0 0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,2.8vw,31px);font-weight:400;line-height:1.32;
  color:var(--slate);max-width:19ch;
}
.hero__geo{
  margin:clamp(14px,1.8vw,20px) 0 0;
  font-size:15px;letter-spacing:.02em;color:var(--muted-2);
}

/* ---------- О себе ---------- */

.about{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px)}
.about__aside{flex:0 1 250px;min-width:180px}
.about__body{flex:1 1 380px;min-width:260px}
.about__lead{
  font-family:var(--serif);font-size:clamp(25px,3.5vw,40px);font-weight:400;
  line-height:1.3;color:var(--ink);
}
.about__note{
  margin:clamp(22px,3vw,30px) 0 0;
  font-size:clamp(16px,1.5vw,18px);font-weight:300;line-height:1.7;
  color:var(--muted);max-width:52ch;
}
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 clamp(24px,4vw,56px);margin:clamp(34px,4.5vw,56px) 0 0;
}
.fact{border-top:1px solid var(--line);padding:20px 0 22px}
.fact__label{
  margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-3);
}
.fact__value{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.5;color:var(--ink)}

/* ---------- Что веду ---------- */

.formats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(4px,1vw,20px) clamp(28px,4vw,64px);
}
.format{border-top:1px solid var(--dark-line);padding:clamp(20px,2.6vw,30px) 0}
.format__num{
  margin:0 0 clamp(12px,1.6vw,18px);
  font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--dark-gold);
}
.format__title{
  margin:0 0 14px;font-size:clamp(18px,1.8vw,23px);font-weight:500;
  letter-spacing:.01em;color:var(--dark-ink);
}
.format__text{font-size:16px;font-weight:300;line-height:1.7;color:var(--dark-muted);max-width:42ch}

/* ---------- Портфолио: слайдер ---------- */

.portfolio__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(24px,3.4vw,40px);
}
.portfolio__title{
  font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:400;
  line-height:1.15;color:var(--ink);
}
.slider__arrows{display:flex;gap:10px}

.slider{
  position:relative;overflow:hidden;border-radius:6px;
  background:#EBE6DD;border:1px solid rgba(23,24,27,.12);
  container-type:inline-size;
}
.slider__track{display:flex;transition:transform .7s var(--ease)}

.slide{
  --slide-pad:clamp(20px,3.4cqw,52px);
  flex:0 0 100%;min-height:max(334px,56.25cqw);
  background:var(--bg);
  display:flex;align-items:center;
  gap:clamp(14px,2.4cqw,38px);padding:var(--slide-pad);
  overflow:hidden;
}
.slide--title{align-items:stretch}
.slide--title .slide__text{flex:1 1 60%;display:flex;flex-direction:column;justify-content:center}
.slide--reverse{flex-direction:row}
.slide__text{flex:1 1 auto;min-width:0}

.slide__kicker{
  margin:0 0 clamp(10px,1.4cqw,20px);
  font-size:clamp(11px,1.5cqw,15px);font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);
}
.slide__name{
  margin:0;font-family:var(--serif);font-size:clamp(26px,7cqw,58px);font-weight:500;
  letter-spacing:-.005em;line-height:1.04;color:var(--ink);
}
.slide__rule{
  border:0;height:1px;background:rgba(23,24,27,.16);
  margin:clamp(12px,2cqw,26px) 0;max-width:180px;
}
.slide__tagline{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,2.8cqw,26px);line-height:1.35;color:var(--slate);
}
.slide__geo{
  margin:clamp(8px,1.4cqw,16px) 0 0;
  font-size:clamp(11px,1.5cqw,15px);color:var(--muted-2);
}

/* В макете было height:115% при bottom:0 — фигура вылезала вверх на 15%
   и срезала макушку. Тянем её от верха контентной области до нижней кромки
   слайда: видна целиком и стоит на краю, а не висит в отступе. */
.slide__figure{flex:0 0 30%;position:relative}
/* Размеры auto с двумя ограничителями: браузер сам вписывает фигуру
   в колонку, сохраняя пропорции. Жёсткая height ломала кадр на узких
   экранах — глобальное img{max-width:100%} резало ширину, а высота
   оставалась заданной, и силуэт вытягивался. */
.slide__figure img{
  position:absolute;right:0;
  bottom:calc(-1 * var(--slide-pad));
  width:auto;height:auto;
  max-width:100%;
  max-height:calc(100% + var(--slide-pad));
  display:block;
}

.slide__card{flex:0 0 24%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--photo-bg)}
.slide__card--wide{flex:0 0 26%}
.slide__card img{width:100%;height:100%;object-fit:cover;display:block}

.slide__cols{display:flex;flex-wrap:wrap;gap:clamp(12px,2.4cqw,40px)}
.slide__col{flex:1 1 260px;border-top:1px solid rgba(23,24,27,.16);padding-top:clamp(8px,1.4cqw,16px)}
.slide__colTitle{
  margin:0 0 clamp(6px,1cqw,12px);
  font-family:var(--serif);font-size:clamp(16px,2.8cqw,26px);color:var(--ink);
}
.slide__colText{margin:0;font-size:clamp(11px,1.7cqw,15px);font-weight:300;line-height:1.6;color:var(--muted-2)}

.slide__lead{
  margin:0 0 clamp(12px,2cqw,26px);
  font-family:var(--serif);font-size:clamp(17px,3.4cqw,32px);line-height:1.25;color:var(--ink);
}
.slide__list{display:flex;flex-direction:column;gap:clamp(8px,1.4cqw,16px)}
.slide__item{
  display:flex;gap:clamp(8px,1.4cqw,16px);align-items:baseline;
  border-top:1px solid rgba(23,24,27,.16);padding-top:clamp(7px,1.2cqw,14px);
}
.slide__itemKey{margin:0;flex:0 0 auto;font-family:var(--serif);font-size:clamp(14px,2.6cqw,24px);color:var(--ink)}
.slide__itemVal{margin:0;font-size:clamp(11px,1.7cqw,15px);font-weight:300;line-height:1.5;color:var(--muted-2)}
.slide__outro{
  margin:clamp(12px,2cqw,26px) 0 0;
  font-size:clamp(11px,1.7cqw,15px);font-weight:300;line-height:1.6;
  color:var(--muted);max-width:56ch;
}

.slide__big{
  margin:0;font-family:var(--serif);font-size:clamp(17px,3.8cqw,34px);
  line-height:1.28;color:var(--ink);max-width:24ch;
}
.slide__facts{display:flex;flex-wrap:wrap;gap:clamp(12px,2.4cqw,40px);margin-top:clamp(14px,2.4cqw,36px)}
.slide__fact{flex:1 1 180px;border-top:1px solid rgba(23,24,27,.16);padding-top:clamp(8px,1.4cqw,16px)}
.slide__factLabel{
  margin:0 0 6px;font-size:clamp(10px,1.3cqw,13px);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3);
}
.slide__factValue{margin:0;font-size:clamp(12px,2cqw,18px);line-height:1.45;color:var(--ink)}
.slide__contact{
  margin:clamp(14px,2.2cqw,32px) 0 0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(13px,2.4cqw,22px);color:var(--gold);
}

.slider__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;margin-top:clamp(20px,2.6vw,32px);
}
/* Точка видимая — 6px, как в макете, но пальцем в неё не попасть.
   Кнопка растянута до 24x44 прозрачными отступами: зона нажатия проходит
   по WCAG, внешний вид не меняется. Видимая часть рисуется в ::before. */
.dots{display:flex;align-items:center;gap:0}
.dot{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 9px;border:0;background:none;cursor:pointer;
}
.dot::before{
  content:"";display:block;
  width:6px;height:6px;border-radius:6px;
  background:rgba(23,24,27,.24);
  transition:width .4s ease,background-color .4s ease;
}
.dot[aria-current="true"]::before{width:32px;background:var(--gold)}

/* ---------- Галерея ---------- */

.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,1.8vw,22px);
}

/* ---------- Контакты ---------- */

.contacts__lead{
  margin:0 0 clamp(32px,4.5vw,56px);
  font-family:var(--serif);font-size:clamp(27px,4.2vw,50px);font-weight:400;
  line-height:1.18;color:var(--dark-ink);max-width:22ch;
}
.contacts{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-start}
.contacts__direct{flex:1 1 300px;display:flex;flex-direction:column;gap:14px}
.contacts__line{
  font-size:clamp(18px,2.2vw,26px);font-weight:300;letter-spacing:.01em;
  color:var(--dark-ink);transition:color .3s ease;
}
.contacts__line:hover{color:var(--dark-gold)}
.contacts__actions{flex:0 1 auto;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}

.footline{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:clamp(40px,6vw,80px);padding-top:24px;
  border-top:1px solid rgba(237,233,226,.16);
  font-size:13px;font-weight:300;letter-spacing:.04em;color:#8B877E;
}

/* ---------- Кадрирование фотографий ----------
   Вынесено из инлайновых style= дизайна, чтобы CSP не требовала unsafe-inline. */

.op-44-12{object-position:44% 12%}
.op-50-12{object-position:50% 12%}
.op-50-14{object-position:50% 14%}
.op-50-16{object-position:50% 16%}
.op-50-20{object-position:50% 20%}
.op-50-38{object-position:50% 38%}

/* ---------- Появление при скролле ----------
   Класс reveal-init вешает JS. Скрывать из CSS нельзя: при любой ошибке
   скрипта страница осталась бы пустой. */

.reveal-init{opacity:0;transform:translateY(18px)}
.reveal-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease) var(--reveal-delay,0ms),
             transform .8s var(--ease) var(--reveal-delay,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slider__track{transition:none}
  .reveal-init{opacity:1;transform:none}
  .reveal-in{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}