/* ==========================================================================
   Ателье «Атриум» — design system (direction «Дневник заказа»)
   Quiet luxury: linen, graphite, bottle green. Tall condensed Didone, used big and rarely.
   Tokens → base → layout → components → page sections → utilities.
   ========================================================================== */

:root {
  /* palette */
  --linen: #ECE8E1;          /* page background */
  --milk: #FAF8F4;           /* surfaces, drawer, cards */
  --ink: #1F1E1C;            /* text, graphite */
  --fog: #7B776F;            /* decorative hairlines, large captions */
  --muted: #67635C;          /* small secondary text (AA on linen) */
  --bottle: #22382D;         /* accent, timeline, CTA */
  --bottle-2: #2E4A3B;       /* accent hover */
  --sage: #B7C0AE;           /* pale sage from the diary suit */
  --chalk: #F4F1EA;
  --line: rgba(31, 30, 28, .14);
  --line-2: rgba(31, 30, 28, .32);
  --on-dark: #EFEBE3;
  --on-dark-muted: rgba(239, 235, 227, .66);

  /* type */
  --ff-d: "Noto Serif Display", "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
  --ff-b: "Inter Tight", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --fs-mega: clamp(4.6rem, 21vw, 21rem);
  --fs-d1: clamp(3rem, 8.4vw, 8rem);
  --fs-d2: clamp(2.4rem, 5.4vw, 5rem);
  --fs-d3: clamp(1.7rem, 3vw, 2.7rem);
  --fs-d4: clamp(1.35rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1.45vw, 1.32rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .75rem;
  --lh-tight: .92;
  --lh-body: 1.6;

  /* space */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px; --s7: 160px;
  --section: clamp(88px, 13vw, 200px);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --hdr-h: 64px;
  --radius: 2px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--ff-b); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--bottle); color: var(--on-dark); }
:focus-visible { outline: 2px solid var(--bottle); outline-offset: 3px; }
.on-dark :focus-visible, .hero__frame :focus-visible { outline-color: var(--on-dark); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--milk); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 52px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type primitives ---------- */
.didone { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; letter-spacing: -.01em; line-height: var(--lh-tight); }
.didone em, .didone i, .it { font-style: italic; }
.d1 { font-size: var(--fs-d1); }
.d2 { font-size: var(--fs-d2); }
.d3 { font-size: var(--fs-d3); line-height: 1.02; }
.d4 { font-size: var(--fs-d4); line-height: 1.12; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.kicker { font: 500 var(--fs-micro)/1.3 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.kicker--plain::before { display: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(64px, 8vw, 120px) 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }
.sec-head { display: grid; gap: var(--s3); margin-bottom: clamp(48px, 7vw, 104px); }
.sec-head__title { max-width: 12ch; }
.sec-head__aside { color: var(--muted); max-width: 30em; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
  .sec-head > .kicker { grid-column: 1 / -1; }
  .sec-head__title { grid-column: 1 / span 7; }
  .sec-head__aside { grid-column: 9 / span 4; }
}

/* ---------- buttons & links ---------- */
.btn { --bg: var(--bottle); --fg: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 1px solid var(--bg); background: var(--bg); color: var(--fg); font: 500 .9375rem/1 var(--ff-b); letter-spacing: .02em; text-decoration: none; border-radius: var(--radius); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { --bg: var(--bottle-2); }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--milk); border-color: var(--ink); }
.btn--light { --bg: var(--milk); --fg: var(--ink); border-color: var(--milk); }
.btn--light:hover { --bg: var(--on-dark); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% calc(100% - 10px); }
.link svg { width: 18px; height: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9375rem; transition: background .25s, color .25s, border-color .25s; }
.chip input:checked + span { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--bottle); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }

