@charset "utf-8";

:root {
  /* Базовая палитра. Переопределяется файлом /theme.css из админки («Цвета»). */
  --wine: #291d21;          /* основной тёмный фон, текст на светлых блоках */
  --wine-dark: #21171b;     /* фон блока «Для вас» */
  --cream: #f2ede5;         /* светлый фон «Подход», текст на тёмном */
  --paper: #ede7df;         /* фон блока «Обо мне» */
  --gold: #ceb896;          /* акцент: курсив, кнопки, линии */
  --muted: #beb4b0;         /* второстепенный текст на тёмном */
  --ink-soft: #645655;      /* абзацы на светлом */
  --ink-muted: #756b68;     /* метки на светлом */
  --accent-dark: #806347;   /* курсив на светлом */
  --contact-bg: #182522;    /* фон блока контактов */
  --contact-text: #c6cec8;  /* текст в контактах */
  --contact-muted: #a5b1a9; /* метки в контактах */
  --line: color-mix(in srgb, var(--cream) 19%, transparent);
  --hero-text: color-mix(in srgb, var(--cream) 80%, var(--gold));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 95px; }

body { margin: 0px; background: var(--wine); color: var(--cream); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

::selection { background: var(--gold); color: var(--wine); }

.header { height: 108px; display: flex; align-items: center; justify-content: space-between; padding: 0px 5%; gap: 35px; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }

.brand { font-size: 30px; font-family: Georgia, serif; letter-spacing: 0.13em; line-height: 1; }

.brand span { display: block; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 0.17em; margin-top: 13px; }

.header nav { display: flex; gap: 34px; font-size: 14px; }

.header nav a, .header-contact, .text-link { transition: color 0.25s; }

.header nav a:hover, .header-contact:hover, .text-link:hover { color: var(--gold); }

.header-contact { font-size: 14px; border-bottom: 1px solid var(--gold); padding: 8px 0px; }

.menu-button { display: none; }

.hero { min-height: 850px; height: calc(-108px + 100svh); max-height: 1080px; position: relative; overflow: hidden; }

.hero-image { position: absolute; inset: 32px 3% 86px 36%; overflow: hidden; }

.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: 1.6s ease-out 0s 1 normal both running picture; }

.hero-image::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, color-mix(in srgb, var(--wine) 65%, transparent), transparent 55%), linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 40%); }

.image-caption { position: absolute; bottom: 21px; right: 24px; font-size: 12px; letter-spacing: 0.12em; z-index: 1; color: rgb(255, 255, 255); }

.hero-content { position: relative; z-index: 2; padding: 86px 0px 135px 7%; width: 80%; pointer-events: none; }

.hero-content a { pointer-events: auto; }

.eyebrow { font-size: 12px; letter-spacing: 0.18em; color: var(--gold); margin: 0px 0px 30px; }

h1, h2, h3, p { margin-top: 0px; }

h1, h2, h3 { font-weight: 400; }

h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.045em; line-height: 1.08; }

h1 { font-size: clamp(65px, 7.7vw, 119px); margin-bottom: 27px; text-shadow: rgba(0, 0, 0, 0.13) 0px 2px 24px; animation: 0.9s ease-out 0s 1 normal both running entry; }

h1 i, h2 i { font-weight: 400; color: var(--gold); }

.hero-description { font-size: 17px; line-height: 1.5; color: var(--hero-text); }

.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gold); padding: 15px 27px; font-size: 14px; margin-top: 15px; min-height: 52px; transition: background 0.3s, color 0.3s; letter-spacing: 0.03em; background: color-mix(in srgb, var(--wine) 50%, transparent); }

.button:hover { background: var(--gold); color: var(--wine); }

.hero-bottom { position: absolute; bottom: 28px; left: 5%; right: 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }

.hero-bottom a { font-size: 14px; letter-spacing: 0px; }

.hero-number { color: var(--gold); }

.section { padding: 75px 7% 95px; }

.section-label { display: flex; justify-content: space-between; gap: 25px; font-size: 12px; letter-spacing: 0.13em; margin-bottom: 75px; color: var(--muted); }

.vision { background: var(--cream); color: var(--wine); }

.vision .section-label { color: var(--ink-muted); }

.vision-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12%; }

