/* ============================================================
   LIGHT CONTROL SYSTEM — поверх «После заката».
   Свет — материал интерфейса: диммер дома, пульт, сцены вечера,
   подбор, карточки «объект → свет». Цвет акцента (--light)
   и яркость (--lvl) задаёт пульт, а не таблица стилей.
   ============================================================ */
:root { --lvl: 1; }
html[data-glow="multi"] { --light-grad: conic-gradient(from 90deg, #FF8A8A, #FFD27F, #8FE3A0, #8AB8FF, #D6A2FF, #FF8A8A); }
.glow-dot { box-shadow: 0 0 0 1px rgba(236, 233, 226, .14); }

/* Фото проектов следуют яркости пульта: модель без света проступает обратно */
.lit.is-on .lit__off { opacity: calc(1 - var(--lvl)); }
html.light-off .lit .lit__off { opacity: 1; }

/* ---------- Ползунок ---------- */
.fader { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer; --p: 50%; }
.fader::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--light) var(--p), rgba(236, 233, 226, .22) var(--p)); }
.fader::-moz-range-track { height: 1px; background: rgba(236, 233, 226, .22); }
.fader::-moz-range-progress { height: 1px; background: var(--light); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border-radius: 50%; background: var(--white); border: 0; }
.fader::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 0; }
.fader:focus-visible { outline: 1px solid var(--light); outline-offset: 4px; }

/* ============================================================
   00 · Диммер на первом экране
   ============================================================ */
.dimmer { position: absolute; z-index: 5; right: var(--pad); top: 50%; transform: translateY(-50%); display: grid; justify-items: end; gap: 18px; color: var(--white); touch-action: none; cursor: ns-resize; -webkit-user-select: none; user-select: none; outline: none; }
.dimmer:focus-visible .dimmer__track { box-shadow: 0 0 0 6px rgba(var(--light-rgb), .18); }
.dimmer__val { font: 400 clamp(46px, 5vw, 86px)/.9 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.dimmer__val small { font-size: .36em; margin-left: 3px; letter-spacing: 0; color: rgba(236, 233, 226, .6); }
.dimmer__track { position: relative; width: 1px; height: clamp(190px, 34vh, 340px); margin-right: 7px; background: rgba(236, 233, 226, .22); }
.dimmer__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0) * 100%); background: var(--light); }
.dimmer__knob { position: absolute; left: 50%; bottom: calc(var(--v, 0) * 100%); width: 15px; height: 15px; border-radius: 50%; background: var(--white); transform: translate(-50%, 50%); }
.dimmer__mark { position: absolute; right: 18px; bottom: calc(var(--at) * 100%); transform: translateY(50%); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 233, 226, .45); transition: color .4s; }
.dimmer__mark b { font-weight: 400; min-width: 2.6ch; text-align: right; }
.dimmer__mark::after { content: ''; position: absolute; right: -18px; top: 50%; width: 9px; height: 1px; background: currentColor; }
.dimmer__mark.is-on { color: var(--white); }
.dimmer__mark.is-on::after { background: var(--light); }
.dimmer__cap { color: rgba(236, 233, 226, .5); }
.hero__title { opacity: calc(.32 + var(--lit, 0) * .68); transition: opacity .3s; }
.hero__state .sr:focus-visible { width: 140px; }

/* ============================================================
   Пульт: LIGHT · DIM · ЦВЕТ · ЭФФЕКТ
   ============================================================ */
