@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#211c17;--cream:#f5f1e8;--gold:#d8a365;--muted:#82796d;--line:#dcd5c8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}header{position:absolute;z-index:3;width:100%;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;color:var(--cream);border-bottom:1px solid #ffffff20}.brand{font-family:Georgia,serif;letter-spacing:5px;font-size:23px}.brand span{display:block;font-family:Manrope,sans-serif;font-size:8px;letter-spacing:3px;color:#c6b79f}nav{display:flex;gap:36px;font-size:13px}nav a:hover{color:var(--gold)}nav span{color:var(--gold);padding-left:8px}.hero{min-height:850px;height:100svh;max-height:1120px;position:relative;overflow:hidden;background:#17140f;color:var(--cream)}.portrait{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:center 35%}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#18140f 3%,#18140ff5 25%,#18140f90 47%,transparent 69%),linear-gradient(0deg,#17140f 0%,transparent 24%)}.hero-copy{position:relative;z-index:1;padding:175px 6% 100px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.5px;margin:0 0 24px;color:#967e5d}.hero .eyebrow{color:#d7b98d}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-3px;line-height:1.06}h1{font-size:clamp(72px,7.7vw,120px);margin:0 0 25px}em{font-weight:400;color:#ad7946}h1 em,.contact em{color:var(--gold)}.name{font-size:24px;margin-bottom:10px}.intro{color:#c0b6a8;font-size:14px;max-width:440px}.actions{display:flex;gap:15px;margin-top:32px}.button{display:inline-flex;gap:26px;align-items:center;justify-content:center;padding:15px 23px;font-size:12px;border:1px solid transparent;transition:background .2s,transform .2s}.button:hover{transform:translateY(-3px)}.gold{background:var(--gold);color:#22170b}.gold:hover{background:#edbe85}.outline{border-color:#b38b5266;color:var(--cream)}.hero-bottom{position:absolute;z-index:1;bottom:29px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#b5a58e}.threads{position:absolute;inset:130px 40% 50px -300px;opacity:.17;pointer-events:none}.threads i{position:absolute;width:700px;height:400px;border:1px solid #dba962;border-radius:50%;transform:rotate(35deg)}.threads i:nth-child(2){transform:rotate(-30deg);top:150px}.threads i:nth-child(3){transform:rotate(80deg);top:10px;left:100px}.section{padding:105px 6%}h2{font-size:clamp(42px,4.4vw,68px);margin-bottom:25px}.section-heading{display:grid;grid-template-columns:.65fr 1.5fr 1fr;gap:35px;align-items:start}.section-heading>p:last-child{color:var(--muted);font-size:13px;padding-top:7px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:45px}.service-grid article{border-top:1px solid var(--line);padding-top:25px}.service-icon{color:#a17643;font-size:27px}h3{font-size:19px;font-weight:500;margin:12px 0}.service-grid p{font-size:13px;color:var(--muted);max-width:330px}.service-grid small{font-size:10px;letter-spacing:.6px}.projects{background:#ece7dc}.projects-heading{display:flex;justify-content:space-between;align-items:end}.projects-heading>p{font-size:13px;color:var(--muted);padding-bottom:10px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 40px;border-bottom:1px solid #d2cabc}.filters button{border:0;background:transparent;padding:13px 18px;color:#81776a;font-size:12px;border-bottom:2px solid transparent}.filters button.active{color:var(--ink);border-color:#ad7946}.filters sup{font-size:8px;padding-left:7px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 25px}.project-card{border:0;text-align:left;padding:0;background:none;color:inherit}.cover{height:330px;overflow:hidden;background:#ddd6c8;position:relative}.cover img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}.project-card:hover img{transform:scale(1.04)}.project-card .arrow{position:absolute;right:16px;bottom:16px;width:38px;height:38px;display:grid;place-items:center;background:var(--cream);font-size:21px}.card-meta{display:flex;justify-content:space-between;gap:12px;padding-top:16px}.card-meta h3{font-family:Georgia,serif;font-size:24px;margin:0}.card-meta span{font-size:9px;letter-spacing:1px;color:#887661;padding-top:9px}.project-card p{font-size:12px;color:#80766a;margin:5px 0}.gallery-note{margin:38px 0 0;font-size:11px;color:#857a6e;max-width:660px}.about{display:grid;grid-template-columns:1fr 1.2fr;gap:12%;padding-top:120px;padding-bottom:120px}.about-copy{padding-top:40px;font-size:13px;color:#807568}.about-copy .lead{color:var(--ink);font-size:21px;line-height:1.7}.stack{margin:36px 0}.stack h3{font-size:12px;color:var(--ink);margin-bottom:17px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{border:1px solid var(--line);padding:6px 12px;font-size:11px}.text-link{color:#9d6b37;border-bottom:1px solid #b78d65;padding-bottom:5px}.contact{background:#211c16;color:var(--cream)}.contact h2{font-size:clamp(58px,7vw,100px)}.contact-row{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1000px}.contact-row p{color:#bfb2a0;font-size:14px;margin:0}.contact-note{color:#a99a87;font-size:11px;margin:35px 0 0}footer{background:#211c16;border-top:1px solid #ffffff15;display:flex;justify-content:space-between;gap:20px;padding:25px 6%;font-size:10px;color:#b09f88}dialog{border:0;padding:0;color:var(--ink);background:var(--cream);max-height:90svh;width:min(1000px,92vw);max-width:none;overscroll-behavior:contain}dialog::backdrop{background:#15110de0;backdrop-filter:blur(7px)}.close{position:sticky;top:15px;float:right;margin:15px 18px -55px 0;z-index:2;border:1px solid #b7a58c;background:var(--cream);width:40px;height:40px;font-size:25px}.detail{padding:55px}.detail h2{font-size:50px;padding-right:30px}.detail p{font-size:14px;color:#7a6c5d;max-width:740px}.detail .tags{margin:20px 0 30px}.detail ul{padding-left:20px;color:#6b5d4f;font-size:13px}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.detail-gallery button{padding:0;background:none;border:0;text-align:left}.detail-gallery img{width:100%;height:300px;object-fit:cover;object-position:top;background:#e2d9cd}.detail-gallery span{display:block;font-size:11px;padding:8px 0;color:#8b714d}#lightbox{width:96vw;height:94svh;background:#191714;color:#eee;max-height:94svh}.viewer-bar,.viewer-nav{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;font-size:12px}.viewer-bar button,.viewer-nav button{color:#fff;background:none;border:1px solid #62533f;padding:6px 15px}.image-scroll{height:calc(100% - 130px);overflow:auto;text-align:center}.image-scroll img{max-width:100%;max-height:100%;object-fit:contain}.image-scroll img.zoomed{max-height:none;max-width:none;width:1400px}.viewer-nav{justify-content:center;gap:30px}body:has(dialog[open]){overflow:hidden}@media(min-width:1550px){.section{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}}@media(max-width:950px){.hero{min-height:770px}.hero-copy{padding-top:165px}.portrait{width:75%;right:-10%}.shade{background:linear-gradient(90deg,#18140f 0%,#18140fe8 26%,#18140f55 65%,transparent)}.section-heading{grid-template-columns:1fr 2fr}.section-heading>p:last-child{grid-column:2}.project-grid{grid-template-columns:1fr 1fr}.cover{height:360px}.about{gap:7%}.service-grid{gap:25px}}@media(max-width:600px){header{height:80px;padding:0 6%}.brand{font-size:17px;letter-spacing:3px}.brand span{font-size:6px;letter-spacing:2px}nav{gap:14px;font-size:10px}nav a:nth-child(2){display:none}.hero{height:auto;min-height:850px}.portrait{height:540px;width:100%;right:0;object-position:center 22%;opacity:.8}.shade{background:linear-gradient(0deg,#18140f 30%,#18140f60 70%,#18140f20)}.hero-copy{padding:380px 6% 100px}h1{font-size:64px;line-height:1.02;letter-spacing:-2px}h1 br:first-child{display:none}h1 br:first-child:after{content:' '}.hero .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:18px}.name{font-size:20px}.intro{font-size:12px}.actions{gap:10px;margin-top:25px}.button{padding:13px 15px;font-size:11px;gap:12px}.hero-bottom{font-size:8px;bottom:22px}.hero-bottom>span{max-width:170px}.section{padding:65px 6%}.section-heading{display:block}.section-heading>p:last-child{max-width:330px}h2{letter-spacing:-1.6px}.service-grid{grid-template-columns:1fr;gap:25px;margin-top:30px}.service-grid p{max-width:none}.service-icon{float:right}.projects-heading{display:block}.projects-heading>p{font-size:12px}.filters{gap:0;margin-top:20px}.filters button{padding:12px 10px;font-size:11px}.project-grid{grid-template-columns:1fr;gap:30px}.cover{height:400px}.about{grid-template-columns:1fr;gap:0}.about-title h2 br{display:none}.about-copy{padding-top:0}.about-copy .lead{font-size:19px}.contact-row{display:block}.contact-row .button{margin-top:24px}footer{flex-wrap:wrap;font-size:9px}footer>span:nth-child(2){display:none}.detail{padding:35px 23px}.detail h2{font-size:36px;margin-top:20px}.detail-gallery{grid-template-columns:1fr}.detail-gallery img{height:320px}.viewer-bar{padding:12px 10px;font-size:10px}.viewer-bar button{padding:5px 8px}.threads{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Портрет на компьютере */
@media (min-width: 951px) {
  .portrait {
    top: 80px;
    right: 0;
    width: 58%;
    height: calc(100% - 80px);
    object-fit: contain;
    object-position: right bottom;
  }
}