/* messenger buttons (order: Telegram, MAX, WhatsApp) */
.msgr { display: flex; flex-wrap: wrap; gap: 8px; }
.msgr a, .msgr button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); background: transparent; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background .25s, color .25s, border-color .25s; }
.msgr a:hover, .msgr button:hover { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.msgr svg { width: 18px; height: 18px; }
.on-dark .msgr a, .on-dark .msgr button { border-color: rgba(239,235,227,.3); color: var(--on-dark); }
.on-dark .msgr a:hover, .on-dark .msgr button:hover { background: var(--on-dark); color: var(--ink); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--linen) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hdr-h); }
.logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.logo__word { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.9rem; letter-spacing: .14em; line-height: 1; padding-left: .14em; }
.logo__sub { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) { .logo__sub { display: none; } }
.nav { display: none; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: .875rem; text-decoration: none; color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr__actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0; font-size: .875rem; }
.menu-btn__bars { position: relative; width: 22px; height: 9px; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { top: 7.5px; }
.menu-open .menu-btn__bars::before { top: 4px; transform: rotate(45deg); }
.menu-open .menu-btn__bars::after { top: 4px; transform: rotate(-45deg); }
.hdr .btn { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
  .menu-btn { display: none; }
  .hdr .btn { display: inline-flex; }
}

/* mobile menu overlay */
.mnav { position: fixed; inset: 0; z-index: 45; background: var(--linen); padding: calc(var(--hdr-h) + 64px) var(--gutter) 120px; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-100%); transition: transform .6s var(--ease-io); visibility: hidden; }
.menu-open .mnav { transform: none; visibility: visible; }
.mnav ol { display: grid; gap: 4px; counter-reset: m; }
.mnav li { counter-increment: m; border-bottom: 1px solid var(--line); }
.mnav a { display: flex; align-items: baseline; justify-content: space-between; min-height: 60px; padding: 10px 0; text-decoration: none; font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; }
.mnav a::after { content: "0" counter(m); font: 400 .75rem/1 var(--ff-b); letter-spacing: .14em; color: var(--muted); }
.mnav__foot { font-size: .9375rem; color: var(--muted); display: grid; gap: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.hero__word { position: relative; z-index: 1; display: flex; justify-content: space-between; font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: var(--fs-mega); line-height: .78; letter-spacing: -.005em; margin: 0 -0.02em; user-select: none; }
.hero__word span { display: inline-block; }
.ml-ready .hero__word span { transform: translateY(102%); opacity: 0; transition: transform 1.3s var(--ease), opacity 1s ease; }
.ml-ready .hero__word.is-in span { transform: none; opacity: 1; }
.hero__word-clip { overflow: hidden; padding-bottom: .04em; }
.hero__stage { display: grid; gap: 28px; margin-top: clamp(20px, 3vw, 40px); }
.hero__frame { position: relative; overflow: hidden; background: #0e0e0d; aspect-ratio: 4 / 5; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.ml-ready .hero__frame img { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.ml-ready .hero__frame.is-in img { transform: scale(1.02); }
.ml-ready .hero__frame { transition: clip-path 1.6s var(--ease-io) .35s; }
.ml-ready .hero__frame[data-reveal]:not(.is-in) { clip-path: inset(40% 0 40% 0); }
.ml-ready .hero__frame[data-reveal].is-in { clip-path: inset(0 0 0 0); }
.hero__cap { position: absolute; left: 16px; bottom: 14px; right: 16px; display: flex; justify-content: space-between; color: var(--on-dark-muted); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hero__line { font-size: clamp(2.4rem, 6.2vw, 5.6rem); }
.hero__line em { display: block; color: var(--bottle); }
.hero__meta { display: grid; gap: 22px; align-content: end; }
.hero__meta p { max-width: 28em; }
.hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border-top: 1px solid var(--line); }
.hero__facts div { padding: 14px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); }
.hero__facts div:last-child { border-right: 0; margin-right: 0; }
.hero__facts b { display: block; font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 2.4rem; line-height: 1; }
.hero__facts span { font-size: .8125rem; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) {
  .hero__word { margin-top: -.02em; }
  .hero__stage { grid-template-columns: 1fr minmax(300px, 30vw) 1fr; align-items: end; gap: clamp(24px, 3vw, 48px); margin-top: calc(var(--fs-mega) * -0.34); }
  .hero__frame { grid-column: 2; z-index: 2; }
  .hero__line { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__meta { grid-column: 3; }
}

/* clip reveal fix: IntersectionObserver ignores fully clipped targets, so the observed
   wrapper stays unclipped and its image is clipped instead (works for any [data-reveal="clip"] > img). */
html.ml-ready [data-reveal="clip"]:not(.hero__frame):not(.is-in) { clip-path: none; }
.ml-ready [data-reveal="clip"]:not(.hero__frame) > img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.3s var(--ease-io), transform 1.8s var(--ease); }
.ml-ready [data-reveal="clip"].is-in:not(.hero__frame) > img { clip-path: inset(0 0 0 0); transform: none; }
.ml-ready [data-reveal="clip"]:not(.is-in) > figcaption { opacity: 0; }
[data-reveal="clip"] > figcaption { transition: opacity .8s ease .6s; }

/* ---------- marquee strip ---------- */
.strip { border-block: 1px solid var(--line); padding: 18px 0; --ml-gap: 0; --ml-speed: 60s; }
.strip__item { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--ff-d); font-weight: 300; font-style: italic; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.1; white-space: nowrap; }
.strip__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bottle); }

