@font-face { font-family: "Playfair Display"; src: url("../../fonts/playfair-cyrillic-400-800.66a1a9a1a310.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; src: url("../../fonts/playfair-latin-400-800.ef05b30d6e5c.woff2") format("woff2"); font-weight: 400 800; font-display: swap; 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: "Jost"; src: url("../../fonts/jost-cyrillic-300-700.d135949ebb72.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; src: url("../../fonts/jost-latin-300-700.928f4210aa48.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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; }
/* Пример «Николь»: бархат — белые стены и бордовый бархат ателье, модная антиква Playfair Display,
   геометричный Jost и полоса якутского орнамента (ромбы из градиентов). */

.demo-atelier {
  --d-bg: #fbf8f6; --d-ink: #2a0f14; --velvet: #7d1424; --velvet-deep: #4a0a14; --rosa: #c8364a; --cream: #f3e9e2;
  --gold: #c9a35b; --d-stub-bg: #4a0a14;
  --e-accent: #7d1424; --e-on-accent: #fff; --e-surface: #f3e9e2; --e-radius: 0; --e-head: "Playfair Display", serif;
  font-family: "Jost", system-ui, sans-serif; font-weight: 400;
}
.demo-atelier h1, .demo-atelier h2, .demo-atelier h3, .nk-logo { font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; }
.demo-atelier h2 { font-size: clamp(38px, 1rem + 3.6vw, 76px); }
.demo-atelier h3 { font-size: 24px; }
.nk-small { font-size: 14px; opacity: 0.7; }

.nk-top { display: flex; align-items: center; gap: 30px; padding-block: 22px; border-bottom: 1px solid rgb(42 15 20 / 0.15); }
.nk-logo { display: grid; font-size: 36px; font-style: italic; text-decoration: none; color: var(--velvet); }
.nk-logo small { font: 500 11px/1.4 "Jost", sans-serif; letter-spacing: 0.32em; text-transform: uppercase; font-style: normal; color: var(--d-ink); }
.nk-nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.nk-nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 250ms; }
.nk-nav a:hover { background-size: 100% 1px; }
.nk-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; background: var(--velvet); color: #fff; text-decoration: none; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; transition: background-color 200ms; }
.nk-btn:hover { background: var(--velvet-deep); }
.nk-btn-big { min-height: 58px; padding: 0 32px; }

.nk-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 84px); align-items: end; padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.nk-hero-text { display: grid; gap: 24px; }
.nk-eyebrow { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--velvet); }
.nk-hero h1 { font-size: clamp(64px, 1.5rem + 7.5vw, 150px); font-weight: 400; }
.nk-hero h1 em { color: var(--velvet); }
.nk-lead { font-size: 19px; max-width: 46ch; }
.nk-actions { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; }
.nk-actions strong { font: italic 500 40px/1 "Playfair Display", serif; color: var(--velvet); margin-right: 6px; }
.nk-hero-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; outline: 1px solid var(--velvet); outline-offset: 14px; margin: 14px; width: calc(100% - 28px); }

.nk-ornament {
  height: 34px; background-color: var(--velvet);
  background-image: linear-gradient(45deg, transparent 37%, var(--gold) 37% 44%, transparent 44% 56%, var(--gold) 56% 63%, transparent 63%),
    linear-gradient(-45deg, transparent 37%, var(--gold) 37% 44%, transparent 44% 56%, var(--gold) 56% 63%, transparent 63%);
  background-size: 34px 34px;
}

.nk-services { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(28px, 5vw, 80px); padding-block: clamp(64px, 8vw, 120px); }
.nk-services h2 { grid-column: 1 / -1; }
.nk-directions { display: grid; gap: 0; counter-reset: nk; }
.nk-directions li { counter-increment: nk; display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid rgb(42 15 20 / 0.18); }
.nk-directions li::before { content: "0" counter(nk); grid-row: 1 / 3; font: italic 400 34px/1 "Playfair Display", serif; color: var(--velvet); }
.nk-prices { align-self: start; display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--cream); }
.nk-prices dl { display: grid; gap: 0; margin: 0; }
.nk-prices dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px dashed rgb(42 15 20 / 0.25); }
.nk-prices dd { margin: 0; font-family: "Playfair Display", serif; font-size: 20px; white-space: nowrap; color: var(--velvet); }

.nk-head { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; align-items: end; margin-bottom: 36px; }
.nk-works { padding-block: clamp(56px, 7vw, 100px); background: #fff; }
.nk-dresses { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 14px; }
.nk-dresses figure { display: grid; grid-template-rows: 1fr auto; gap: 8px; font-size: 14px; overflow: hidden; }
.nk-dresses figure:first-child { grid-row: span 2; }
.nk-dresses img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 400ms; }
.nk-dresses figure:first-child img { aspect-ratio: auto; }
.nk-dresses figure:hover img { transform: scale(1.02); }

.nk-national { background: var(--velvet-deep); color: var(--cream); padding-block: clamp(64px, 8vw, 120px); }
.nk-national-in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.nk-nat-text { display: grid; gap: 22px; }
.nk-price-big { font: italic 400 36px/1.1 "Playfair Display", serif; color: var(--gold); }
.nk-ornament-photo { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--gold); }
.nk-nat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nk-nat-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nk-nat-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.nk-kids { padding-block: clamp(64px, 8vw, 110px); }
.nk-kids-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nk-kids-row figure { display: grid; gap: 8px; font-size: 14px; }
.nk-kids-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 160px 160px 0 0; }

.nk-process { background: var(--cream); padding-block: clamp(64px, 8vw, 110px); }
.nk-process-in { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.nk-process-in > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.nk-process-in > div { display: grid; gap: 28px; }
.nk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; counter-reset: st; }
.nk-steps li { counter-increment: st; display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--velvet); }
.nk-steps li::before { content: counter(st); font: italic 400 30px/1 "Playfair Display", serif; color: var(--velvet); }

.nk-booking-band { background: #fff; }

.nk-love { background: var(--velvet); color: #fff; padding-block: clamp(64px, 8vw, 110px); }
.nk-love-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.nk-love-in > div { display: grid; gap: 22px; }
.nk-love-in > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.nk-themes { display: grid; gap: 12px; font-size: 19px; }
.nk-themes li { padding-left: 28px; position: relative; }
.nk-themes li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; background: var(--gold); transform: rotate(45deg); }

.nk-address { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 28px; padding-block: clamp(56px, 7vw, 100px); align-items: start; }
.nk-address > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.nk-addr-text { display: grid; gap: 14px; }
.nk-hours { display: grid; gap: 4px; margin: 0; }
.nk-hours div { display: flex; justify-content: space-between; max-width: 260px; }
.nk-hours dd { margin: 0; }

@media (max-width: 960px) {
  .nk-nav { display: none; }
  .nk-hero, .nk-services, .nk-national-in, .nk-process-in, .nk-love-in, .nk-address, .nk-head { grid-template-columns: 1fr; }
  .nk-hero-photo { max-width: 460px; }
  .nk-dresses { grid-template-columns: 1fr 1fr; }
  .nk-dresses figure:first-child { grid-row: auto; grid-column: 1 / -1; }
  .nk-dresses figure:first-child img { aspect-ratio: 3 / 4; }
  .nk-kids-row { grid-template-columns: 1fr 1fr; }
  .nk-process-in > img { max-width: 420px; }
}
@media (max-width: 560px) {
  .nk-top .nk-btn { display: none; }
  .nk-lead { font-size: 17px; }
}