.lc { position: fixed; left: 20px; bottom: 20px; z-index: 70; color: var(--white); --fg: var(--white); --fg2: var(--grey); transition: opacity .35s var(--e-out), transform .35s var(--e-out), visibility 0s; }
.lc.is-hidden { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity .25s, transform .25s, visibility 0s .25s; }
.lc__pill { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px 0 15px; background: rgba(8, 12, 18, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .14); font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .16s var(--e-out), box-shadow .2s; }
.lc__pill:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lc__pill:hover { box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .36); } }
.lc__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--light-grad, var(--light)); opacity: calc(.22 + var(--lvl) * .78); }
html.light-off .lc__dot { background: transparent; box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .5); opacity: 1; }
.lc__read { display: flex; gap: 12px; }
.lc__read b { font-weight: 500; }
.lc__read span { color: rgba(236, 233, 226, .62); }
.lc__panel { position: absolute; left: 0; bottom: calc(100% + 8px); width: 304px; display: grid; gap: 18px; padding: 20px; background: rgba(8, 12, 18, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .14);
  opacity: 0; transform: translateY(6px); visibility: hidden; transform-origin: bottom left; transition: opacity .18s var(--e-out), transform .18s var(--e-out), visibility 0s .18s; }
.lc.is-open .lc__panel { opacity: 1; transform: none; visibility: visible; transition: opacity .24s var(--e-out), transform .24s var(--e-out), visibility 0s; }
.lc__row { display: grid; gap: 10px; }
.lc__row > .meta { display: flex; justify-content: space-between; color: rgba(236, 233, 226, .6); }
.lc__row > .meta b { font-weight: 400; color: var(--white); }
.lc__row:first-child { grid-template-columns: 1fr auto; align-items: center; }
.lc__switch { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; min-height: 32px; }
.lc__switch i { position: relative; width: 34px; height: 18px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .3); transition: background .2s; }
.lc__switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(236, 233, 226, .55); transition: transform .2s var(--e-out), background .2s; }
.lc__switch.is-on i { background: rgba(var(--light-rgb), .22); }
.lc__switch.is-on i::after { transform: translateX(16px); background: var(--light); }
.lc__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.lc__seg button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; font-size: 13px; color: rgba(236, 233, 226, .66); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .14); transition: box-shadow .2s, color .2s; }
.lc__seg button.is-on { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.lc__note { font-size: 12px; line-height: 1.45; color: rgba(236, 233, 226, .5); }

/* ============================================================
   03 · Цвет света: один дом, три части
   ============================================================ */
.tri { position: relative; background: var(--night-0); color: var(--white); --fg: var(--white); --fg2: var(--grey); padding-bottom: clamp(40px, 5vw, 80px); }
.tri__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.tri__stage img, .tri__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tri__stage.gl-ready picture { visibility: hidden; }
.tri__stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(6, 9, 13, .85) 0%, rgba(6, 9, 13, 0) 30%); }
.tri__parts { position: absolute; inset: 0; z-index: 2; display: flex; }
.tri__part { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 0 clamp(16px, 2vw, 36px) clamp(26px, 4vh, 48px); text-align: left; color: rgba(236, 233, 226, .62); transition: flex-grow .7s var(--e-out), color .3s; cursor: pointer; }
.tri__name { font: 500 clamp(22px, 2.6vw, 48px)/1 var(--f-display); letter-spacing: -.035em; white-space: nowrap; }
.tri__k { font-size: 14px; white-space: nowrap; color: rgba(236, 233, 226, .55); }
.tri__part.is-on { color: var(--white); }
.tri__part.is-on .tri__name::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 16px; background: var(--light-grad, var(--light)); }
.tri__part:focus-visible { outline: 1px solid var(--light); outline-offset: -6px; }
.tri__bar { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 28px; }
.tri__lead { max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(236, 233, 226, .74); }
.tri__fx { display: flex; gap: 22px; }
.tri__fx button { position: relative; padding: 6px 0; font-size: 15px; color: rgba(236, 233, 226, .6); }
.tri__fx button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .22s var(--e-out); }
.tri__fx button.is-on { color: var(--white); }
.tri__fx button.is-on::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .tri__stage { height: 82svh; }
  .tri__part { padding: 0 10px 22px; }
  .tri__name { font-size: 17px; white-space: normal; }
  .tri__k { display: none; }
  .tri__part.is-on .tri__k { display: block; white-space: normal; font-size: 12px; }
  .tri__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   04 · Архив: точка на кадре открывает товар
   ============================================================ */