/* ---------- diary (pinned day counter + entries) ---------- */
.diary { position: relative; }
.diary__grid { display: grid; gap: 0; }
.diary__rail { display: none; }
.diary__mbar { position: sticky; top: var(--hdr-h); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 0; background: color-mix(in srgb, var(--linen) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font-size: .8125rem; }
.diary__mbar b { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.6rem; line-height: 1; min-width: 2.6ch; }
.diary__mbar-track { position: relative; flex: 1; height: 1px; background: var(--line-2); }
.diary__mbar-fill { position: absolute; left: 0; top: -1px; height: 3px; width: 2.5%; background: var(--bottle); transition: width .6s var(--ease); }
.entry { padding: clamp(56px, 9vw, 120px) 0; border-top: 1px solid var(--line); display: grid; gap: 22px; }
.entry:first-child { border-top: 0; }
.entry__day { display: flex; align-items: baseline; gap: 14px; }
.entry__day b { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(3.4rem, 12vw, 5rem); line-height: .85; }
.entry__day span { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.entry__title { font-size: var(--fs-d3); }
.entry__text { max-width: 32em; }
.entry__decision { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 0 0; border-top: 1px solid var(--line); max-width: 32em; font-size: var(--fs-small); }
.entry__decision dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bottle); padding-top: 4px; font-weight: 600; }
.entry__decision dd { font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.25; }
.entry__media { position: relative; overflow: hidden; background: #d9d4cb; }
.entry__media img { width: 100%; height: auto; }
.entry__media figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.entry--sketch .entry__media { background: var(--milk); border: 1px solid var(--line); }
@media (min-width: 1000px) {
  .diary__mbar { display: none; }
  .diary__grid { grid-template-columns: minmax(300px, 4.2fr) 7.8fr; column-gap: clamp(32px, 5vw, 96px); }
  .diary__rail { display: block; position: relative; }
  .diary__pin { position: sticky; top: calc(var(--hdr-h) + 4vh); height: calc(100vh - var(--hdr-h) - 8vh); min-height: 520px; display: grid; grid-template-columns: 1fr auto; gap: 28px; }
  .diary__counter { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0 4px; }
  .diary__label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .diary__big { display: flex; align-items: flex-start; font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(10rem, 17vw, 17rem); line-height: .8; letter-spacing: -.02em; height: .8em; overflow: hidden; }
  .diary__digit { display: inline-block; height: .8em; overflow: hidden; }
  .diary__digit-col { display: flex; flex-direction: column; transition: transform .9s var(--ease); }
  .diary__digit-col span { display: block; height: .8em; line-height: .8; }
  .diary__stage { font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: var(--fs-d4); min-height: 2.4em; }
  .diary__of { font-size: .8125rem; color: var(--muted); }
  .diary__scale { position: relative; width: 64px; border-left: 1px solid var(--line-2); margin: 8px 0 4px; }
  .diary__scale-fill { position: absolute; left: -2px; top: 0; width: 3px; height: 2.5%; background: var(--bottle); transition: height .8s var(--ease); }
  .diary__tick { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; text-decoration: none; min-height: 24px; }
  .diary__tick::before { content: ""; width: 10px; height: 1px; background: var(--line-2); transition: width .4s var(--ease), background .4s; }
  .diary__tick.is-on { color: var(--ink); }
  .diary__tick.is-on::before { width: 18px; background: var(--bottle); }
  .entry { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 32px; align-items: start; padding: clamp(80px, 9vw, 140px) 0; }
  .entry > * { grid-column: 1 / -1; }
  .entry__media { grid-row: 1; }
  .entry--portrait .entry__media { grid-column: 1 / span 5; }
  .entry--land .entry__media { grid-column: 1 / -1; }
  .entry--sketch .entry__media { grid-column: 2 / span 5; }
  .entry__body { display: grid; gap: 20px; grid-column: 1 / span 6; }
  .entry--right .entry__media { grid-column: 3 / span 5; }
  .entry--right .entry__body { grid-column: 2 / span 6; }
  .entry__day b { font-size: 2.6rem; }
}
.entry__body { display: grid; gap: 18px; }

/* sketch illustration (day 3) */
.sketch { width: 100%; height: auto; color: var(--ink); }
.sketch .s-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sketch .s-thin { fill: none; stroke: var(--fog); stroke-width: .8; stroke-dasharray: 3 4; }
.sketch .s-mark { fill: none; stroke: var(--bottle); stroke-width: 1.4; }
.sketch text { font-family: var(--ff-d); font-style: italic; font-size: 15px; fill: var(--bottle); }
.sketch .s-note { font-family: var(--ff-b); font-style: normal; font-size: 10px; letter-spacing: .12em; fill: var(--muted); text-transform: uppercase; }
.ml-ready .sketch .s-line, .ml-ready .sketch .s-mark { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 3s var(--ease-io); }
.ml-ready .is-in .sketch .s-line, .ml-ready .is-in .sketch .s-mark { stroke-dashoffset: 0; }

/* ---------- occasion calendar (signature) ---------- */
.occ { background: var(--bottle); color: var(--on-dark); }
.occ .kicker, .occ .muted { color: var(--on-dark-muted); }
.occ__grid { display: grid; gap: clamp(40px, 6vw, 80px); }
.occ__form { display: grid; gap: 26px; align-content: start; }
.occ__field { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.occ__field > legend, .occ__field > label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); padding: 0; margin-bottom: 10px; }
.occ .chip span { border-color: rgba(239,235,227,.32); color: var(--on-dark); }
.occ .chip input:checked + span { background: var(--on-dark); color: var(--bottle); border-color: var(--on-dark); }
.occ .chip input:focus-visible + span { outline-color: var(--on-dark); }
.occ .chip:hover span { border-color: var(--on-dark); }
.occ__date { width: 100%; max-width: 340px; min-height: 56px; padding: 0 16px; background: transparent; border: 1px solid rgba(239,235,227,.4); border-radius: var(--radius); color: var(--on-dark); font-size: 1.25rem; color-scheme: dark; }
.occ__date:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.occ__out { display: grid; gap: 28px; align-content: start; min-width: 0; }
.occ__verdict { display: grid; gap: 10px; }
.occ__verdict-tag { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.occ__verdict-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }
.occ__verdict[data-state="rush"] .occ__verdict-tag i { background: #E2C27A; }
.occ__verdict[data-state="late"] .occ__verdict-tag i, .occ__verdict[data-state="past"] .occ__verdict-tag i { background: #D9907A; }
.occ__verdict-title { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.occ__verdict-text { color: var(--on-dark-muted); max-width: 36em; }
.occ__track { position: relative; height: 92px; margin: 8px 0 0; }
.occ__axis { position: absolute; left: 0; right: 0; top: 46px; height: 1px; background: rgba(239,235,227,.35); }
.occ__span { position: absolute; top: 45px; height: 3px; background: var(--on-dark); transition: left .7s var(--ease), width .7s var(--ease); }
.occ__mark { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font-size: .6875rem; letter-spacing: .06em; color: var(--on-dark-muted); white-space: nowrap; transition: left .7s var(--ease); }
.occ__mark::after { content: ""; order: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--bottle); border: 1.5px solid var(--on-dark); }
.occ__mark span { order: 1; height: 30px; display: flex; align-items: flex-end; }
.occ__mark small { order: 3; font-size: .6875rem; }
.occ__mark--event::after { background: var(--on-dark); width: 13px; height: 13px; }
.occ__mark--today::after { background: transparent; border-style: dashed; }
.occ__mark--start { transform: translateX(-6px); justify-items: start; }
.occ__mark--end { transform: translateX(calc(-100% + 6px)); justify-items: end; }
.occ__mark:nth-child(even) span { visibility: hidden; }
.occ__mark:nth-child(even) small::before { content: attr(data-label); display: block; color: var(--on-dark); }
.occ__list { display: grid; border-top: 1px solid rgba(239,235,227,.22); }
.occ__row { display: grid; grid-template-columns: 1fr; gap: 2px 20px; padding: 14px 0; border-bottom: 1px solid rgba(239,235,227,.22); }
.occ__row b { font-weight: 500; }
.occ__row time { font-family: var(--ff-d); font-style: italic; font-size: 1.3rem; line-height: 1.2; }
.occ__row small { color: var(--on-dark-muted); font-size: .8125rem; }
@media (min-width: 600px) { .occ__row { grid-template-columns: 11rem 1fr; align-items: baseline; } .occ__row small { grid-column: 2; } }
.occ__row--key b { color: var(--sage); }
.occ__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.occ__note { font-size: .8125rem; color: var(--on-dark-muted); max-width: 40em; }
@media (max-width: 699px) { .occ__track { display: none; } }
@media (min-width: 1000px) {
  .occ__grid { grid-template-columns: 4fr 8fr; }
  .occ__row { grid-template-columns: 12.5rem 1fr auto; }
  .occ__row small { grid-column: auto; text-align: right; }
}

/* ---------- lookbook stack ---------- */
.stack { display: grid; gap: 0; }
.look { position: sticky; top: calc(var(--hdr-h) + 12px + var(--i, 0) * 14px); background: var(--milk); border-top: 1px solid var(--line); display: grid; min-height: min(86vh, 820px); margin-bottom: 4vh; box-shadow: 0 -24px 60px -40px rgba(31,30,28,.35); }
.look__media { position: relative; overflow: hidden; background: #d8d3ca; aspect-ratio: 4 / 5; }
.look__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.look:hover .look__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ml-ready [data-reveal="clip"] > img { clip-path: none; transform: none; } }
.look__body { display: grid; align-content: space-between; gap: 32px; padding: clamp(24px, 4vw, 56px); }
.look__no { display: flex; justify-content: space-between; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.look__title { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.look__story { max-width: 30em; }
.look__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.look__specs div { padding: 12px 12px 0 0; border-right: 1px solid var(--line); margin-right: 12px; }
.look__specs div:last-child { border-right: 0; }
.look__specs dt { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.look__specs dd { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.6rem; line-height: 1.1; }
.stack__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 32px; }
@media (min-width: 800px) {
  .look { grid-template-columns: 5fr 6fr; }
  .look__media { aspect-ratio: auto; min-height: 100%; }
  .look:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .look:nth-child(even) .look__media { order: 2; }
}
@media (max-width: 799px) { .look { position: relative; top: 0; min-height: 0; margin-bottom: 20px; box-shadow: none; } }

/* ---------- honest timing ---------- */
.timing__grid { display: grid; gap: clamp(40px, 6vw, 96px); }
.ttable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ttable caption { text-align: left; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; }
.ttable th, .ttable td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.ttable thead th { font-weight: 500; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-2); }
.ttable tbody th { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.6rem; line-height: 1.1; }
.ttable td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.ttable .bar { display: block; height: 3px; background: var(--line); margin-top: 8px; position: relative; min-width: 60px; }
.ttable .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bottle); }
.ttable__note { margin-top: 18px; font-size: .8125rem; color: var(--muted); max-width: 46em; }
@media (max-width: 640px) {
  .ttable thead { display: none; }
  .ttable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ttable th, .ttable td { border: 0; padding: 0; }
  .ttable tbody th { grid-column: 1 / -1; }
  .ttable td[data-l]::before { content: attr(data-l) " "; color: var(--muted); font-size: .8125rem; }
}
.visit { display: grid; gap: 0; background: var(--milk); }
.visit__media { overflow: hidden; }
.visit__media img { width: 100%; height: 100%; object-fit: cover; }
.visit__body { padding: clamp(28px, 5vw, 72px); display: grid; gap: 22px; align-content: center; }
.visit__title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.visit__list { display: grid; border-top: 1px solid var(--line); }
.visit__list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.visit__list b { font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.3; color: var(--bottle); }
@media (min-width: 900px) {
  .timing__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .visit { grid-template-columns: 6fr 6fr; }
}

/* ---------- reviews ---------- */
.reviews { display: grid; gap: clamp(48px, 6vw, 80px); }
.review { display: grid; gap: 22px; align-items: start; }
.review__img { overflow: hidden; background: #d8d3ca; max-width: 420px; }
.review__img img { width: 100%; }
.review__q { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; max-width: 20ch; }
.review__q::before { content: "«"; }
.review__q::after { content: "»"; }
.review__text { max-width: 34em; color: var(--muted); }
.review__by { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .875rem; padding-top: 14px; border-top: 1px solid var(--line); max-width: 34em; }
.review__by b { font-weight: 600; }
.review__by span { color: var(--muted); }
@media (min-width: 900px) {
  .review { grid-template-columns: 4fr 1fr 7fr; }
  .review__img { grid-column: 1; }
  .review__body { grid-column: 3; display: grid; gap: 22px; align-content: center; min-height: 100%; }
  .review:nth-child(even) { grid-template-columns: 7fr 1fr 4fr; }
  .review:nth-child(even) .review__img { grid-column: 3; grid-row: 1; justify-self: end; }
  .review:nth-child(even) .review__body { grid-column: 1; grid-row: 1; }
}
.review__body { display: grid; gap: 18px; }

/* ---------- contacts + map ---------- */
.contacts__grid { display: grid; gap: clamp(40px, 6vw, 80px); }
.map { position: relative; background: var(--milk); border: 1px solid var(--line); overflow: hidden; }
.map svg { width: 100%; height: auto; }
.map .m-block { fill: #E9E4DB; }
.map .m-park { fill: #DCE0D3; }
.map .m-river { fill: #C9D3CF; }
.map .m-street { stroke: var(--milk); stroke-width: 14; fill: none; stroke-linecap: round; }
.map .m-street--main { stroke-width: 22; }
.map .m-edge { stroke: rgba(31,30,28,.1); stroke-width: 1; fill: none; }
.map text { font-family: var(--ff-b); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.map .m-it { font-family: var(--ff-d); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; fill: #5D6E68; }
.map .m-pin-ring { fill: none; stroke: var(--bottle); stroke-width: 1.2; transform-origin: center; transform-box: fill-box; animation: pin 2.6s var(--ease) infinite; }
@keyframes pin { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.map__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--milk); border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; font-weight: 500; }
.map__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--fog); }
.map__badge.is-open i { background: #3E8A5E; box-shadow: 0 0 0 4px rgba(62,138,94,.18); }
.cinfo { display: grid; gap: 28px; align-content: start; }
.cinfo__addr { font-size: var(--fs-d3); }
.cinfo dl { display: grid; grid-template-columns: 7.5rem 1fr; border-top: 1px solid var(--line); }
.cinfo dt, .cinfo dd { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.cinfo dt { color: var(--muted); }
.cinfo__phone { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; text-decoration: none; font-weight: 500; }
.cinfo__phone:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .map .m-pin-ring { animation: none; } }
@media (min-width: 900px) { .contacts__grid { grid-template-columns: 7fr 5fr; align-items: start; } }

/* ---------- final CTA ---------- */
.final { text-align: left; }
.final__title { font-size: clamp(3.2rem, 11vw, 11rem); line-height: .86; }
.final__title em { color: var(--bottle); }
.final__row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; margin-top: 40px; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--on-dark); padding: clamp(64px, 8vw, 112px) 0 32px; }
.ftr a { color: var(--on-dark); }
.ftr__top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(239,235,227,.16); }
.ftr__word { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(4rem, 14vw, 12rem); line-height: .8; letter-spacing: .04em; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; font-size: var(--fs-small); }
.ftr__cols h3 { font: 500 .6875rem/1.3 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; }
.ftr__cols li a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.ftr__cols li a:hover { text-decoration: underline; }
.ftr__cols p { color: var(--on-dark-muted); }
.ftr__bot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding-top: 24px; font-size: .8125rem; color: var(--on-dark-muted); }
.ftr__bot a { color: var(--on-dark-muted); display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; }
@media (min-width: 900px) {
  .ftr__top { grid-template-columns: 5fr 7fr; align-items: end; }
  .ftr__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- sticky mobile CTA ---------- */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--linen) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s var(--ease); }