h2 { font-size: clamp(44px, 4.8vw, 74px); margin-bottom: 35px; }

.vision h2 i { color: var(--accent-dark); }

.vision-copy { padding-top: 8px; max-width: 510px; }

.vision-copy p { color: var(--ink-soft); }

.vision-copy .lead { font-family: Georgia, serif; font-size: 26px; color: var(--wine); line-height: 1.4; margin-bottom: 26px; }

.signature { font-family: Georgia, serif; font-size: 24px; margin-top: 35px !important; color: var(--wine) !important; }

.signature span { display: block; font: 12px Arial, sans-serif; margin-top: 9px; letter-spacing: 0.12em; }

.details { background: var(--wine-dark); }

.details-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 30px; }

.details-head h2 { margin-bottom: 0px; }

.details-head p { font-size: 16px; color: var(--muted); margin-bottom: 5px; }

.image-study { height: 610px; position: relative; overflow: hidden; margin-top: 45px; }

.image-study > img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transition: transform 1s; }

.image-study:hover > img { transform: scale(1.025); }

.study-note { position: absolute; right: 0px; bottom: 0px; background: var(--wine); padding: 35px 45px; width: 380px; }

.study-note > span { font-size: 12px; letter-spacing: 0.12em; color: var(--gold); }

.study-note h3 { font-family: Georgia, serif; font-size: 32px; line-height: 1.15; margin: 18px 0px; }

.study-note p { font-size: 14px; color: var(--muted); margin: 0px; }

.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 55px; }

.detail-grid article { border-top: 1px solid var(--line); padding-top: 24px; }

.detail-grid article > span { font-size: 12px; color: var(--gold); }

.detail-grid h3 { font-family: Georgia, serif; font-size: 27px; margin: 13px 0px 16px; }

.detail-grid p { color: var(--muted); max-width: 350px; }

.concept-note { font-size: 12px; color: var(--muted); margin: 25px 0px 0px; }

.work-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; }

.work-grid > div > p { color: var(--muted); }

.text-link { display: inline-block; border-bottom: 1px solid var(--gold); padding-bottom: 8px; font-size: 14px; margin-top: 20px; }

.accordion details { border-top: 1px solid var(--line); }

.accordion details:last-child { border-bottom: 1px solid var(--line); }

summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 22px; padding: 27px 0px; font-size: 19px; line-height: 1.4; }

summary::-webkit-details-marker { display: none; }

summary > span:first-child { font-size: 12px; color: var(--gold); }

summary .plus { margin-left: auto; font-size: 26px; font-weight: 200; color: var(--gold); transition: transform 0.3s; }

details[open] .plus { transform: rotate(45deg); }

details p { padding: 0px 32px 20px 37px; color: var(--muted); margin: 0px; font-size: 16px; }

.contact { background: var(--contact-bg); padding-bottom: 26px; }

.contact .section-label { color: var(--contact-muted); }

.contact-content { text-align: center; padding-bottom: 100px; }

.contact h2 { font-size: clamp(60px, 6.8vw, 102px); }

.contact-content > p:not(.eyebrow) { color: var(--contact-text); }

.light { background: var(--gold); color: var(--wine); }

.light:hover { background: var(--cream); }

footer { border-top: 1px solid color-mix(in srgb, var(--contact-text) 22%, transparent); padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 12px; color: color-mix(in srgb, var(--contact-text) 50%, var(--contact-muted)); }

.footer-brand { font-family: Georgia, serif; letter-spacing: 0.15em; font-size: 23px; color: var(--cream); }

footer a:last-of-type { font-size: 14px; }

.reveal { transition: opacity 0.8s, transform 0.8s; }

.js-motion .reveal { opacity: 0; transform: translateY(25px); }

.js-motion .reveal.visible { opacity: 1; transform: translateY(0px); }

@keyframes entry { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: none; }
}