.pj__open { position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }
.probe { position: absolute; z-index: 3; left: var(--px); top: var(--py); display: flex; align-items: center; gap: 10px; transform: translate(-9px, -9px); color: var(--white); opacity: 0; transition: opacity .6s .9s; }
.lit.is-on ~ .probe, .pj__main.is-in .probe { opacity: 1; }
.probe i { position: relative; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--white); }
.probe i::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--light); }
.probe span { padding: 7px 11px; background: rgba(8, 12, 18, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--e-out); }
.probe:focus-visible span, .probe:hover span { opacity: 1; transform: none; }
@media (hover: none) { .probe span { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .probe i { animation: probe 2.6s var(--e-light) infinite; } }
@keyframes probe { 0%, 100% { box-shadow: inset 0 0 0 1px var(--white), 0 0 0 0 rgba(var(--light-rgb), .45); } 50% { box-shadow: inset 0 0 0 1px var(--white), 0 0 0 8px rgba(var(--light-rgb), 0); } }
.pj__meta dd .lnk { font-size: 15px; padding-bottom: 2px; }

/* ============================================================
   05 · Каталог: объект → свет
   ============================================================ */
.olcat { padding: clamp(80px, 10vw, 170px) 0; }
.cat-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-bottom: clamp(40px, 5vw, 80px); }
.cat-index a { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 20px 18px 22px 0; border-bottom: 1px solid var(--line); }
.cat-index a span { font: 500 clamp(19px, 1.6vw, 26px)/1.1 var(--f-display); letter-spacing: -.02em; }
.cat-index a small { grid-column: 1; font-size: 14px; color: var(--fg2); }
.cat-index a sup { grid-row: 1; grid-column: 2; font: 400 11px var(--f-mono); color: var(--fg2); }
.cat-index a::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--light); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e-out); }
@media (hover: hover) and (pointer: fine) { .cat-index a:hover::after { transform: scaleX(1); } }
.olgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gap); }
.olgrid > .ol:nth-child(1) { grid-column: span 2; }
.olgrid > .ol:nth-child(1) .ol__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
.olgrid > .ol:nth-child(1) { grid-row: span 2; display: grid; grid-template-rows: 1fr auto; }
.olcat__foot { display: flex; align-items: center; gap: 28px; margin-top: clamp(40px, 5vw, 70px); }
/* карточка: фото со светом во всю карточку, имя — поверх */
.ol { display: grid; gap: 14px; align-content: start; }
.ol__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-0); color: var(--white); isolation: isolate; }
.ol__media img, .ol__tint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ol__on { transform: scale(1.04); transition: transform 1.8s var(--e-out); }
.ol.is-lit .ol__on { transform: none; }
/* свет «стекает» сверху вниз, как бахрома, когда карточка входит в экран */
.ol__off { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--e-light), opacity .4s; }
.ol.is-lit .ol__off { clip-path: inset(100% 0 0 0); opacity: calc(1 - var(--lvl)); }
html.light-off .ol .ol__off { clip-path: inset(0 0 0 0); opacity: 1; }
.ol__tint { opacity: 0; transition: opacity .45s var(--e-out); }
.ol.is-tinted .ol__tint { opacity: 1; }
.ol__media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(6, 9, 13, .82) 0%, rgba(6, 9, 13, .2) 32%, rgba(6, 9, 13, 0) 50%); }
.ol__art { position: absolute; inset: 0; }
.ol__cap { position: absolute; z-index: 2; left: clamp(16px, 1.6vw, 26px); right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 24px); display: grid; gap: 6px; }
.ol__cat { font-size: 14px; color: rgba(236, 233, 226, .7); }
.ol__name { font: 500 clamp(22px, 1.9vw, 34px)/1.05 var(--f-display); letter-spacing: -.03em; }
.olgrid > .ol:nth-child(1) .ol__name { font-size: clamp(30px, 3.4vw, 60px); }
.ol__badge { position: absolute; z-index: 2; left: clamp(16px, 1.6vw, 26px); top: clamp(14px, 1.4vw, 22px); padding: 6px 10px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .ol__media:hover .ol__on, .ol__media:hover .ol__tint { transform: scale(1.025); } .ol__tint { transition: opacity .45s var(--e-out), transform 1.2s var(--e-out); } .ol__on { transition: transform 1.2s var(--e-out); } }
.ol__row { display: flex; align-items: center; gap: 14px; }
.ol__sw { display: flex; gap: 2px; margin-left: -8px; }
.ol__sw button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.ol__sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(236, 233, 226, .2); transition: transform .2s var(--e-out), box-shadow .2s; }
.ol__sw button.is-on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
@media (hover: hover) and (pointer: fine) { .ol__sw button:hover i { transform: scale(1.2); } }
.ol__spec { font-size: 13px; color: var(--fg2); }
.ol__price { margin-left: auto; font: 500 18px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol__price small { font: 400 13px var(--f-text); color: var(--fg2); letter-spacing: 0; }
.ol__add { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .16s var(--e-out); }
.ol__add svg { width: 18px; height: 18px; }
.ol__add:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .ol__add:hover { background: var(--fg); color: var(--bg); } }

