/* Grand Wise Group - макет посадочной.
Композиция держится base.css (скелет из ~/.claude/templates/layout-base.css).
ЧИСЛА СНЯТЫ С РЕФЕРЕНСОВ ЗАКАЗЧИКА (правило 2.23), разбор - в решения.md:
- гарнитуры balibaza: Unbounded в заголовках (48 вхождений), Inter Tight в тексте (93)
- сетка aandjrealestate: контейнер 1328 при полях 56, жёлоб 16, карточка span 4 = 432
- прозрачная шапка поверх кадра с иконками мессенджеров и языком - balibaza
- компоновка слайда «кадр слева, панель фактов справа с разделителями» - balibaza
- карточки-документы со служебной строкой и золотой чёрточкой - aandjrealestate
- манифест: три строки, вторая приглушена, третья с акцентом - aandjrealestate
- радиус 0 доминирует (388 и 1011 вхождений), таблетка только на кнопке
- теней нет: 8 и 1 вхождение на страницу */
/* Шрифты лежат рядом, а не на fonts.gstatic.com: внешний домен в критическом пути
первого экрана стоит блокирующего запроса (правило 2.13). */
@font-face{font-family:Unbounded;src:url(fonts/unbounded-cyrillic.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-weight:300 500;font-display:swap}
@font-face{font-family:Unbounded;src:url(fonts/unbounded-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
font-weight:300 500;font-display:swap}
@font-face{font-family:InterTightLocal;src:url(fonts/intertight-cyrillic.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-weight:300 600;font-display:swap}
@font-face{font-family:InterTightLocal;src:url(fonts/intertight-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
font-weight:300 600;font-display:swap}
:root{
/* ---- цвет: тёплая бумага и чернила, схема aandjrealestate (фон R-B = +12) ---- */
--bg:#F4F0E8;
--bg-alt:#EDE8DE;
--dark:#1A1815;
--dark-2:#20241E;
--ink:#1B1915;
--ink-soft:#59534A;
--paper:#F4F0E8;
--gold:#A3855A;
--accent:#1B1915;
--on-accent:#F4F0E8;
--rule-color:rgba(27,25,21,.16);
--surface:rgba(27,25,21,.05);
/* ---- гарнитуры: пара 05, как на balibaza ---- */
--font-head:Unbounded, 'Trebuchet MS', sans-serif;
--font-text:InterTightLocal, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-mono:ui-monospace, 'SF Mono', Menlo, monospace;
/* ---- шкала кеглей. Unbounded широкий, и капсом занимает больше места,
чем антиква: потолки опущены против референса осознанно ---- */
--t-xs:13px;
--t-s:13px;
--t-m:16px;
--t-l:20px;
--t-manifest-sub:20px; /* подпись манифеста: число Максима 04.09 */
/* Логотип на телефоне. Число Максима 22 относилось к прежнему имени «GRAND WISE» -
десять знаков. «THALANG FAMILY VILLAGE» это двадцать два, и при 22 px строка выходит
407 px при доступных 200: ряд шапки считается арифметикой, а не на глаз (2.14),
и переполнение fixed-шапки в scrollWidth документа НЕ входит - hScroll молчал.
Одной строкой имя не влезает ни при каком читаемом кегле (даже 14 px даёт 262),
поэтому на телефоне оно идёт двумя. Предел замерен пачкой: при штатном трекинге
.1em проходит 15, при .04em - 16. Взят предельный. */
--t-logo-phone:16px;
--t-xl:clamp(23px,2.6vw,38px); /* h2 капсом; у balibaza строчными 51 */
/* H1 капсом. Потолок 48 возвращён правкой Максима 04.09 - размер важнее числа строк.
Цена возврата посчитана: при 48 первая смысловая часть заголовка вилл (37 знаков)
требует 1433 px при контейнере 1328, то есть в две строки он уже не укладывается. */
--t-hero:clamp(27px,3.4vw,48px);
--hdr-h:76px; /* высота шапки; правовые страницы отступают на неё сверху */
--r-pill:999px; /* кнопка */
--r-card:12px; /* карточки и кадры */
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-text);
font-size:var(--t-m);line-height:var(--lh-text)}
a{color:inherit}
b{font-weight:600}
img,video{max-width:100%;height:auto;display:block}
/* ---- заголовки капсом, как просил заказчик и как на четырёх референсах из пяти ---- */
h1,h2{font-family:var(--font-head);font-weight:400;text-transform:uppercase;
letter-spacing:-.01em;line-height:1.14;margin:0}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-xl)}
/* Лестница уровней: h2 - полоса, h3 - группа каталога, h4 - карточка.
У каждого тега ОДИН кегль (7.4): до 03.09 группа и карточка были обеими h3. */
h3{font-family:var(--font-head);font-weight:400;font-size:var(--t-group);line-height:var(--lh-head);
letter-spacing:-.015em;text-transform:uppercase;margin:0}
h4{font-family:var(--font-text);font-weight:600;font-size:var(--t-l);line-height:1.25;
letter-spacing:-.01em;margin:0}
h1 em,h2 em{font-style:normal;color:var(--gold)}
@media (max-width:767px){ input,textarea,select{font-size:16px !important} }
/* Телефон. Числа Максима 04.09, исполняются буквально (7.6):
«все заголовки больше на 6 пунктов» - h1 27→33, h2 и h3 23→29, h4 20→26;
«шрифт в кнопках как в нижней кнопке» - 16 px у всех кнопок, как у кнопки финала. */
@media (max-width:767px){
/* Числа Максима 04.09 «все заголовки +6» и «H1 больше ещё на 6, но чтобы помещалось»
вместе не сходятся: H1 упирается в ширину экрана и выше 28 не поднимается, а H2 при
+6 давал 29 - заголовок полосы оказывался крупнее заголовка страницы (7.4). Держим
его последнее число (H1 28) и опускаем нижние ступени ровно настолько, чтобы лестница
шла вниз: 28 → 26 → 22. Это +3 и +2 против исходных 23 и 20, а не полные +6. */
:root{ --t-hero:33px; --t-xl:26px; --t-l:22px; }
}
/* появление по скроллу: скрывает только класс js, который ставит скрипт в head (2.6) */
.js .reveal:not(.is-visible){opacity:0;transform:translateY(12px)}
.reveal{transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){ .reveal{transition:none}
.js .reveal:not(.is-visible){opacity:1;transform:none} }
/* ---------- служебная метка раздела: номер, черта, имя, сторона ---------- */
.tag{display:flex;align-items:center;gap:16px;margin-bottom:40px;
font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft)}
.tag__num{font-family:var(--font-head);font-size:20px;letter-spacing:0;color:var(--ink)}
.tag__line{width:1px;height:24px;background:var(--gold);flex:0 0 auto}
.tag__side{margin-left:auto;text-align:right}
/* ---------- шапка: прозрачная поверх кадра, при скролле садится на фон ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--hdr-h);
transition:background-color .3s ease, border-color .3s ease}
.hdr__in{height:100%;display:flex;align-items:center;gap:32px}
.hdr__logo{font-family:var(--font-head);font-size:var(--t-l);text-decoration:none;
letter-spacing:.1em;color:#F6F2EA;margin-right:auto;white-space:nowrap}
.hdr__logo span{opacity:.55;margin-left:8px}
.hdr__nav{display:none;gap:var(--s4)}
/* Меню - навигация, а не подпись: по правилу 2.19 ей 44 px на узких, и растёт КАРМАН,
а не кегль. До правки пункты были 20 px высотой, и проба нашла четыре мелкие цели. */
.hdr__nav a{display:inline-flex;align-items:center;justify-content:center;
min-height:44px;min-width:44px;padding-inline:var(--s2);
font-size:var(--t-s);text-decoration:none;color:rgba(246,242,234,.8)}
.hdr__nav a:hover{color:#F6F2EA}
.hdr__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:var(--r-pill);border:1px solid rgba(246,242,234,.35);color:#F6F2EA}
.hdr__lang{display:flex;align-items:center;gap:8px;font-size:var(--t-s);
border:1px solid rgba(246,242,234,.35);border-radius:var(--r-pill);
padding:8px 16px;color:rgba(246,242,234,.7)}
.hdr__lang [aria-current]{color:#F6F2EA;font-weight:600}
.hdr__lang a{text-decoration:none}
/* после первого экрана шапка получает фон - иначе светлые буквы на светлой полосе */
.hdr.is-stuck{background:rgba(244,240,232,.94);backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule-color)}
.hdr.is-stuck .hdr__logo,.hdr.is-stuck .hdr__lang [aria-current]{color:var(--ink)}
.hdr.is-stuck .hdr__nav a,.hdr.is-stuck .hdr__lang{color:var(--ink-soft)}
.hdr.is-stuck .hdr__nav a:hover{color:var(--ink)}
.hdr.is-stuck .hdr__ico{color:var(--ink);border-color:var(--rule-color)}
.hdr.is-stuck .hdr__lang{border-color:var(--rule-color)}
@media (min-width:768px){ .hdr__nav{display:flex} }
@media (min-width:1024px){ :root{--hdr-h:80px} }
/* Ряд шапки считается арифметикой, а не проверяется на глаз (правило 2.14): переполнение
fixed-шапки не входит в scrollWidth документа, и hScroll его не видит. На 340 было
145 (лого) + 32 (жёлоб) + 178 (правый блок) = 355 при контейнере 300.
Telegram - единственная дверь страницы, поэтому уходит не значок, а вторая половина
переключателя языка: ниже 1024 он показывает только противоположный язык.
Стало: 145 + 16 + 44 + 12 + 68 = 285 при контейнере 300. */
@media (max-width:1023px){
.hdr__in{gap:16px}
.hdr__lang{padding:0 8px;gap:0}
}
section[id]{scroll-margin-top:96px}
/* ---------- 1. первый экран ---------- */
.hero{position:relative;overflow:hidden;min-height:min(62.5vw,900px);
display:flex;align-items:flex-end}
.hero > .container{width:min(100% - var(--pad) * 2, var(--container))}
.hero__bg{position:absolute;inset:0;margin:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
/* Плёнка над кадром. До 04.09 в ней стояла точка .26 на 38% высоты - «окно», чтобы кадр
было видно. Текст первого экрана попадал ровно в неё на каждой ширине, кроме 1440 (там
блок упирается в потолок min-height 900 и текст прижат к низу, где плёнка уже .65-.70).
Замер контраста к 90-му перцентилю яркости кадра в полосе текста (7.16, 7.18), порог 4,5:
390 - надзаголовок 3,61 · H1 3,84 · подзаголовок 3,69; 768 - 2,26 / 1,93 / 5,95;
1024 - надзаголовок 3,46. Правка Максима «на первом экране немножко затемнить».
Стало монотонное .56 сверху → .84 снизу: окна нет, и полоса текста не зависит от того,
какой высоты вышел блок на этой ширине. */
.hero__bg::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,14,12,.56) 0%,rgba(12,14,12,.84) 100%)}
.hero__cap{position:absolute;right:var(--pad);top:96px;z-index:2;
font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.5)}
.hero__in{position:relative;z-index:2;color:#F6F2EA;
padding-block:calc(var(--rhythm) + 24px) 56px;
display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
gap:var(--gap);align-items:end}
.hero__text{grid-column:span var(--cols)}
/* Ширину H1 задаёт сетка, а не мера: 7 колонок из двенадцати - число Максима 04.09.
Мера 16ch держала его в 451 px при колонке в 785 и гнала заголовок в четыре строки (7.8). */
.hero h1{color:inherit;margin-bottom:24px;max-width:none}
.hero .over{margin:0 0 24px}
/* Мера поднята с 46ch до 66ch правкой Максима «подзаголовок в одну строку»: текст
61 знак требовал 566 px, а 46ch давали 425 и роняли его во вторую строку.
66ch - верх нормы 7.8 (45-75 знаков), запас на правку текста остаётся. */
.hero__sub{margin:0 0 32px;max-width:66ch;color:rgba(246,242,234,.84)}
.over{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
color:rgba(246,242,234,.66)}
.hero .btn{background:var(--paper);color:#1B1915}
/* плашки с цифрами - приём balibaza */
.hero__facts{grid-column:span var(--cols);display:flex;flex-direction:column;gap:12px;margin-top:40px}
/* Вертикальное поле плашки поднято с 16 до 32 - правка Максима «сделай их выше».
Обе ступени из шкалы (7.6), боковое поле не тронуто: плашки растут только в высоту. */
.fact{flex:1 1 0;padding:32px 24px;border:1px solid rgba(246,242,234,.3);
background:rgba(20,22,18,.28);backdrop-filter:blur(6px)}
.fact__num{margin:0 0 8px;font-family:var(--font-head);font-size:var(--t-l);color:#F6F2EA;
line-height:1.2}
.fact__txt{margin:0;font-size:var(--t-xs);color:rgba(246,242,234,.72);line-height:1.45}
@media (min-width:768px){
.hero__in{padding-block:calc(var(--rhythm) + 32px) 64px}
/* Заголовок берёт полную ширину и на планшете - правка Максима «растянем» */
.hero__text{grid-column:span var(--cols)}
/* Правка Максима 04.09: панель фактов уходит из правой колонки ПОД кнопку и ложится
горизонтально. На планшете четыре в ряд не помещаются - каждому досталось бы 164 px
при подписи в 270 (это уже ломало первый экран однажды: clipped 209 при hScroll ноль).
Поэтому здесь 2х2: четыре карточки, две колонки - делитель, сироты нет (7.15). */
.hero__facts{grid-column:span var(--cols);margin-top:var(--s7);
flex-direction:row;flex-wrap:wrap}
.hero__facts > .fact{flex:1 1 calc(50% - 6px)}
.sec__head{margin-bottom:48px}
.sec__head h2{margin-bottom:32px}
.sec__head--tag{margin-bottom:var(--s5)}
.row__text h2{margin-bottom:var(--s6)}
}
@media (min-width:1024px){
/* Максим назвал восемь колонок и две строки. Вместе они не сходятся, и это считается,
а не обсуждается: восемь колонок - 880 px, длинная первая строка вилл «Виллы
с бассейном на Северном Пхукете:» это 37 знаков, и в 880 они влезают только при
кегле 30. А `--t-xl` (H2 полос) на 1440 равен 37 - заголовок страницы стал бы
МЕЛЬЧЕ заголовка полосы, то есть лестница 7.4 перевернулась бы (ровно тот случай,
что разбирали 04.09 на телефоне).
Замер по ширинам: 8 колонок → 30 · 10 колонок → 36 · 12 колонок → 40.
Исполнена ЦЕЛЬ (две строки) при наибольшем кегле: заголовок во всю ширину. */
.hero__text{grid-column:span var(--cols)}
.hero h1{grid-column:span var(--cols)}
.hero__facts{grid-column:span var(--cols);max-width:none;margin-left:0;margin-top:var(--s7);
flex-direction:row;flex-wrap:nowrap}
.hero__facts > .fact{flex:1 1 0}
.sec__head{margin-bottom:64px}
.sec__head--tag{margin-bottom:var(--s5)}
}
/* ---------- полосы ---------- */
/* базовое объявляется ПЕРВЫМ, состояние - после него (7.21) */
.sec{background-color:transparent}
.sec--light{background-color:var(--bg-alt)}
.sec--dark{background-color:var(--dark);color:var(--paper)}
.sec--act{background-color:var(--dark-2);color:var(--paper)}
.sec--dark,.sec--act{--rule-color:rgba(244,240,232,.2);--ink-soft:rgba(244,240,232,.66);
--ink:#F4F0E8;--surface:rgba(244,240,232,.05)}
.sec--dark .tag__num,.sec--act .tag__num{color:var(--paper)}
/* Фон полосы - текстура, а не второй сюжет (7.18). Плотность плёнки посчитана,
а не подобрана: контраст текста к 90-му перцентилю яркости кадра под плёнкой.
Манифест: кадр полога джунглей, alpha .55 - контраст 15,5 (к самому светлому 12,4).
Финал: вечерняя улица, светлые окна, alpha .30 - к самому светлому 5,6 при пороге 4,5.
Кадр вынут из потока: в потоке он задавал бы высоту полосы (2.26). */
.sec{position:relative;isolation:isolate}
.sec__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sec__bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.sec__bg--soft img{opacity:.30}
/* шапка полосы: одна колонка, воздух между всеми тремя строками.
На узких ритм полос 48 - шапка обязана дышать заметно плотнее (7.5) */
.sec__head{display:block;margin-bottom:40px}
.sec__head h2{margin-bottom:24px;max-width:22ch}
/* Шапка из одного тега: заголовок стоит внутри ряда, чтобы кадр справа поднялся
до его верхней линии (правка Максима 03.09). Расстояние тег → H2 то же, что было. */
.sec__head--tag{margin-bottom:var(--s5)}
.row__text h2{margin:0 0 var(--s5);max-width:22ch}
.sec__head .prose{margin:0;max-width:62ch;color:var(--ink-soft)}
/* ---------- 3. каталог: один дом, три размера, галерея рядом ----------
Правка Максима 05.09. Было: шесть карточек (две группы по три размера), в каждой
карусель из трёх стилей. Стало: один дом на лендинг, размер выбирается кнопкой,
стиль на сайте один - хай-тек. Число «шесть на шесть по колонкам» его, исполняется
буквально (7.1): текст берёт шесть колонок, галерея - остальные шесть.
Полоса при этом остаётся содержимым, а кнопка стоит ВНУТРИ карточки - там она
законна и закрывает её (граница правила 7.13). */
.house{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
gap:var(--gap);align-items:stretch}
.house__body{grid-column:span var(--cols);display:grid;gap:var(--s3);align-content:start}
.house__side{grid-column:span var(--cols)}
.house__name{font-family:var(--font-head);font-size:var(--t-group);text-transform:uppercase;
letter-spacing:-.015em;font-weight:400;line-height:var(--lh-head)}
.house__name em{font-style:normal;color:var(--gold)}
.house__note{margin:0;font-size:var(--t-group-note);color:var(--ink-soft);max-width:52ch;
line-height:1.5}
/* Что входит в цену. Стояло отдельной полосой под каталогом, правкой Максима 05.09
переехало в колонку дома: там оно объясняет цену, до которой человек ещё не дошёл,
и заодно поднимает высоту текстовой колонки - а её высоту повторяет кадр (7.20). */
.house__price-note{margin:var(--s3) 0 0;font-size:var(--t-s);color:var(--ink-soft);
line-height:1.5;max-width:52ch}
/* Выбор размера. Переключение режима - цель нажатия 44 px (2.19).
Активная кнопка НЕ залита акцентом: залитая на экране одна, и это дверь
в заявку (7.7). Выбранный размер отличается рамкой в полный тон и весом. */
.picks{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.pick{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;
border:1px solid var(--rule-color);border-radius:var(--r-pill);background:none;
color:inherit;font-family:inherit;font-size:var(--t-s);line-height:1.2;cursor:pointer;
transition:border-color .2s ease, background-color .2s ease}
.pick:hover{border-color:var(--gold)}
.pick.is-on{border-color:var(--ink);background:var(--surface);font-weight:600}
@media (prefers-reduced-motion:reduce){ .pick{transition:none} }
.house__spec{margin:0;font-size:var(--t-s);color:var(--ink-soft)}
/* [hidden] проигрывает любому правилу с display, поэтому пишется явно (2.44) */
.house__spec[hidden],.house__price[hidden],.gal[hidden]{display:none}
.house__price{margin:0;font-family:var(--font-head);font-size:var(--t-l);line-height:1.2}
.house__btn{margin-top:var(--s3);justify-self:start;cursor:pointer;border:0;font-family:inherit}
/* Галерея. Наборов три - по одному на размер; виден тот, чей размер выбран.
Без JS показывается ПЕРВЫЙ набор и в нём первый кадр: три набора в потоке легли бы
стопкой, и overflow:hidden срезал бы два из трёх - ровно тот случай, что проба
поймала 03.09 (cutY 486 на всех шести карточках). Скрытое состояние ставит только
класс `js` из (2.6). Каталог без скруглений - правка Максима 03.09. */
.gal{display:none;margin:0;position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:0}
.gal:first-of-type{display:block}
.js .gal{display:none}
.js .gal.is-on{display:block}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal img:not(:first-of-type){display:none}
.js .gal img{display:block;position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.js .gal img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .js .gal img{transition:none} }
/* Стрелки смены кадра и зум - правка Максима 03.09. Появляются по наведению на десктопе;
на телефоне стоят всегда, потому что hover там не существует. Без JS не показываются
вовсе: класс `js` ставит инлайн-скрипт (2.6). У твинов стрелок нет в разметке -
среди рендеров заказчика на них один кадр, листать нечего. */
.shot__arw,.shot__zoom{display:none}
.js .shot__arw,.js .shot__zoom{display:inline-flex;align-items:center;justify-content:center;
position:absolute;width:44px;height:44px;border:0;border-radius:var(--r-pill);cursor:pointer;
background:rgba(20,22,18,.55);backdrop-filter:blur(6px);color:#F6F2EA;
opacity:0;transition:opacity .25s ease}
.js .gal:hover .shot__arw,.js .gal:hover .shot__zoom,
.js .shot__arw:focus-visible,.js .shot__zoom:focus-visible{opacity:1}
.shot__arw--prev{left:12px;top:50%;transform:translateY(-50%)}
.shot__arw--next{right:12px;top:50%;transform:translateY(-50%)}
.shot__zoom{right:12px;top:12px}
@media (hover:none){ .js .shot__arw,.js .shot__zoom{opacity:1} }
@media (prefers-reduced-motion:reduce){ .js .shot__arw,.js .shot__zoom{transition:none} }
/* Попап-галерея: кадр во весь экран, стрелки и закрытие. */
.lb{width:min(100% - 32px,1400px);max-height:92vh;padding:0;border:0;background:transparent;
overflow:visible}
.lb::backdrop{background:rgba(16,14,12,.88)}
.lb__fig{margin:0}
.lb__fig img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain}
/* Мастер-план в лайтбоксе показывается НЕ вписанным: вписанный кадр на телефоне занял бы
те же 358 px, что и в потоке, - то есть увеличением бы не был. Он берётся по высоте
экрана (82vh = 692 px на телефоне, ширина 1229) и листается вбок. Прокрутка здесь
назначенная, а не случайная (2.17): ось X открыта только этой обёртке.
Стрелок нет - кадр один. */
.lb--plan .lb__fig{overflow:auto;-webkit-overflow-scrolling:touch}
.lb--plan .lb__fig img{width:auto;max-width:none;height:auto;max-height:82vh;object-fit:fill}
.lb--plan .lb__arw{display:none}
.lb__fig figcaption{margin-top:var(--s3);font-family:var(--font-mono);font-size:var(--t-xs);
letter-spacing:.12em;text-transform:uppercase;color:rgba(246,242,234,.72);text-align:center}
.lb__x,.lb__arw{position:absolute;display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border:0;border-radius:var(--r-pill);cursor:pointer;
background:rgba(244,240,232,.12);backdrop-filter:blur(8px);color:#F6F2EA;font-size:24px;
line-height:1}
.lb__x{top:-56px;right:0}
.lb__arw--prev{left:-56px;top:50%;transform:translateY(-50%)}
.lb__arw--next{right:-56px;top:50%;transform:translateY(-50%)}
@media (max-width:1023px){
.lb__x{top:8px;right:8px}
.lb__arw--prev{left:8px}
.lb__arw--next{right:8px}
}
.gal__dots{position:absolute;right:12px;bottom:12px;display:flex;gap:var(--s2)}
.gal__dots .dot{width:6px;height:6px;border-radius:var(--r-pill);
background:rgba(246,242,234,.4);transition:background .3s ease}
.gal__dots .dot.is-on{background:rgba(246,242,234,.95)}
@media (prefers-reduced-motion:reduce){ .gal__dots .dot{transition:none} }
.gal__cap{position:absolute;left:12px;bottom:12px;padding:4px 12px;border-radius:var(--r-pill);
background:rgba(20,22,18,.55);backdrop-filter:blur(6px);
font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;
text-transform:uppercase;color:rgba(246,242,234,.9)}
/* Перестройка сетки, а не сжатие (7.9). Восьми колонок планшета «шесть на шесть» не
бывает - ряд делится пополам, 4 + 4. На телефоне ряд идёт столбцом, и галерея встаёт
ПЕРВОЙ: карточку дома смотрят с кадра, как в блоке .row выше по файлу.
Кадр вынимается из потока только там, где ряд существует: высоту ряда задаёт текст,
а кадр кадрируется под неё (7.20 и 2.26). В одноколоночной раскладке он остаётся
в потоке со своей пропорцией - абсолют оставил бы там пустое место. */
@media (max-width:767px){ .house__side{order:-1} }
@media (min-width:768px){
.house__body{grid-column:span 4}
.house__side{grid-column:5 / span 4;position:relative;min-height:0}
.gal{position:absolute;inset:0;aspect-ratio:auto}
}
@media (min-width:1024px){
.house__body{grid-column:span 6}
.house__side{grid-column:7 / span 6}
}
/* ---------- мастер-план под каталогом ---------- */
/* Один мастер-план: сверху виллы, снизу таунхаусы - правка Максима 03.09.
Два кадра заказчика сведены в один; весь его текст сохранён. */
.plan{margin:32px 0 0}
/* План идёт во всю ширину контейнера: центрированный на 900 он вставал левым краем
ни на линии сетки, ни по краю родителя (7.3). Он же и должен быть крупным - его
рассматривают. */
.plan img{width:100%;height:auto;display:block;border-radius:0}
/* План открывается крупно по нажатию (правка Максима 04.09): на телефоне он в потоке
350 px шириной, и номера участков на нём не читаются. Нажимается ВСЯ площадь кадра,
значок лупы - только подсказка. Кнопка обнулена до кадра: рамка, фон и поле сняты.
Без JS кнопка ничего не делает, но кадр виден как прежде (2.6). */
.plan__btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;
cursor:zoom-in;color:#F6F2EA}
.plan__zoom{display:none}
.js .plan__zoom{display:inline-flex;align-items:center;justify-content:center;
position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:var(--r-pill);
background:rgba(20,22,18,.55);backdrop-filter:blur(6px)}
.plan figcaption{margin-top:16px;max-width:66ch;font-family:var(--font-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);line-height:1.6}
/* ---------- окно выбора: стиль, потом форма ---------- */
.modal{width:min(100% - 32px, 1120px);max-height:92vh;padding:0;border:0;border-radius:var(--r-card);
background:var(--bg);color:var(--ink);overflow:auto}
.modal::backdrop{background:rgba(16,14,12,.72)}
.modal__x{position:sticky;top:0;display:flex;justify-content:flex-end;padding:12px 12px 0;
background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.modal__x button{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--rule-color);
background:transparent;color:var(--ink);font-size:var(--t-l);cursor:pointer;
line-height:1}
.modal__in{padding:0 24px 32px}
.modal__crumb{margin:0 0 24px;font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft)}
.modal__step{display:none}
.modal__step.is-on{display:block}
.modal__title{font-family:var(--font-head);font-size:var(--t-l);text-transform:uppercase;
font-weight:400;letter-spacing:-.01em;margin:0 0 12px}
.modal__lead{margin:0 0 var(--s5);font-size:var(--t-m);color:var(--ink-soft);max-width:56ch}
.modal__shot{display:none;margin:0}
.modal__col{min-width:0}
@media (min-width:768px){
.modal__in{padding:0 32px 40px}
.modal__step--form.is-on{display:grid;grid-template-columns:1fr 260px;gap:var(--s6);
align-items:stretch}
.modal__shot{display:block;position:relative;overflow:hidden}
.modal__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
.lead{display:grid;gap:var(--s5);max-width:none}
.lead__row{display:grid;gap:var(--s2);font-size:var(--t-s);color:var(--ink-soft)}
.lead__row input{font:inherit;font-size:var(--t-m);color:var(--ink);background:transparent;
border:1px solid var(--rule-color);border-radius:var(--r-card);
padding:var(--s4) var(--s5);min-height:64px}
.lead__row input:focus{outline:2px solid var(--gold);outline-offset:2px}
.lead .btn{cursor:pointer;border:0;font-family:inherit;justify-self:start;margin-top:8px}
.lead__note{margin:0;font-size:var(--t-xs);color:var(--ink-soft);max-width:52ch}
/* Своего верхнего отступа нет: у формы grid c gap 24, и margin сложился бы с ним
в 36 - заказчик видит сумму, а не наше слагаемое (2.34). Зазор держит форма. */
.lead__law{display:flex;flex-wrap:wrap;gap:var(--s5);margin:0;font-size:var(--t-xs)}
.lead__law a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em}
.lead__law a:hover{color:var(--ink)}
.lead__done{margin:0;padding:16px;border:1px solid var(--gold);border-radius:var(--r-card);
font-size:var(--t-s)}
/* Ловушка для ботов: поле вынесено за экран, а не спрятано display:none -
часть ботов пропускает невидимые поля, вынесенные они заполняют. */
.lead__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead__fail{margin:var(--s3) 0 0;font-size:var(--t-s);color:#B3261E}
.lead__fail[hidden]{display:none}
/* ---------- 2. район: текст задаёт высоту ряда, кадр кадрируется под неё (7.20) ---------- */
.row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);
align-items:stretch;row-gap:32px}
.row__text{grid-column:span var(--cols);max-width:62ch}
.row__text p{margin:0 0 16px}
.row__text p:last-child{margin-bottom:0}
.row__side{grid-column:span var(--cols);margin:0;display:flex;flex-direction:column;min-height:0}
/* ниже десктопа раскладка одноколоночная - кадр остаётся в потоке со своей пропорцией (2.26) */
.row__side .fig{position:static;height:auto}
.row__side .fig img{position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
border-radius:var(--r-card)}
.row__side figcaption{margin-top:16px;font-family:var(--font-mono);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* Кадр с подписью стоит НАД заголовком, пока ряд идёт одной колонкой - правка Максима 04.09.
Полоса именно до 1023, а не до 767: с 1024 ряд двухколоночный и кадр встаёт справа от
текста, а ниже он одноколоночный на всех ширинах, включая телефон в альбомной (2.35). */
@media (max-width:1023.98px){ .row__side{order:-1} }
@media (min-width:1024px){
.row__text{grid-column:span 6}
.row__side{grid-column:7 / span 6}
/* высоту ряда задаёт текст: кадр вынимается из потока и обрезается по последней строке */
.row__side .fig{flex:1 1 0;min-height:0;position:relative;overflow:hidden;
border-radius:var(--r-card)}
.row__side .fig img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
object-fit:cover;border-radius:0}
}
/* ---------- финал: три шага и одна дверь - в каталог (правка Максима 03.09) ----------
Стеклянные плашки в ряд, 4 + 4 + 4 по двенадцатиколоночной сетке - его число.
На 768 сетка восьмиколоночная: три плашки по 4 дали бы 2 + 1, то есть сироту (7.15),
поэтому там они идут столбцом во всю ширину. Стекло работает только на фоне-кадре,
и он у этой полосы есть. */
.steps{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
column-gap:var(--gap);row-gap:var(--s5)} /* 24 при внутреннем 12 - отношение 2 (7.12) */
.step{grid-column:span var(--cols);display:block;padding:var(--s5);
background:rgba(244,240,232,.08);border:1px solid rgba(244,240,232,.16);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.step__num{display:block;margin-bottom:var(--s3);
font-family:var(--font-head);font-size:var(--t-xl);line-height:var(--lh-head);
letter-spacing:-.015em;color:var(--paper)}
.step__txt{display:block;font-size:var(--t-m);color:var(--ink-soft)}
@media (min-width:1024px){ .step{grid-column:span 4;padding:var(--s6)} }
/* ---------- 4. манифест и маркеры доверия ---------- */
/* Капс - правка Максима 04.09. Прежнее исключение «строчный манифест на капсовой
странице» снято им же: страница набрана прописными целиком. */
.manifest{margin:0 0 32px;font-family:var(--font-head);font-weight:400;text-transform:uppercase;
font-size:var(--t-xl);line-height:1.24;letter-spacing:-.015em;max-width:22ch}
.manifest .dim{color:rgba(244,240,232,.42)}
.manifest em{font-style:normal;color:var(--gold)}
/* Подпись манифеста - 20 px по числу Максима 04.09, буквально и на всех ширинах (7.6).
Своя ступень: служебный кегль 13 для неё мал, а --t-l на телефоне уже 26. */
.manifest__sub{margin:0 0 64px;max-width:62ch;font-size:var(--t-manifest-sub);color:var(--ink-soft)}
/* Правка 7: не карточки со статусами, а три маркера строкой - «документы есть, и всё» */
.marks{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
column-gap:var(--gap);row-gap:var(--s7)} /* 48 при внутреннем 17 - отношение 2,8 (7.12) */
.mark{grid-column:span var(--cols);display:flex;flex-direction:column}
/* Галочка в круге вместо чёрточки - правка Максима 03.09.
Цвет наследуется, поэтому SVG инлайновый: внешний файл не видит ни color, ни токенов (2.21). */
.mark__tick{display:block;color:var(--gold);margin:0 0 16px;line-height:0}
.mark h4{margin-bottom:12px}
.mark p{margin:0;font-size:var(--t-s);color:var(--ink-soft);line-height:1.55;max-width:62ch}
@media (min-width:1024px){ .mark{grid-column:span 4} }
/* ---------- 5. локация: карта во всю полосу, под ней точки с квадратным фото ---------- */
.map{margin:0 0 32px;border-radius:var(--r-card);overflow:hidden;
aspect-ratio:4/3;background:var(--surface)}
.map iframe{display:block;width:100%;height:100%;border:0}
@media (min-width:768px){ .map{aspect-ratio:2/1;margin-bottom:48px} .plan{margin-top:48px} }
@media (min-width:1024px){ .map{aspect-ratio:64/21} }
.spots{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
column-gap:var(--gap);row-gap:32px}
.spot{grid-column:span var(--cols);display:flex;gap:16px;align-items:flex-start;min-height:96px}
.spot__ph{flex:0 0 auto;width:96px;height:96px;object-fit:cover;border-radius:var(--r-card)}
.spot__body{min-width:0;align-self:stretch;display:flex;flex-direction:column;
justify-content:space-between}
/* На телефоне под текст остаётся 238 px, и мононабор капсом в две колонки рвал имя
точки на две строки. Ниже 768 расстояние уходит под имя, а не вправо от него. */
.spot__top{display:flex;flex-direction:column;gap:4px;margin:0;
font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-soft)}
@media (min-width:768px){
.spot__top{flex-direction:row;justify-content:space-between;gap:16px;letter-spacing:.12em}
}
.spot__top span:first-child{color:var(--ink);letter-spacing:.06em}
.spot__txt{margin:0;font-size:var(--t-s);color:var(--ink-soft);line-height:1.55}
@media (min-width:768px){
.spot{grid-column:span 4;min-height:120px}
.spot__ph{width:120px;height:120px}
}
@media (min-width:1024px){ .spot{grid-column:span 6} }
/* ---------- 6. финал ---------- */
.final__foot{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);
row-gap:48px;align-items:start}
.final__foot > *{grid-column:span var(--cols)}
.final__foot .prose{margin:0 0 16px;max-width:52ch;color:var(--ink-soft)}
.final__doors{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:24px;align-items:center}
/* Служебная строка стоит ПОД кнопкой, а не рядом: действие закрывает блок (7.13).
Своего отступа не имеет - расстояние держит row-gap полосы (2.34). */
.final__over{margin:0}
/* Кнопка финала «больше и длиннее» - правка Максима 04.09. Была 202x52 при контейнере 350,
то есть 58% ширины. Стала во всю ширину контейнера, высота 64 (ступень шкалы) и кегль 16.
На планшете ширина названа сеткой, а не подобрана: span 4 из восьми колонок = 344 на 768.
Расхождение с 7.19 («один размер кнопки на страницу») названо вслух: кнопка первого экрана
и липкая остаются 52 - Максим просил про нижнюю. */
@media (max-width:1023.98px){
#final .btn{width:100%;min-height:64px;font-size:var(--t-m)}
}
@media (min-width:768px) and (max-width:1023.98px){
#final .btn{width:calc((100% - var(--gap) * 7) / 8 * 4 + var(--gap) * 3)}
}
.sec--dark .btn,.sec--act .btn{background:var(--paper);color:#1B1915}
.sec--dark .btn--ghost,.sec--act .btn--ghost{background:transparent;color:var(--paper);
border-color:rgba(244,240,232,.45)}
.final__link{font-size:var(--t-s);text-decoration:underline;text-underline-offset:3px;opacity:.86}
/* Правило «первый ребёнок на шесть колонок» снято 03.09: оно писалось под прозу финала,
а теперь первым ребёнком идут три плашки шагов, и они обязаны стоять 4 + 4 + 4
по сетке СТРАНИЦЫ, а не по половине ряда - число Максима. В половине выходило 208 px
на плашку вместо 432. */
/* ---------- подвал ---------- */
.foot{border-top:1px solid var(--rule-color);padding-block:48px}
.foot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
/* На телефоне подвал идёт СТОЛБЦОМ, и это не косметика: пока правая половина пустовала,
ряд был одноколоночным сам собой. С правовыми ссылками справа два блока стали делить
350 px - но только там, где адрес короткий: тайский влезал, русский и английский
переносились. Раскладка не имеет права зависеть от языка (7.9).
Порог считан, а не взят круглым: длинный адрес 302 + жёлоб 24 + ссылки 254 = 580,
и это влезает в контейнер 704 на 768, но не в 350 на телефоне. */
@media (max-width:767px){ .foot__in{flex-direction:column} }
.foot p{margin:0}
.foot__name{font-size:var(--t-s)}
.foot__addr,.foot__note{font-size:var(--t-xs);color:var(--ink-soft);margin-top:8px}
.foot__right{max-width:52ch}
/* ---------- кнопки и липкая полоса ---------- */
.btn{border-radius:var(--r-pill);font-size:var(--t-s);letter-spacing:.01em;
min-height:52px;padding-inline:32px}
/* «Шрифт в кнопках как в нижней кнопке» - правка Максима 04.09. Правило стоит ПОСЛЕ
базового .btn: объявленное выше проигрывало бы ему по порядку (7.21). */
@media (max-width:767px){
.btn{font-size:var(--t-m)}
/* H1 на телефоне 23: четыре строки, названные Максимом 04.09, при большем кегле не
умещаются - «НА СЕВЕРНОМ ПХУКЕТЕ:» капсом это 502 px при контейнере 350, а требование
«чтобы умещалось» он назвал вместе с текстом. Расхождение с 7.4 названо вслух:
H1 стал мельче H2 (29), лестница уровней на телефоне держится не кеглем. */
/* «Максимально большой, но чтобы помещалось» плюс «больше на 6 пунктов» - две правки
Максима 04.09, и вместе они выполнимы только при пяти строках. Счёт: его четыре строки
упираются в «НА СЕВЕРНОМ ПХУКЕТЕ:» - 15,2 px ширины на каждый пиксель кегля, потолок 23.
Пятистрочное разбиение с короткой второй строкой («СЕВЕРНЫЙ ПХУКЕТ:») даёт 12,3 px на
пиксель, и потолок поднимается до 28 - это и есть его +6 от прежних 22,7.
Кегль считается от ширины экрана: на 360 - 25,6 · на 390 - 28 · на 430 - 31,2. */
.hero h1{font-size:min(var(--t-hero), calc((100vw - var(--pad) * 2) / 12.5));max-width:none}
/* Логотип на телефоне -15% по числу Максима 04.09: 26 (кегль h4 после его же правки
«+6 пунктов») × 0,85 = 22. Токеном, чтобы число жило в одном месте (7.6). */
/* Две строки даёт ЕСТЕСТВЕННЫЙ перенос по пробелу: снимаем nowrap и ставим потолок
в 200 px - ровно столько остаётся в ряду после жёлоба и переключателя языков (2.14).
Внутри второй части неразрывный пробел, поэтому «FAMILY VILLAGE» не распадается.
Перенос разрешается ФЛЕКСОМ, а не сменой display: ниже в файле логотип получает
`display:inline-flex` ради цели нажатия 44 px (2.19), и спорить с ним за display -
значит ломать доступность ради переноса. Два обходных пути, оба проверены замером
и оба не работают: блочный span встаёт колонкой рядом с «THALANG» (имя читается
в два столбца), а
при nowrap строку не разрывает вовсе - 270 px одной строкой.
Признак, по которому это ловится: scrollWidth 270 при clientWidth 200, а
переполнение шапки при этом НОЛЬ - текст вылезает за бокс, не двигая scrollWidth
родителя (семейство 2.14 и 2.29). Глазами видно сразу: имя лезет на языки. */
.hdr__logo{font-size:var(--t-logo-phone);letter-spacing:.04em;line-height:1.15;
white-space:normal;max-width:200px;flex-wrap:wrap;align-content:center}
.hdr__logo span{margin-left:0}
}
/* Перенос только на телефоне - правка Максима 04.09 «"Локация и расстояния" на мобилке
и на нижнюю строчку». Пробел вокруг
обязателен: без него скрытый перенос склеивает
слова (журнал WEB-DESIGN, Парыч 29.08). */
.br-phone{display:inline}
@media (min-width:768px){ .br-phone{display:none} }
/* Обратный случай: перенос нужен на десктопе и мешает на телефоне - правка Максима 04.09
«в манифесте без энтеров, но только на мобильном». */
.br-wide{display:none}
@media (min-width:768px){ .br-wide{display:inline} }
/* ---------- телефон: цели нажатия по ролям (2.19) ---------- */
@media (max-width:1023px){
.hdr__logo{display:inline-flex;align-items:center;min-height:44px}
/* Имя посёлка вдвое длиннее прежнего «GRAND WISE», и на планшете ряд не сходится:
логотип 371 + жёлоб 16 + меню 271 + жёлоб 16 + языки 132 = 806 при контейнере 704.
Считано арифметикой, а не на глаз - переполнение fixed-шапки в scrollWidth
документа не входит, hScroll молчал (2.14). Имя уходит на две строки, и потолок
240 берётся из остатка: 704 - 271 - 132 - два жёлоба = 269. На 1024 контейнер 912,
та же сумма 806 влезает - там имя снова одной строкой. */
.hdr__logo{flex-wrap:wrap;align-content:center;white-space:normal;max-width:240px}
/* Отступ второй части нужен, только пока она стоит в строке. После переноса он сдвигал
её вправо на 8 px, и левый край логотипа шёл двумя разными линиями (7.3). */
.hdr__logo span{margin-left:0}
.hdr__ico{width:44px;height:44px}
/* подпись кадра на узком экране уходит под первый экран: сверху она ложилась
на надзаголовок */
.hero__cap{top:auto;bottom:16px;right:auto;left:var(--pad)}
.hdr__lang{padding:0 12px;min-height:44px}
.hdr__lang a{display:inline-flex;align-items:center;
justify-content:center;min-width:44px;min-height:44px}
/* Все три языка видны и на телефоне - правка Максима 04.09; активный отличается
весом, а не тем, что остальные спрятаны. Ряд шапки пересчитан арифметикой (2.14):
логотип 22 px даёт 128 + жёлоб 16 + переключатель 3x36 + поля 24 = 276 при
контейнере 350 на 390 и 306 на 360. Цель нажатия у языка 36 px - это не навигация
по экранам, а переключение режима внутри страницы (2.19). */
.hdr__lang [aria-current]{display:inline-flex;align-items:center;justify-content:center;
min-width:36px;min-height:44px}
.hdr__lang a{min-width:36px}
.final__link{display:inline-flex;align-items:center;min-height:44px}
}
/* Порог 380 посчитан, а не взят круглым (2.14): переключатель из трёх языков занимает
124 px, жёлоб 16, значит логотипу остаётся ширина контейнера минус 140. Логотип 22 px
это 196 px - влезает с 380 и выше (на 380 контейнер 340, остаётся 200). Ниже логотип
мельче, иначе ряд шапки уходит за край, а hScroll этого не показывает.
Правило стоит ПОСЛЕ мобильного блока, иначе проигрывает ему по порядку (7.21). */
@media (max-width:379px){
.hdr__logo{font-size:var(--t-xs)}
}
/* ---------- тайская версия ---------- */
/* Ни Unbounded, ни InterTight тайских глифов не содержат: без этого правила браузер
подставляет свой шрифт сам и заголовок ломает ритм строки. Берём системные гарнитуры
iOS и Android - внешний домен в критическом пути запрещён (2.13). Капс и отрицательный
трекинг для тайского снимаем: регистра в письме нет, а минусовой трекинг склеивает
диакритику над строкой. */
/* Тайские шрифты дописываются В КОНЕЦ стека, а не заменяют его: браузер берёт из первой
гарнитуры те глифы, что в ней есть, и уходит дальше только за недостающими. Значит
латиница - логотип, Twin House, Pool Villa, Bang Tao - остаётся Unbounded, как на всех
версиях, а тайские буквы приходят из системной гарнитуры. Замена стека целиком делала
логотип другим шрифтом (правка Максима 04.09). */
:root:lang(th){
--font-head:Unbounded, 'Noto Sans Thai', 'Sukhumvit Set', Thonburi, 'Krungthep', sans-serif;
--font-text:InterTightLocal, 'Noto Sans Thai', 'Sukhumvit Set', Thonburi, 'Krungthep', sans-serif;
}
:lang(th) h1,:lang(th) h2,:lang(th) h3,:lang(th) .over,:lang(th) .tag,
:lang(th) .house__name,:lang(th) .pick,:lang(th) .modal__title,:lang(th) .manifest{
text-transform:none;letter-spacing:0;line-height:1.35}
/* ---------- правовые страницы: privacy.html и consent.html ----------
Отдельные документы на английском, один комплект на все три языковые версии
(правка Максима 04.09). Через i18n/сборка.py НЕ проходят: сборщик собирает только
три версии из _источник.html, посторонние файлы папки не трогает.
Композиция решена до CSS (раздел 7):
- полоса одна и несёт одну роль - содержимое (7.13); действия на странице нет;
- колонка текста стоит НА СЕТКЕ, меры в ch у неё нет (7.8, развилка «ширину задаёт
сетка - меру снимают»): span 6 даёт 656 px на 1440 = 71 знак и 448 px на 1024 = 48,
обе крайности внутри нормы 45-75. Метрика знака снята с блока .note: 656 px при
13 px = 87 знаков, значит 9,28 px на знак при 16;
- НАЗВАННОЕ ИСКЛЮЧЕНИЕ из 7.4: h2 разделов набран ступенью --t-l (20), а не --t-xl.
В документе тринадцать разделов, и заголовок 38 капсом у каждого превратил бы
страницу в крик. Новых ступеней в шкале при этом не появляется - берётся та,
что уже есть, и на самой странице у h2 по-прежнему ОДИН кегль;
- отступы из шкалы: между разделами 48, заголовок → свой текст 12 (7.5, вчетверо). */
.legal{padding-top:calc(var(--hdr-h) + var(--rhythm) / 2)}
/* Раскладка правовой страницы - число Максима 04.09: восемь колонок по центру,
по две пустых слева и справа. Исполняется буквально (7.6) и живёт здесь одним
правилом на оба документа.
На планшете двенадцати колонок нет - там сетка восьмиколоночная, и 2+8+2 в неё
не помещается; пропорция 2/12 даёт 1,33, берётся ближайшее целое: 1 + 6 + 1 (7.1,
блок занимает ЦЕЛОЕ число колонок). На телефоне колонок четыре, отступы съели бы
половину строки - там документ идёт во всю ширину.
Расхождение с 7.8 названо вслух: восемь колонок на 1440 - это 880 px, то есть
строка около 150 знаков при норме 45-75. Ширина названа заказчиком и потому сильнее
шкалы; лечится это не сужением блока, а кеглем и интерлиньяжем - см. ниже. */
.legal .container{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
gap:var(--gap)}
.legal__head,.legal__doc{grid-column:span var(--cols)}
@media (min-width:768px){ .legal__head,.legal__doc{grid-column:2 / span 6} }
@media (min-width:1024px){ .legal__head,.legal__doc{grid-column:3 / span 8} }
/* Интерлиньяж 1,7 вместо 1,55 - компенсация длинной строки, а не украшение (7.8:
интерлиньяж обратен кеглю, и чем длиннее строка, тем он нужнее). Строка в 150 знаков
теряется на возврате: глаз не находит начало следующей. Считано пачкой - кегль эту
длину не лечит (16 → 150 знаков, 20 → 116, 24 → 99 при норме 75), а ширина названа
заказчиком и потому сильнее шкалы. */
.legal__doc{line-height:1.7}
.legal h1{margin:var(--s4) 0 0}
.legal__head + .legal__doc{margin-top:0}
.legal__meta{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;
color:var(--ink-soft);margin:var(--s5) 0 0}
/* Вводка отличается ЦВЕТОМ, а не кеглем - как подводка полос на главной
(.sec__head .prose). Ступень --t-l занята заголовком раздела, и вводка на ней
вставала с ним вровень: на телефоне оба выходили 22 (7.4, склейка). */
.legal__lede{color:var(--ink-soft);margin:var(--s6) 0 0}
/* Заголовок раздела: ступень --t-l, гарнитура заголовков - см. исключение выше */
.legal h2{font-size:var(--t-l);margin:var(--s7) 0 var(--s3)}
.legal__doc ul{margin:0 0 var(--s3);padding-left:var(--s5)}
.legal__doc li{margin-bottom:var(--s2)}
.legal__doc a{text-decoration:underline;text-underline-offset:.2em}
/* Матрица «цель × данные × основание». Таблицей НЕ верстается: три колонки не влезают
в колонку текста ни на одной ширине - замер дал 27 знаков на 768 и был бы уже на 1024,
где колонка 448 px (7.8). Стопка подписанных строк читается одинаково везде, а
притворяться таблицей ради вида не нужно - у содержимого нет второй оси. */
.basis{list-style:none;margin:0 0 var(--s3);padding:0}
.basis li{border-top:1px solid var(--rule-color);padding-top:var(--s4);margin-bottom:var(--s5)}
.basis__aim{margin:0 0 var(--s3)}
/* Кегль основной, а не служебный: при 13 строка выходила 84 знака в колонке 656 (7.8).
Служебность здесь держит цвет и подпись сверху, а не размер. */
.basis__row{margin:0 0 var(--s2);color:var(--ink-soft)}
/* Подпись поля - служебный уровень, он мельче именующего (7.17) */
.basis__row span{display:block;font-family:var(--font-mono);font-size:var(--t-xs);
letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s1)}
/* Служебная строка закрывает документ - под чертой, как в подвале (7.13) */
.legal__also{border-top:1px solid var(--rule-color);margin:var(--s7) 0 0;
padding-top:var(--s5);color:var(--ink-soft)} /* тот же счёт: 87 знаков при 13 */
/* Ссылка «назад» - навигация, значит карман 44 (2.19), а не кегль */
.legal__back{display:inline-flex;align-items:center;min-height:44px;
font-size:var(--t-s);text-decoration:none;color:var(--ink-soft)}
.legal__back:hover{color:var(--ink)}
/* Правовые ссылки подвала: две двери одного веса - один кегль, один ряд (7.17) */
.foot__legal{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:var(--t-xs)}
.foot__legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em}
.foot__legal a:hover{color:var(--ink)}