@keyframes picture { 
  0% { transform: scale(1.045); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 1600px) {
  .section { padding-left: max(7%, -700px + 50vw); padding-right: max(7%, -700px + 50vw); }
}

@media (max-width: 1000px) {
  .header nav { gap: 18px; }
  .header { padding: 0px 5%; gap: 20px; }
  .brand { font-size: 25px; }
  .brand span { font-size: 10px; }
  .hero { min-height: 800px; }
  .hero-content { padding-top: 100px; }
  .hero-image { left: 28%; }
  .hero-content h1 { font-size: 86px; }
  .vision-grid { gap: 7%; }
  .section-label { margin-bottom: 55px; }
  .work-grid { gap: 6%; }
  .details-head { display: block; }
  .details-head p { margin-top: 25px; }
  .image-study { height: 500px; }
  .detail-grid { gap: 25px; }
  summary { font-size: 17px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 20px; }
  .header { height: 90px; padding: 0px 6%; }
  .brand { font-size: 24px; }
  .brand span { font-size: 10px; letter-spacing: 0.1em; }
  .header nav, .header-contact { display: none; }
  .menu-button { display: block; background: none; color: var(--cream); border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--gold); padding: 8px 0px; font-size: 14px; min-height: 44px; }
  .mobile-menu:not([hidden]) { display: flex; flex-direction: column; background: var(--wine); padding: 15px 6% 25px; border-bottom: 1px solid var(--line); }
  .mobile-menu a { padding: 10px 0px; font-size: 16px; }
  .hero { height: auto; min-height: 820px; }
  .hero-image { inset: 0px 0px 76px; }
  .hero-image::after { background: linear-gradient(90deg, color-mix(in srgb, var(--wine-dark) 70%, #000 30%), color-mix(in srgb, var(--wine-dark) 12%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--wine) 95%, transparent), transparent 70%); }
  .hero-content { padding: 70px 6% 145px; width: 100%; }
  .eyebrow { font-size: 12px; letter-spacing: 0.1em; max-width: 310px; }
  .hero-content h1 { font-size: clamp(48px, 12vw, 82px); margin-top: 95px; margin-bottom: 25px; line-height: 1.1; }
  .hero-description { font-size: 16px; }
  .image-caption { font-size: 10px; left: 6%; right: auto; bottom: 20px; letter-spacing: 0.08em; }
  .hero-bottom { left: 6%; right: 6%; bottom: 21px; }
  .hero-bottom > span:first-child { font-size: 10px; max-width: 170px; }
  .hero-bottom a { display: none; }
  .section { padding: 50px 6% 60px; }
  .section-label { margin-bottom: 40px; font-size: 11px; letter-spacing: 0.07em; }
  .section-label > span:last-child { max-width: 145px; text-align: right; }
  .vision-grid, .work-grid { grid-template-columns: 1fr; gap: 25px; }
  h2 { font-size: clamp(37px, 9vw, 58px); }
  .vision-copy .lead { font-size: 24px; }
  .details-head p { margin-top: 20px; }
  .image-study { height: 510px; margin-top: 30px; }
  .image-study > img { object-position: 42% center; }
  .study-note { width: 85%; padding: 25px 28px; }
  .study-note h3 { font-size: 28px; }
  .detail-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 35px; }
  .detail-grid p { max-width: none; }
  .detail-grid article { padding-top: 20px; }
  .detail-grid h3 { font-size: 26px; }
  .accordion { margin-top: 20px; }
  .contact-content { padding-bottom: 70px; }
  .contact h2 { font-size: clamp(54px, 13vw, 78px); }
  .contact-content > p:not(.eyebrow) { font-size: 16px; }
  .contact .eyebrow { max-width: none; }
  .contact-content br { display: none; }
  .contact h2 br { display: block; }
  footer { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
  footer span:last-child { grid-column: 1 / -1; }
  .concept-note { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .js-motion .reveal { opacity: 1; transform: none; }
}

.brand { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.brand .brand-name { font-family: Georgia, serif; font-size: 30px; letter-spacing: 0.13em; margin: 0px; line-height: 1; }

.brand .brand-name > span { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 0.17em; margin-top: 13px; }

.brand-monogram { width: 61px; height: 61px; display: block; flex-shrink: 0; }

.footer-brand { display: flex; align-items: center; gap: 15px; }

.footer-monogram { width: 43px; height: 43px; display: block; }

@media (max-width: 1100px) {
  .header { gap: 18px; }
  .header nav { gap: 18px; }
  .brand .brand-name { font-size: 25px; }
  .brand .brand-name > span { font-size: 10px; letter-spacing: 0.12em; }
  .brand-monogram { width: 52px; height: 52px; }
  .brand { gap: 12px; }
}

@media (max-width: 850px) and (min-width: 701px) {
  .header { padding-left: 3%; padding-right: 3%; }
  .brand .brand-name { font-size: 21px; }
  .brand .brand-name > span { font-size: 9px; letter-spacing: 0.04em; }
  .header nav { gap: 12px; }
  .header-contact { font-size: 12px; }
}

@media (max-width: 700px) {
  .brand-monogram { width: 44px; height: 44px; }
  .brand { gap: 11px; }
  .brand .brand-name { font-size: 22px; }
  .brand .brand-name > span { font-size: 9px; letter-spacing: 0.08em; margin-top: 9px; }
  .footer-monogram { width: 35px; height: 35px; }
  .footer-brand { gap: 10px; font-size: 19px; }
}

.brand .brand-name { font-size: 25px; letter-spacing: 0.015em; white-space: nowrap; }

.brand .brand-name > span { font-size: 13px; letter-spacing: 0.07em; margin-top: 9px; }

.client-fit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; margin-top: 65px; padding-top: 35px; border-top: 1px solid var(--line); }

.client-fit h3 { font-family: Georgia, serif; font-size: 25px; line-height: 1.25; }

.client-fit p { color: var(--muted); }

.contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 35px; max-width: 660px; margin: 32px auto 0px; }

.contact-links a { font-size: 16px; text-decoration: underline var(--gold); text-underline-offset: 5px; overflow-wrap: anywhere; }

.contact-links a:hover { color: var(--gold); }

.hero-bottom > span:first-child { letter-spacing: 0.05em; max-width: 60%; }

.image-caption { letter-spacing: 0.06em; }

.work-grid > div > p { max-width: 440px; }

@media (max-width: 1100px) {
  .brand .brand-name { font-size: 21px; }
  .brand .brand-name > span { font-size: 11px; }
  .header nav { gap: 16px; }
}

@media (max-width: 850px) and (min-width: 701px) {
  .brand .brand-name { font-size: 18px; }
  .brand .brand-name > span { font-size: 10px; }
  .header-contact { font-size: 12px; }
  .header nav { gap: 10px; font-size: 13px; }
}

@media (max-width: 700px) {
  .brand .brand-name { font-size: 20px; }
  .brand .brand-name > span { font-size: 11px; }
  .client-fit { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .client-fit h3 { font-size: 25px; }
  .contact-links { grid-template-columns: 1fr; text-align: center; }
  .hero-bottom > span:first-child { max-width: 80%; font-size: 10px; }
  .study-note { width: 90%; }
}

.about { background: var(--paper); color: var(--wine); }

.about .section-label { color: var(--ink-muted); }

.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10%; }

.about h2 i { color: var(--accent-dark); }

.about-role { font-size: 14px; color: var(--ink-muted); margin-top: -10px; margin-bottom: 30px; }

.about-intro > p:last-child { max-width: 390px; color: var(--ink-soft); }

.about-method h3 { font: 28px / 1.3 Georgia, serif; margin-top: 5px; margin-bottom: 25px; }

.about-method p { color: var(--ink-soft); }

.contact-links { gap: 18px 35px; }

.contact-links a { text-decoration: none; font-size: 15px; color: color-mix(in srgb, var(--contact-text) 55%, #fff); transition: color 0.25s; }

.contact-links a:hover { color: var(--gold); }

.header nav { gap: 20px; }

@media (max-width: 1100px) {
  .header nav { gap: 12px; font-size: 13px; }
  .header-contact { font-size: 13px; }
}

@media (max-width: 900px) and (min-width: 701px) {
  .header-contact { display: none; }
  .header nav { gap: 14px; }
}

@media (max-width: 700px) {
  .about-grid { grid-template-columns: 1fr; gap: 25px; }
  .about-method h3 { font-size: 26px; }
  .contact-links { gap: 17px; }
  .contact-links a { font-size: 15px; }
}

.designer-portrait { display: block; width: 100%; max-width: 450px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center center; margin-bottom: 30px; }

.about-grid { align-items: start; }

.about-intro h2 { font-size: clamp(38px, 3.3vw, 54px); }

.about-method { padding-top: 15px; }

@media (max-width: 700px) {
  .designer-portrait { max-width: 100%; margin-bottom: 26px; }
  .about-method { padding-top: 0px; }
}