/* ============================================================
   06 · Сцены вечера
   ============================================================ */
.scenes { position: relative; min-height: 100vh; min-height: 100svh; display: grid; overflow: hidden; background: var(--night-0); color: var(--white); --fg: var(--white); --fg2: var(--grey); }
.scenes__media { position: absolute; inset: 0; }
.scenes__media picture, .scenes__media img, .scenes__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.scenes__media.gl-ready picture { visibility: hidden; }
/* остаток дневного света в небе: голубая дымка поверх кадра */
.scenes__sky { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--day, 0); background: linear-gradient(180deg, #6F8FB4 0%, #3E5878 46%, #1E2C3D 100%); transition: opacity .3s; }
.scenes__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(6, 9, 13, .92) 0%, rgba(6, 9, 13, .45) 32%, rgba(6, 9, 13, 0) 55%), linear-gradient(180deg, rgba(6, 9, 13, .6) 0%, rgba(6, 9, 13, 0) 22%); }
.scenes__ui { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: space-between; padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(32px, 6vh, 64px); }
.scenes__ui > .meta { grid-column: 1 / -1; color: rgba(236, 233, 226, .65); }
.scenes__now { grid-column: 1 / span 7; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(18px, 2.4vw, 40px); align-self: end; margin-bottom: clamp(28px, 4vh, 44px); }
.scenes__now > b { font: 400 clamp(64px, 9vw, 168px)/.82 var(--f-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.scenes__now p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(236, 233, 226, .7); max-width: 340px; }
.scenes__ctl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 6px; align-items: end; }
.scenes__ctl .fader { grid-column: 1 / span 8; }
.scenes__marks { grid-column: 1 / span 8; display: flex; justify-content: space-between; }
.scenes__marks button { padding: 8px 0; min-width: 44px; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; color: rgba(236, 233, 226, .5); transition: color .2s; }
.scenes__marks button:first-child { text-align: left; } .scenes__marks button:last-child { text-align: right; }
.scenes__marks button.is-on { color: var(--white); }
.scenes__zones { grid-column: 9 / span 4; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(236, 233, 226, .2); }
.scenes__zones div { padding-top: 12px; }
.scenes__zones dd { margin-top: 6px; font: 500 17px/1 var(--f-display); color: rgba(236, 233, 226, .45); font-variant-numeric: tabular-nums; }
.scenes__zones .is-on dd { color: var(--white); }

/* ============================================================
   07 · Подбор
   ============================================================ */