.mcta.is-on { transform: none; }
.mcta .btn { min-height: 48px; padding: 0 14px; white-space: nowrap; }
.mcta__msg, .mcta__ai { width: 48px; padding: 0; }
.mcta--ai { grid-template-columns: 1fr auto auto; }
.mcta__ai span { font-family: var(--ff-d); font-style: italic; font-size: 1.5rem; line-height: 1; }
@media (max-width: 999px) {
  .aic.has-mcta { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .aic.has-mcta .aic__btn { display: none; }
  .aic.has-mcta .aic__panel { bottom: 0; }
}
@media (min-width: 1000px) { .mcta { display: none; } .ftr__bot { padding-right: 210px; } }
@media (max-width: 999px) { body { padding-bottom: 72px; } }

/* ---------- booking drawer (built by app.js) ---------- */
.drawer { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: flex-end; visibility: hidden; transition: visibility 0s linear .6s; }
.drawer.is-open { visibility: visible; transition-delay: 0s; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20, 20, 18, .42); opacity: 0; transition: opacity .5s var(--ease); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: relative; width: min(520px, 100%); height: 100%; background: var(--milk); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .6s var(--ease-io); box-shadow: -30px 0 80px -40px rgba(0,0,0,.4); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(20px, 4vw, 36px); border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 2rem; }
.drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: none; }
.drawer__close svg { width: 16px; height: 16px; }
.drawer__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 16px clamp(20px, 4vw, 36px) 0; }
.drawer__steps li { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 10px; border-top: 2px solid var(--line); transition: border-color .3s, color .3s; }
.drawer__steps li.is-on { border-top-color: var(--bottle); color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: 24px clamp(20px, 4vw, 36px) 24px; overscroll-behavior: contain; }
.drawer__step { display: grid; gap: 24px; border: 0; padding: 0; margin: 0; min-width: 0; }
.drawer__step > legend { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 2.2rem; line-height: 1; padding: 0; margin-bottom: 20px; }
.drawer__foot { display: flex; gap: 10px; padding: 14px clamp(20px, 4vw, 36px) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer__foot .btn { flex: 1; }
.drawer__hint { font-size: .8125rem; color: var(--muted); }
.drawer__summary { padding: 14px 16px; background: var(--linen); font-size: .875rem; border-left: 2px solid var(--bottle); }
.field { display: grid; gap: 8px; }
.field > label, .field > .field__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.input { width: 100%; min-height: 52px; padding: 0 14px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 1rem; transition: border-color .2s; }
textarea.input { min-height: 110px; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: var(--bottle); outline: none; box-shadow: 0 0 0 3px rgba(34,56,45,.14); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot span { display: grid; place-items: center; min-height: 56px; padding: 6px; border: 1px solid var(--line-2); text-align: center; font-size: .875rem; line-height: 1.2; transition: background .2s, color .2s; }
.slot span small { display: block; color: var(--muted); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.slot input:checked + span { background: var(--bottle); color: var(--on-dark); border-color: var(--bottle); }
.slot input:checked + span small { color: var(--on-dark-muted); }
.slot input:focus-visible + span { outline: 2px solid var(--bottle); outline-offset: 2px; }
.slot input:disabled + span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.45; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bottle); flex: none; }
.consent a { color: var(--bottle); }

/* ---------- AI consultant bubble (built by app.js) ---------- */
.aic { position: fixed; right: 16px; bottom: 16px; z-index: 800; }
@media (max-width: 999px) { .aic { bottom: 84px; } }
.aic__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--milk); box-shadow: 0 16px 40px -20px rgba(31,30,28,.45); font-size: .875rem; font-weight: 500; }
@media (max-width: 699px) { .aic__label { display: none; } .aic__btn { padding: 0 7px; } }
.aic__dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bottle); color: var(--on-dark); font-family: var(--ff-d); font-style: italic; font-size: 1.1rem; }
.aic__panel { position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 180px)); display: flex; flex-direction: column; background: var(--milk); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(31,30,28,.5); transform-origin: bottom right; transition: transform .35s var(--ease), opacity .35s; }
.aic__panel[hidden] { display: none !important; }
.aic__head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.aic__head b { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.5rem; line-height: 1; }
.aic__head p { font-size: .6875rem; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.aic__x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; }
.aic__x svg { width: 14px; height: 14px; }
.aic__log { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; font-size: .9rem; line-height: 1.45; }
.aic__m { max-width: 88%; padding: 10px 12px; background: var(--linen); white-space: pre-line; }
.aic__m--me { justify-self: end; background: var(--bottle); color: var(--on-dark); }
.aic__q { display: flex; flex-wrap: nowrap; gap: 6px; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.aic__q::-webkit-scrollbar { display: none; }
.aic__q button { flex: none; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font-size: .8125rem; white-space: nowrap; }
.aic__q button:hover { background: var(--ink); color: var(--milk); }
.aic__form { display: flex; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.aic__form input { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); background: #fff; font-size: 1rem; min-width: 0; }
.aic__form button { min-width: 44px; min-height: 44px; border: 0; background: var(--ink); color: var(--milk); display: grid; place-items: center; }
.aic__form button svg { width: 16px; height: 16px; }

/* ---------- inner pages (works, process, prices, master, brief) ---------- */
.phead { padding: clamp(48px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.phead__title { font-size: var(--fs-d1); max-width: 12ch; margin-top: 20px; }
.phead__lead { margin-top: 28px; }
.crumbs { display: flex; gap: 10px; font-size: .8125rem; color: var(--muted); }
.crumbs { align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* legal pages */
.legal { max-width: 760px; }
.legal h1 { font-size: var(--fs-d2); margin: 20px 0 28px; }
.legal h2 { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.9rem; line-height: 1.1; margin: 44px 0 12px; }
.legal p, .legal li { margin-bottom: 12px; max-width: 42em; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal__demo { padding: 14px 16px; border-left: 2px solid var(--bottle); background: var(--milk); font-size: .9375rem; margin-bottom: 28px; }


/* ==========================================================================
   Inner pages: works · process · prices · master · brief
   ========================================================================== */
.phead__row { display: grid; gap: var(--s4); }
.phead__meta { display: grid; border-top: 1px solid var(--line-2); font-size: var(--fs-small); align-self: end; }
.phead__meta div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.phead__meta dt { color: var(--muted); }
.phead__meta dd { font-family: var(--ff-d); font-style: italic; font-size: 1.15rem; line-height: 1.3; text-align: right; }
@media (min-width: 900px) { .phead__row { grid-template-columns: 7fr 4fr; column-gap: clamp(40px, 6vw, 120px); align-items: end; } }

/* ---------- works ---------- */
.wfilter { position: sticky; top: var(--hdr-h); z-index: 15; background: color-mix(in srgb, var(--linen) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 10px 0; }
.wfilter__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.wfilter .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.wfilter .chip-row::-webkit-scrollbar { display: none; }
.wfilter .chip span { white-space: nowrap; }
.wfilter__count { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .wfilter .chip-row { margin: 0; padding: 0; overflow: visible; } }
.works { display: grid; }
.work { display: grid; gap: 26px; padding: clamp(56px, 8vw, 128px) 0; border-bottom: 1px solid var(--line); }
.work[hidden] { display: none; }
.work__media { position: relative; overflow: hidden; background: #d8d3ca; margin: 0; }
.work__media img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.work:hover .work__media img { transform: scale(1.025); }
.work__media figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.work__detail { display: none; }
.work__body { display: grid; gap: 22px; align-content: start; }
.work__no { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 12px; }
.work__title { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.work__story { max-width: 32em; }
.work__path { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-small); max-width: 34em; }
.work__path b { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bottle); font-weight: 600; margin-bottom: 4px; }
.work__path svg { width: 28px; height: 28px; color: var(--fog); margin-top: 14px; }
.work .look__specs { max-width: 34em; }
.work__act { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.works__empty { padding: 80px 0; text-align: center; color: var(--muted); }
@media (min-width: 900px) {
  .work { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .work__media { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .work__body { grid-column: 8 / span 5; position: sticky; top: calc(var(--hdr-h) + 92px); }
  .work:nth-child(even) .work__media { grid-column: 7 / span 6; }
  .work:nth-child(even) .work__body { grid-column: 1 / span 5; grid-row: 1; }
  .work--wide .work__media { grid-column: 1 / span 7; }
  .work--wide .work__body { grid-column: 9 / span 4; }
  .work--wide:nth-child(even) .work__media { grid-column: 6 / span 7; }
  .work--wide:nth-child(even) .work__body { grid-column: 1 / span 4; }
  .work__detail { display: block; grid-column: 8 / span 3; grid-row: 2; margin-top: 32px; }
  .work:nth-child(even) .work__detail { grid-column: 2 / span 3; }
}
.wnote { display: grid; gap: var(--s4); padding: clamp(56px, 8vw, 120px) 0; }
.wnote__sketch { background: var(--milk); border: 1px solid var(--line); padding: clamp(16px, 3vw, 32px); }
@media (min-width: 900px) { .wnote { grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 120px); align-items: center; } }

/* ---------- process ---------- */
.pinfo { display: grid; border-top: 1px solid var(--line); font-size: var(--fs-small); max-width: 34em; }
.pinfo div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pinfo dt { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.pinfo dd b { font-weight: 600; }
.pinfo--miss dd { color: var(--bottle); }
.duo { display: grid; gap: clamp(16px, 2vw, 32px); }
.duo figure { margin: 0; overflow: hidden; background: #d8d3ca; position: relative; }
.duo img { width: 100%; height: auto; }
.duo figcaption { padding-top: 12px; font-size: .8125rem; color: var(--muted); background: var(--linen); }
@media (min-width: 800px) { .duo { grid-template-columns: 7fr 5fr; align-items: end; } .duo figure:nth-child(2) { margin-bottom: clamp(40px, 8vw, 120px); } }
.versus { display: grid; border-top: 1px solid var(--ink); }
.versus__row { display: grid; gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.versus__row > :first-child { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.versus__row--head > * { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: var(--fs-d4) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
.versus__row--head > :first-child { visibility: hidden; }
.versus__cell::before { content: attr(data-l); display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bottle); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 799px) { .versus__row--head { display: none; } }
@media (min-width: 800px) { .versus__row { grid-template-columns: 3fr 4fr 4fr; } .versus__cell::before { display: none; } }
.faq { border-top: 1px solid var(--line-2); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 64px; padding: 16px 0; font-family: var(--ff-d); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-weight: 400; font-size: var(--fs-d4); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bottle); }
.faq summary:focus-visible { outline: 2px solid var(--bottle); outline-offset: 4px; }
.faq__a { padding: 0 0 26px; max-width: 42em; display: grid; gap: 10px; }

/* ---------- prices ---------- */
.ttable--wide td:last-child { font-weight: 500; }
.ttable small { display: block; color: var(--muted); font-size: .8125rem; }
.prices__grid { display: grid; gap: clamp(48px, 6vw, 96px); }
@media (min-width: 1000px) { .prices__grid { grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 6vw, 120px); } .prices__aside { position: sticky; top: calc(var(--hdr-h) + 40px); align-self: start; } }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); scrollbar-width: thin; }
.sw { position: relative; scroll-snap-align: start; border-right: 1px solid var(--line); }
.sw:last-child { border-right: 0; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.sw__cloth { display: block; height: 220px; background: var(--c, #ccc); transform-origin: top; transition: transform .6s var(--ease), height .6s var(--ease); position: relative; }
.sw__cloth::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 92% 100%, 84% 0, 76% 100%, 68% 0, 60% 100%, 52% 0, 44% 100%, 36% 0, 28% 100%, 20% 0, 12% 100%, 4% 0); }
.sw__txt { display: grid; gap: 2px; padding: 22px 14px 16px; font-size: .8125rem; color: var(--muted); }
.sw__txt b { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 1.35rem; line-height: 1.05; color: var(--ink); }
.sw__txt em { font-style: normal; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 6px; }
.sw:hover .sw__cloth { height: 236px; }
.sw input:checked ~ .sw__cloth { height: 252px; }
.sw input:checked ~ .sw__txt b { color: var(--bottle); }
.sw input:checked ~ .sw__txt::before { content: "выбрано"; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bottle); font-weight: 600; }
.sw input:focus-visible ~ .sw__cloth { outline: 2px solid var(--bottle); outline-offset: -4px; }
/* fabrics drawn in CSS */
.f-poplin { --c: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), linear-gradient(#e9e4da, #ddd6c9); }
.f-linen { --c: repeating-linear-gradient(0deg, rgba(120,104,80,.16) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px), linear-gradient(#c9bca5, #b9ab92); }
.f-wool { --c: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px), linear-gradient(#5b5f63, #4a4e52); }
.f-tropical { --c: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(#2a3140, #222836); }
.f-silkwool { --c: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 66%), linear-gradient(#b7c0ae, #a3ad99); }
.f-crepe { --c: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px) 0 0 / 4px 4px, linear-gradient(115deg, #1d1d20, #2b2a30 55%, #1d1d20); }
.f-velvet { --c: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(#5a1a26, #3d0f19); }
.f-cashmere { --c: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 3px, transparent 3px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 3px, transparent 3px 6px), linear-gradient(#a58e74, #927a60); }
.f-own { --c: repeating-linear-gradient(135deg, var(--line-2) 0 1px, transparent 1px 10px), var(--milk); }
.est { display: grid; gap: clamp(32px, 4vw, 56px); background: var(--milk); padding: clamp(22px, 4vw, 56px); }
.est__form { display: grid; gap: 26px; }
.est__form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.est__form legend { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding: 0; }
.checks { display: grid; gap: 4px; }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: var(--fs-small); cursor: pointer; border-bottom: 1px solid var(--line); }
.check input { width: 20px; height: 20px; accent-color: var(--bottle); flex: none; margin: 0; }
.check span { flex: 1; }
.check em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1000px) { .est { grid-template-columns: 7fr 5fr; align-items: start; } .receipt { position: sticky; top: calc(var(--hdr-h) + 32px); } }
.receipt { position: relative; background: #fff; padding: 28px 24px 34px; font-size: .875rem; font-variant-numeric: tabular-nums; box-shadow: 0 30px 60px -40px rgba(31,30,28,.45); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 6px -1px, transparent 6px, #fff 6.5px) 0 0 / 12px 10px repeat-x; }
.receipt__head { display: flex; justify-content: space-between; gap: 12px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.receipt__title { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 2rem; line-height: 1; margin: 18px 0 6px; }
.receipt__lines { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px dashed var(--line-2); }
.receipt__line { display: flex; align-items: baseline; gap: 6px; }
.receipt__line span:first-child { flex: none; max-width: 70%; }
.receipt__line i { flex: 1; border-bottom: 1px dotted var(--fog); transform: translateY(-3px); }
.receipt__line span:last-child { white-space: nowrap; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 6px; }
.receipt__total b { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 2.6rem; line-height: 1; color: var(--bottle); }
.receipt__note { font-size: .75rem; color: var(--muted); margin: 6px 0 18px; }
.receipt__date { font-size: .8125rem; padding: 10px 0 18px; }
.notin { display: grid; border-top: 1px solid var(--ink); }
.notin li { display: grid; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.notin b { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: var(--fs-d4); line-height: 1.1; }
.notin span { color: var(--muted); max-width: 40em; }
@media (min-width: 800px) { .notin li { grid-template-columns: 4fr 8fr; } }
.split { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; align-items: start; } }
.split__media { margin: 0; overflow: hidden; }

/* ---------- master ---------- */
.mhero { display: grid; gap: var(--s4); padding: clamp(32px, 6vw, 80px) 0 clamp(56px, 8vw, 120px); }
.mhero__name { font-size: var(--fs-mega); line-height: .78; letter-spacing: -.02em; }
.mhero__name span { display: block; }
.mhero__name span:last-child { padding-left: .6em; }
.mhero__media { margin: 0; overflow: hidden; background: #d8d3ca; }
.mhero__media img { width: 100%; height: auto; }
.mhero__body { display: grid; gap: 22px; align-content: end; }
@media (min-width: 900px) {
  .mhero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
  .mhero__name { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; pointer-events: none; mix-blend-mode: multiply; }
  .mhero__media { grid-column: 6 / span 5; grid-row: 1 / span 2; margin-top: clamp(80px, 10vw, 160px); }
  .mhero__body { grid-column: 1 / span 4; grid-row: 2; }
}
.rules { display: grid; border-top: 1px solid var(--ink); counter-reset: r; }
.rules li { display: grid; gap: 8px 32px; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); counter-increment: r; }
.rules li::before { content: counter(r, decimal-leading-zero); font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 3.4rem; line-height: .8; color: var(--fog); }
.rules h3 { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: var(--fs-d3); line-height: 1.02; }
.rules p { max-width: 34em; }
@media (min-width: 900px) { .rules li { grid-template-columns: 2fr 5fr 5fr; align-items: baseline; } }
.tline { display: grid; position: relative; }
.tline li { display: grid; gap: 6px 32px; padding: 22px 0 22px 28px; position: relative; border-left: 1px solid var(--line-2); }
.tline li::before { content: ""; position: absolute; left: -4px; top: 32px; width: 7px; height: 7px; background: var(--linen); border: 1px solid var(--bottle); border-radius: 50%; }
.tline li:last-child::before { background: var(--bottle); }
.tline time { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .9; }
.tline h3 { font-weight: 600; font-size: var(--fs-body); }
.tline p { color: var(--muted); max-width: 36em; }
@media (min-width: 900px) { .tline li { grid-template-columns: 10rem 1fr; padding-left: 40px; } .tline li > div { padding-top: 10px; } }
.on-dark .tline li { border-left-color: rgba(239,235,227,.3); }
.on-dark .tline li::before { background: var(--bottle); border-color: var(--on-dark); }
.on-dark .tline li:last-child::before { background: var(--on-dark); }
.on-dark .tline p { color: var(--on-dark-muted); }
.studio { position: relative; margin: 0; overflow: hidden; background: #d8d3ca; }
.studio img { width: 100%; height: auto; }
.studio figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 0 0; font-size: .8125rem; color: var(--muted); background: var(--linen); }
.quote { font-family: var(--ff-d); font-weight: 300; font-style: italic; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.04; max-width: 20ch; }
.quote + p { margin-top: 24px; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.why { display: grid; gap: clamp(40px, 6vw, 96px); }
.why__media { margin: 0; overflow: hidden; }
.why__body { display: grid; gap: 22px; align-content: center; }
.why__list { display: grid; border-top: 1px solid var(--line); }
.why__list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.why__list b { font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--bottle); line-height: 1.2; }
@media (min-width: 900px) { .why { grid-template-columns: 5fr 6fr; align-items: center; } }

/* ---------- brief ---------- */
.bform { display: grid; gap: clamp(32px, 5vw, 72px); }
.bform__nav { display: none; }
@media (min-width: 1000px) {
  .bform { grid-template-columns: 3fr 9fr; column-gap: clamp(40px, 6vw, 112px); }
  .bform__nav { display: block; position: sticky; top: calc(var(--hdr-h) + 40px); align-self: start; }
}
.bnav { display: grid; border-top: 1px solid var(--line-2); counter-reset: b; }
.bnav a { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--fs-small); counter-increment: b; }
.bnav a::before { content: counter(b, decimal-leading-zero); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; width: 1.6rem; }
.bnav a::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: 1px solid var(--line-2); border-radius: 50%; transition: background .3s, border-color .3s; }
.bnav a.is-done::after { background: var(--bottle); border-color: var(--bottle); }
.bnav a:hover { color: var(--bottle); }
.bnav__progress { margin-top: 20px; font-size: .8125rem; color: var(--muted); }
.bnav__bar { height: 3px; background: var(--line); margin-top: 8px; position: relative; }
.bnav__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bottle); transition: width .5s var(--ease); }
.bsec { border: 0; margin: 0; padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--line-2); display: grid; gap: 22px; min-width: 0; }
.bsec:first-of-type { border-top: 0; padding-top: 0; }
.bsec legend { float: left; width: 100%; padding: 0; margin-bottom: 26px; display: flex; align-items: baseline; gap: 18px; }
.bsec legend + * { clear: both; }
.bsec__no { font-family: var(--ff-d); font-weight: 300; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 3.4rem; line-height: .8; color: var(--fog); }
.bsec__t { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: var(--fs-d3); line-height: 1; }
.bsec__hint { color: var(--muted); font-size: var(--fs-small); max-width: 38em; }
.bgrid { display: grid; gap: 18px 24px; }
@media (min-width: 700px) { .bgrid--2 { grid-template-columns: 1fr 1fr; } .bgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.mguide { display: grid; gap: 24px; }
.mguide svg { width: 100%; max-width: 260px; height: auto; color: var(--ink); justify-self: center; }
.mguide .g-body { fill: none; stroke: currentColor; stroke-width: 1.1; }
.mguide .g-m { fill: none; stroke: var(--bottle); stroke-width: 1.4; stroke-dasharray: 3 3; transition: stroke-width .2s; }
.mguide .g-m.is-on { stroke-width: 3; stroke-dasharray: none; }
.mguide text { font: 500 10px var(--ff-b); fill: var(--bottle); }
.mguide__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-content: start; }
.mguide__fields .input { min-height: 48px; }
@media (min-width: 800px) { .mguide { grid-template-columns: 4fr 7fr; align-items: start; } .mguide__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unit { position: relative; }
.unit::after { content: "см"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .8125rem; color: var(--muted); pointer-events: none; }
.unit .input { padding-right: 38px; }
.range { display: grid; gap: 10px; }
.range input[type=range] { width: 100%; accent-color: var(--bottle); min-height: 44px; }
.range output { font-family: var(--ff-d); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-size: 2.4rem; line-height: 1; color: var(--bottle); }
.range__ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.file { position: relative; display: grid; place-items: center; gap: 6px; min-height: 140px; padding: 24px; border: 1px dashed var(--line-2); background: var(--milk); text-align: center; font-size: var(--fs-small); transition: border-color .2s, background .2s; }
.file:hover, .file.is-over { border-color: var(--bottle); background: #fff; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file input:focus-visible + span { outline: 2px solid var(--bottle); outline-offset: 4px; }
.file b { font-weight: 600; }
.file small { color: var(--muted); }
.file__list { display: grid; gap: 4px; font-size: .8125rem; color: var(--muted); }
.file__list li::before { content: "— "; }
.bsubmit { display: grid; gap: 22px; padding: clamp(28px, 4vw, 48px); background: var(--milk); }
.bsubmit__row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }

/* inner pages: dark-section fixes */
.on-dark .versus__row { border-bottom-color: rgba(239,235,227,.18); }
.on-dark .versus__row > :first-child { color: var(--on-dark-muted); }
.on-dark .versus__row--head > * { color: var(--on-dark) !important; }
.on-dark .versus__cell::before { color: var(--sage); }
.on-dark .sec-head__title { color: var(--on-dark); }
.mguide .g-m { cursor: default; }
blockquote { margin: 0; }

.est > *, .est__form, .prices__grid > *, .bform > *, .works > *, .work > *, .mhero > *, .stack > *, .look > *, .reviews > *, .review > *, .timing__grid > *, .contacts__grid > *, .occ__grid > * { min-width: 0; }
@media (max-width: 559px) { .look__title { font-size: clamp(2.1rem, 10vw, 2.6rem); } }
.work__title { overflow-wrap: break-word; }
@media (max-width: 559px) { .work__title { font-size: clamp(2.1rem, 10vw, 2.6rem); } }
.rail { max-width: 100%; }

@media (min-width: 900px) {
  .work:has(.work__detail) .work__body { position: static; }
  .work--wide .work__detail { grid-column: 9 / span 3; }
  .work--wide:nth-child(even) .work__detail { grid-column: 2 / span 3; }
}

.receipt__total { flex-wrap: wrap; }
.receipt__total b { white-space: nowrap; font-size: clamp(2.1rem, 9vw, 2.6rem); }
@media (max-width: 640px) { .sw__cloth { height: 170px; } .sw:hover .sw__cloth { height: 180px; } .sw input:checked ~ .sw__cloth { height: 192px; } }

@media (max-width: 799px) { .mguide svg { max-width: 170px; } }
/* brief: live date verdict */
.link--inline { display: inline; min-height: 0; padding-bottom: 2px; background-position: 0 100%; }
.link--inline:hover { background-position: 100% 100%; }
.range__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bhint { padding-left: 14px; border-left: 2px solid var(--line-2); transition: color .3s, border-color .3s; }
.bhint.is-ok { color: var(--bottle); border-left-color: var(--bottle); }
.bhint.is-warn { color: #8A3B1E; border-left-color: #8A3B1E; }
@media (max-width: 559px) {
  .look__specs div { padding-right: 8px; margin-right: 8px; }
  .look__specs dd { font-size: 1.3rem; hyphens: auto; overflow-wrap: break-word; }
}

.on-dark { color: var(--on-dark); }
.on-dark .muted, .on-dark .sec-head__aside { color: var(--on-dark-muted); }

/* long Russian words never push the layout sideways; display lines are balanced, never hyphenated */
h1, h2, h3, .lead, dd, td, th, .review__q, .look__story, .work__story { overflow-wrap: break-word; }
h1, h2, .look__title, .work__title, .review__q, .final__title, .visit__title, .occ__verdict-title { hyphens: manual; text-wrap: balance; }
.menu-open .aic, .menu-open .mcta { visibility: hidden; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero__frame img { transform: none !important; }
}