/* Портрет с мягким переходом в фон */
@media (min-width: 951px) {
  .portrait {
    top: 80px;
    right: 0;
    width: auto;
    height: calc(100% - 80px);
    max-width: 58%;
    object-fit: contain;
    object-position: right bottom;

    /* Плавно скрываем края фотографии */
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 90%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        black 14%,
        black 78%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;

    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 90%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        black 14%,
        black 78%,
        transparent 100%
      );
    mask-composite: intersect;
  }
}

/* Более крупный и читаемый текст */
:root {
  --muted: #62594e;
}

body {
  font-size: 18px;
  line-height: 1.75;
}

/* Навигация и кнопки */
nav {
  font-size: 16px;
}

.button,
.filters button {
  font-size: 16px;
}

/* Подписи разделов */
.eyebrow,
.hero .eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
}

/* Первый экран */
.name {
  font-size: 28px;
}

.intro {
  font-size: 18px;
  max-width: 520px;
  color: #d2c7b8;
}

.hero-bottom {
  font-size: 13px;
}

/* Описания направлений и проектов */
.section-heading > p:last-child,
.projects-heading > p,
.service-grid p,
.project-card p,
.about-copy,
.detail p,
.detail ul,
.contact-row p {
  font-size: 18px;
}

.service-grid p {
  max-width: none;
}