.find { padding: clamp(110px, 12vw, 200px) 0; }
.find__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 70px); }
.find__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.find__head .meta { grid-column: 1 / -1; margin-bottom: 26px; }
.find__head .t-section { grid-column: 1 / span 8; }
.find__head .sec-head__note { grid-column: 9 / span 4; justify-self: end; }
.find__steps { grid-column: 1 / span 5; display: grid; }
.fq { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; row-gap: 14px; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.fq > .meta { padding-top: 6px; }
.fq h3 { font: 500 clamp(20px, 1.6vw, 26px)/1.15 var(--f-display); letter-spacing: -.02em; }
.fq .opts { grid-column: 2; gap: 8px; }
.fq .opt { padding: 10px 14px; min-height: 40px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.fq .opt::after { display: none; }
.fq .opt.is-on { box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); }
.find__out { grid-column: 7 / span 6; position: sticky; top: 90px; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.find__ex { display: grid; gap: 10px; align-content: start; }
.find__ex .lit { aspect-ratio: 4 / 5; }
.find__ex figcaption { line-height: 1.5; }
.find__res { display: grid; gap: 20px; align-content: start; }
.find__list { list-style: none; border-top: 1px solid var(--line); }
.find__list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.find__list span { grid-column: 1 / -1; font: 400 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.find__list b { font: 500 18px/1.2 var(--f-display); letter-spacing: -.015em; }
.find__list em { font-style: normal; font-size: 14px; color: var(--fg2); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .find__list a:hover b { color: var(--light); } }
.find__pack { display: grid; gap: 6px; }
.find__pack b { font: 500 22px/1.15 var(--f-display); letter-spacing: -.02em; }
.find__pack small { font-size: 14px; color: var(--fg2); }
.find__go { display: grid; gap: 16px; justify-items: start; }
.find__go .btn { width: 100%; }

/* ---------- 08 · Ваш световой план ---------- */
.yp { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.yp__kv { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.yp__kv dd { margin-top: 4px; font: 500 16px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }

/* ============================================================
   Планшет и телефон — свои композиции
   ============================================================ */
@media (max-width: 980px) {
  .cat-index { grid-template-columns: 1fr 1fr; }
  .olgrid { grid-template-columns: 1fr 1fr; }
  .olgrid > .ol:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .olgrid > .ol:nth-child(1) .ol__media { aspect-ratio: 3 / 2; height: auto; }
  .scenes__now { grid-column: 1 / -1; }
  .scenes__ctl .fader, .scenes__marks, .scenes__zones { grid-column: 1 / -1; grid-row: auto; }
  .scenes__zones { margin-top: 18px; }
  .find__steps, .find__out { grid-column: 1 / -1; }
  .find__out { position: static; }
  .lc { left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .dock { padding-left: calc(var(--pad) + 58px); }
  .lc__pill { height: 46px; padding: 0 14px; }
  .lc__read span { display: none; }
  .lc__panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; padding: 22px var(--pad) calc(80px + env(safe-area-inset-bottom)); transform: translateY(16px); }
}
@media (max-width: 640px) {
  .dimmer { right: 14px; top: 46%; gap: 12px; }
  .dimmer__track { height: 26vh; }
  .dimmer__val { font-size: 40px; }
  .dimmer__mark { font-size: 10px; gap: 5px; right: 14px; }
  .dimmer__mark::after { right: -14px; width: 7px; }
  .cat-index { grid-template-columns: 1fr; }
  .cat-index a { padding: 16px 0; }
  .olgrid { grid-template-columns: 1fr 1fr; gap: 34px 12px; }
  .olgrid > .ol:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .olgrid > .ol:nth-child(1) .ol__media { aspect-ratio: 4 / 5; height: auto; }
  .ol__name { font-size: 19px; }
  .ol__row { gap: 6px; flex-wrap: wrap; }
  .ol__price { font-size: 15px; }
  .ol__add { width: 36px; height: 36px; }
  .ol__sw button { width: 30px; height: 30px; }
  .olcat__foot { flex-direction: column; align-items: stretch; gap: 18px; }
  .olcat__foot .lnk { align-self: flex-start; }
  .scenes__now { grid-template-columns: 1fr; gap: 12px; }
  .scenes__zones { grid-template-columns: repeat(2, 1fr); }
  .scenes__zones div { padding: 10px 0; }
  .find__out { grid-template-columns: 1fr; }
  .find__ex .lit { aspect-ratio: 4 / 3; }
  .yp__kv { grid-template-columns: 1fr 1fr; }
  .probe span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ol__off, .lc, .lc__panel, .gopt::before { transition: none !important; }
}
/* текст слева читается поверх яркого дома: тень с той стороны, где текст */
.glow__shade { background: linear-gradient(90deg, rgba(6, 9, 13, .78) 0%, rgba(6, 9, 13, .3) 38%, rgba(6, 9, 13, 0) 60%), linear-gradient(0deg, rgba(6, 9, 13, .94) 0%, rgba(6, 9, 13, .5) 34%, rgba(6, 9, 13, 0) 60%), linear-gradient(180deg, rgba(6, 9, 13, .7) 0%, rgba(6, 9, 13, 0) 26%); }
.glow__media img, .glow__media canvas { object-position: 68% 50%; }
.scenes__shade { background: linear-gradient(90deg, rgba(6, 9, 13, .82) 0%, rgba(6, 9, 13, .35) 36%, rgba(6, 9, 13, 0) 58%), linear-gradient(0deg, rgba(6, 9, 13, .92) 0%, rgba(6, 9, 13, .45) 32%, rgba(6, 9, 13, 0) 55%), linear-gradient(180deg, rgba(6, 9, 13, .6) 0%, rgba(6, 9, 13, 0) 22%); }
.scenes__media picture img, .scenes__media canvas { object-position: 62% 45%; }
@media (max-width: 980px) {
  .glow__shade, .scenes__shade { background: linear-gradient(0deg, rgba(6, 9, 13, .95) 0%, rgba(6, 9, 13, .6) 42%, rgba(6, 9, 13, 0) 66%), linear-gradient(180deg, rgba(6, 9, 13, .7) 0%, rgba(6, 9, 13, 0) 24%); }
}
/* телефон: диммер уходит наверх, справа от подписи; на шкале только ступени */
@media (max-width: 640px) {
  .dimmer { top: calc(var(--hdr) + 34px); transform: none; }
  .dimmer__track { height: 15vh; min-height: 110px; }
  .dimmer__mark { font-size: 0; right: 12px; }
  .dimmer__mark b { font-size: 10px; }
  .dimmer__cap { display: none; }
  .hero__top .meta { max-width: 62%; }
}

/* ============================================================
   Товар: фото как световой прибор
   ============================================================ */
.gallery__main { position: relative; }
.gl-frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; }
.gl-ready > .gl-frame { opacity: 1; }
.gallery__main.gl-ready > img { visibility: hidden; }
.gcmp { position: absolute; top: 0; bottom: 0; left: calc(var(--split, 1) * 100%); width: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; }
.gallery__main.is-cmp .gcmp { opacity: 1; }
.gcmp i { position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: var(--light); }
.gcmp em { position: absolute; top: 16px; font-style: normal; white-space: nowrap; color: rgba(236, 233, 226, .9); }
.gcmp em:first-of-type { right: 12px; } .gcmp em:last-of-type { left: 12px; }
@media (pointer: fine) { .gallery__main.gl-ready { cursor: ew-resize; } }
.plab { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto; align-items: center; gap: 10px 22px; margin-top: 14px; padding: 14px 0; border-block: 1px solid var(--line); }
.plab__dim { display: grid; gap: 2px; }
.plab__dim .meta { display: flex; justify-content: space-between; }
.plab__dim b { font-weight: 400; color: var(--fg); }
.plab__fx { position: relative; padding: 6px 0; font-size: 14px; color: var(--fg2); }
.plab__fx.is-on { color: var(--fg); }
.plab__fx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .22s var(--e-out); }
.plab__fx.is-on::after { transform: scaleX(1); }
.plab__hint { grid-column: 1 / -1; font-size: 13px; color: var(--fg2); }
.used__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.used__it { display: grid; gap: 12px; }
.used__it .lit { aspect-ratio: 4 / 3; }
.used__it figcaption { display: grid; gap: 4px; }
.used__it b { font: 500 18px/1.2 var(--f-display); }
@media (max-width: 980px) {
  .used__grid { grid-template-columns: 1fr; }
  .plab { grid-template-columns: 1fr auto; }
  .plab__k { display: none; }
}
/* ползунок на бумаге */
body[data-tone="paper"] .fader::-webkit-slider-runnable-track, .tone-paper .fader::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--fg) var(--p), var(--line) var(--p)); }
body[data-tone="paper"] .fader::-moz-range-track { background: var(--line); }
body[data-tone="paper"] .fader::-moz-range-progress { background: var(--fg); }
body[data-tone="paper"] .fader::-webkit-slider-thumb { background: var(--fg); }
body[data-tone="paper"] .fader::-moz-range-thumb { background: var(--fg); }
.shop__bar #all-light { white-space: nowrap; }
@media (max-width: 640px) {
  .shop__bar { flex-wrap: wrap; row-gap: 12px; }
  .shop__bar .sel { flex-basis: 100%; }
  .shop__bar #count { white-space: nowrap; }
}