.service-grid h3 {
  font-size: 25px;
}

.service-grid small {
  font-size: 15px;
}

.card-meta {
  flex-wrap: wrap;
}

.card-meta h3 {
  font-size: 28px;
}

.card-meta span {
  font-size: 12px;
}

/* Обо мне и технологии */
.about-copy .lead {
  font-size: 24px;
}

.stack h3 {
  font-size: 18px;
}

.tags span {
  font-size: 15px;
}

/* Подписи и контакты */
.gallery-note,
.contact-note,
.detail-gallery span,
footer {
  font-size: 14px;
}

.viewer-bar,
.viewer-nav {
  font-size: 16px;
}

/* На телефоне сохраняем удобный размер */
@media (max-width: 600px) {
  nav,
  .button,
  .filters button {
    font-size: 14px;
  }

  .intro,
  .section-heading > p:last-child,
  .projects-heading > p,
  .service-grid p,
  .project-card p,
  .about-copy,
  .detail p,
  .detail ul,
  .contact-row p {
    font-size: 17px;
  }

  .about-copy .lead {
    font-size: 21px;
  }

  .hero .eyebrow {
    font-size: 11px;
  }

  .hero-bottom {
    font-size: 11px;
  }

  .hero {
    min-height: 950px;
  }

  .actions {
    flex-wrap: wrap;
  }
}

/* Кнопки связи */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
  padding: 18px 24px;
  border: 1px solid #d8a36566;
  color: #f5f1e8;
  font-size: 18px;
  transition: background 0.2s, border-color 0.2s;
}

.contact-link:hover {
  background: #d8a36518;
  border-color: #d8a365;
}

.contact-link svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: none;
  stroke: #d8a365;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-arrow {
  margin-left: auto;
  color: #d8a365;
}

@media (max-width: 600px) {
  .contact-links {
    flex-direction: column;
  }

  .contact-link {
    width: 100%;
  }
}

/* Подпись располагается под кнопками */
.hero-bottom {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 6%;
  padding: 0 0 28px;
}

/* Первый экран растёт вместе с содержимым */
.hero {
  height: auto;
  min-height: 100svh;
  max-height: none;
}

.hero-copy {
  padding-bottom: 45px;
}