/* ============================================================
   02 · Подход: солнце садится на настоящем доме
   ============================================================ */
.dusk { height: 320vh; }
.dusk__pin { --sun: 1; --blue: 0; --on: 0; background: var(--night-0); color: var(--white); }
.dusk__media { position: absolute; inset: 0; }
.dusk__media img, .dusk__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* днём модель дома высветлена солнцем, к ночи — своя */
.dusk__media picture img, .dusk__media canvas { filter: brightness(calc(1 + var(--sun) * 1.9 + var(--blue) * .5)) saturate(calc(.75 + var(--sun) * .1)) sepia(calc(var(--sun) * .22)); }
.dusk__lit { opacity: var(--on); }
.dusk__media.gl-ready picture, .dusk__media.gl-ready .dusk__lit { visibility: hidden; }
.dusk__sky { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.dusk__sky--day { opacity: var(--sun); background: linear-gradient(180deg, #8FB0D4 0%, #C9C6C0 26%, #E8B98C 44%, rgba(232, 185, 140, 0) 60%); }
.dusk__sky--blue { opacity: var(--blue); background: linear-gradient(180deg, #24406A 0%, #35557F 30%, #4C6A8E 46%, rgba(76, 106, 142, 0) 62%); }
.dusk__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(6, 9, 13, .9) 0%, rgba(6, 9, 13, .35) 26%, rgba(6, 9, 13, 0) 44%); }
.dusk__in { position: relative; z-index: 2; grid-template-rows: auto auto 1fr auto auto; }
.dusk__a { margin-top: clamp(10px, 3vh, 40px); max-width: 15ch; color: color-mix(in srgb, var(--ink) calc(var(--sun) * 100%), var(--white)); opacity: calc(1 - var(--k) * .7); }
.dusk__b { max-width: 15ch; color: var(--white); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 14px)); }
.dusk__clock { grid-row: 4; display: flex; align-items: baseline; gap: 16px; }
.dusk__clock b { font: 400 clamp(56px, 7vw, 128px)/.85 var(--f-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.dusk__clock span { font-size: 15px; color: rgba(236, 233, 226, .7); }
.dusk__foot { grid-row: 5; }
.dusk__text { color: rgba(236, 233, 226, .74); }
.specs-inline dt { color: rgba(236, 233, 226, .55); }
@media (max-width: 980px) { .dusk { height: 260vh; } }
@media (prefers-reduced-motion: reduce) { .dusk { height: auto; } .dusk__pin { min-height: 100svh; } }

/* ============================================================
   04 · Архив света: мозаика без пустых полей
   ============================================================ */
#works-list { display: grid; gap: var(--gap); padding-inline: var(--pad); }
.ar__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); height: clamp(320px, 36vw, 680px); }
.ar { grid-column: span var(--span); position: relative; min-width: 0; margin: 0; }
.ar .pj__main { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ar .pj__main::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(6, 9, 13, .78) 0%, rgba(6, 9, 13, 0) 34%); }
.ar__cap { position: absolute; z-index: 2; left: clamp(16px, 1.8vw, 30px); right: clamp(16px, 1.8vw, 30px); bottom: clamp(16px, 1.8vw, 26px); display: grid; gap: 6px; pointer-events: none; color: var(--white); }
.ar__cap b { font: 500 clamp(20px, 1.9vw, 34px)/1.05 var(--f-display); letter-spacing: -.03em; }
.ar__cap span { font-size: 14px; color: rgba(236, 233, 226, .72); }
.ar .lit img { transition: transform 1.4s var(--e-out); }
@media (hover: hover) and (pointer: fine) { .ar:hover .lit img { transform: scale(1.02); } }
.projects .sec-head { margin-bottom: clamp(36px, 4vw, 64px); }
.projects__more { margin-top: clamp(30px, 4vw, 60px); }
@media (max-width: 980px) {
  .ar__row { grid-template-columns: 1fr; height: auto; }
  .ar { grid-column: 1; aspect-ratio: 4 / 3; }
  .ar__row .ar:nth-child(2) { aspect-ratio: 4 / 5; }
}
/* подбор и план — без порядковых номеров */
.fq { grid-template-columns: 1fr; }
.fq .opts { grid-column: 1; }
.zrow__btn { grid-template-columns: 14px 1fr auto; }
.zrow__n { width: 7px; height: 7px; border-radius: 50%; align-self: center; box-shadow: inset 0 0 0 1px var(--fg2); }
.zrow.is-on .zrow__n { background: var(--light); box-shadow: none; }
/* заголовки разделов — одним цветом, без серой «второй половины» */
.sec-head .fg2, .find__head .fg2 { color: inherit; }
.olcat__hint { font-size: 14px; color: var(--fg2); max-width: 420px; }
@media (max-width: 980px) { .pin span { display: block; margin-left: 8px; font-size: 10px; } }
/* правки: дом днём виден, небо выше, первая фраза уходит целиком */
.dusk__media picture img, .dusk__media canvas { filter: brightness(calc(1 + var(--sun) * 3 + var(--blue) * .9)) saturate(calc(.7 + var(--sun) * .15)) sepia(calc(var(--sun) * .25)); }
.dusk__sky--day { background: linear-gradient(180deg, #8FB0D4 0%, #C9C6C0 18%, #E8B98C 30%, rgba(232, 185, 140, 0) 44%); }
.dusk__sky--blue { background: linear-gradient(180deg, #24406A 0%, #35557F 22%, #4C6A8E 32%, rgba(76, 106, 142, 0) 46%); }
.dusk__a { opacity: calc(1 - var(--k)); }
.dusk__b { margin-top: calc(var(--k) * -1.04em * 2 * 0); }
/* подписи трёх частей — сверху, чтобы не спорить с пультом */
.tri__part { justify-content: flex-start; padding-top: calc(var(--hdr) + 26px); padding-bottom: 0; }
.tri__stage::after { background: linear-gradient(180deg, rgba(6, 9, 13, .8) 0%, rgba(6, 9, 13, 0) 30%); }
.tri__part.is-on .tri__name::before { margin-bottom: 14px; }
@media (max-width: 640px) {
  .ol__row { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; }
  .ol__sw, .ol__spec { grid-column: 1 / -1; }
  .ol__price { margin-left: 0; white-space: normal; }
  .ol__cat { font-size: 12px; }
}
.ol__sw i { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent); }