/* ГРАНИ v2 — общая система всех страниц. Подключается первой, до стилей страницы.
   Разделы: 1 шрифты и токены · 2 база и сетка · 3 типографика · 4 детали чертежа ·
   5 кнопки и ссылки · 6 шапка · 7 шторка · 8 первый экран листа, разделы, заглушки ·
   9 следующий лист · 10 подвал · 11 прелоадер · 12 переход «Грань» · 13 телефон · 14 reduced-motion.
   Стили конкретной страницы живут в assets/css/pages/<страница>.css, сюда не кладутся. */

/* ---------- 1. шрифты и токены ---------- */
@font-face{font-family:"Forum";src:url(../fonts/forum-cyr.woff2) format("woff2");font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Forum";src:url(../fonts/forum-lat.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ysabeau";src:url(../fonts/ysabeau-cyr.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Ysabeau";src:url(../fonts/ysabeau-lat.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ysabeau";font-style:italic;src:url(../fonts/ysabeau-it-cyr.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Ysabeau";font-style:italic;src:url(../fonts/ysabeau-it-lat.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212,U+FEFF,U+FFFD}

:root{
  /* палитра v1 */
  --bg:#F4F2ED; --surface:#FBFAF7; --sand:#E8E3DA; --line:#D7D1C5; --line-2:#C4BCAD;
  --ink:#1A1C1E; --ink-2:#3B3E40; --muted:#62666A;
  --bronze:#9C7C4D; --bronze-ink:#77592E; --glass:#8FA6A6; --glass-ink:#4F6767;
  /* добавлено в v2 (DIZAJN 2.5) */
  --water:#DCE4E2; --water-2:#CBD8D5; --hatch-bg:#E4DED2; --poche:#2A2C2E;
  --furn:rgba(59,62,64,.42); --sel:rgba(156,124,77,.14); --pool:#BFD0CE;
  --ff-d:"Forum",Georgia,serif;
  --ff-t:"Ysabeau","Gill Sans",Optima,sans-serif;
  /* сетка (DIZAJN 2.3): 12 колонок, на телефоне 4 */
  --gut:clamp(20px,5.6vw,96px); --gap:24px; --max:1360px; --cols:12;
  --hdr:68px;
  --sec:clamp(120px,10vw,160px);
  /* движение (DIZAJN 2.7) */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.25,1);
  color-scheme:light;
}

/* ---------- 2. база и сетка ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-2) var(--bg);font-synthesis:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--ff-t);-webkit-font-smoothing:antialiased}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,figure,dl,dd,ol,ul{margin:0}
h1,h2,h3,h4{font-weight:400}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--bronze);color:var(--surface)}
:focus-visible{outline:1.5px solid var(--bronze);outline-offset:4px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main{position:relative;z-index:1;display:block;padding-top:var(--hdr)}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}

/* ---------- 3. типографика (DIZAJN 2.4) ----------
   Forum только заголовки и одиночные крупные числа. Столбцы цифр только Ysabeau.
   Капс (.tech, .btn) только в штампе, осях, меню, кнопках и шапках таблиц. */
.brand{font:400 clamp(4.5rem,12vw,11rem)/.82 var(--ff-d);letter-spacing:.06em;margin-left:-.04em}
.d1{font:400 clamp(3.4rem,7.4vw,7.25rem)/.88 var(--ff-d);letter-spacing:.015em;text-wrap:balance}
.d2{font:400 clamp(2.2rem,3.6vw,3.6rem)/1.02 var(--ff-d);text-wrap:balance}
.d3{font:400 clamp(1.45rem,1.9vw,1.9rem)/1.08 var(--ff-d)}
.num{font:400 clamp(2.6rem,3.8vw,3.6rem)/1 var(--ff-d)}
.num i,.unit{font:italic 500 max(.4em,12px)/1 var(--ff-t);color:var(--bronze-ink);margin-left:.18em}
.lead{font-size:clamp(1.08rem,1.25vw,1.22rem);line-height:1.5;color:var(--ink-2);max-width:36ch}
.txt{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.cap{font-size:14px;line-height:1.45;color:var(--muted)}
.ann{font:italic 500 12px/1.2 var(--ff-t);letter-spacing:.02em;color:var(--ink-2)}
.tech{font:600 11px/1.3 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lm{display:block;overflow:hidden;padding-bottom:.06em}
.lm>span{display:block}
/* статус виллы: черта 22px и курсив (DIZAJN 3.4) */
.status{display:inline-flex;align-items:center;gap:10px;font:italic 500 .95rem/1.2 var(--ff-t);color:var(--glass-ink)}
.status::before{content:"";width:22px;height:1px;background:currentColor}
.status--res{color:var(--bronze-ink)}

/* ---------- 4. детали чертежа (DIZAJN 2.2) ---------- */

/* Штамп, основная надпись листа: <dl class="stamp"><div><dt>Лист</dt><dd>02 из 07</dd></div>…</dl>
   Не больше трёх строк. Ключ техкапсом 11px, значение курсивом 13px. */
.stamp{display:grid;grid-template-columns:auto 1fr;border:1px solid var(--ink-2);min-width:0;align-self:end}
.stamp>div{display:contents}
.stamp dt,.stamp dd{padding:8px 10px;border-bottom:1px solid var(--line-2);min-width:0}
.stamp dt{font:600 11px/1.3 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line-2);white-space:nowrap}
.stamp dd{font:italic 500 13px/1.3 var(--ff-t);color:var(--ink)}
.stamp>div:last-child>dt,.stamp>div:last-child>dd{border-bottom:0}

/* Засечка: косой штрих 45°, 11px, толщина 1.3px. Отдельно: <i class="tick"></i> */
.tick{display:inline-block;width:11px;height:1.3px;background:var(--ink);transform:rotate(-45deg);vertical-align:middle}

/* Размерная цепочка: линия 1px, засечки на каждой границе, цифры над линией,
   выносные линии 0.5px. <dl class="chain"><div><dt>площадь</dt><dd>248<i>м²</i></dd></div>…</dl>
   dt идёт первым по правилам HTML, наверх цифру ставит column-reverse. */
.chain{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--ink-2);position:relative}
.chain>div{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:0 10px 10px 14px;border-left:.5px solid var(--line-2)}
.chain>div:last-child{border-right:.5px solid var(--line-2)}
.chain>div::before,.chain>div:last-child::after{content:"";position:absolute;bottom:-6px;left:-6px;width:11px;height:1.3px;background:var(--ink);transform:rotate(-45deg)}
.chain>div:last-child::after{left:auto;right:-6px}
.chain dd{font:400 clamp(1.7rem,2.3vw,2.3rem)/1 var(--ff-d)}
.chain dd i{font:italic 500 max(.5em,12px) var(--ff-t);margin-left:.18em;color:var(--bronze-ink)}
.chain dt{font-size:13px;line-height:1.3;color:var(--muted);margin-top:6px}

/* Оси: кружок Ø18 с цифрой (по горизонтали) или буквой (по вертикали; без Ё З Й О Х Ч Щ Ъ Ы Ь).
   В HTML: <span class="axis">А</span>. В SVG-чертеже: линия .ax-line, кружок .ax-dot, подпись .ax-txt */
.axis{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--ink-2);border-radius:50%;font:italic 500 11px/1 var(--ff-t);color:var(--ink-2);background:var(--surface)}
.ax-line{fill:none;stroke:var(--line-2);stroke-width:.8px;stroke-dasharray:12 3 2 3;vector-effect:non-scaling-stroke}
.ax-dot{fill:var(--surface);stroke:var(--ink-2);stroke-width:1px;vector-effect:non-scaling-stroke}
.ax-txt{font:italic 500 11px var(--ff-t);fill:var(--ink-2);text-anchor:middle;dominant-baseline:central}

/* Линейка масштаба: чёрные и белые отрезки, длина отрезка в --w (единицах шкалы),
   подпись на правом конце из data-v. Пример 0–1–2–5 м:
   <div class="scale"><span class="scale__bar"><i style="--w:1" data-v="1"></i><i style="--w:1" data-v="2"></i><i style="--w:3" data-v="5 м"></i></span></div>
   Ширину всей линейки ставит чертёж (style="width:…px"), чтобы масштаб был правдой. */
.scale{display:inline-block;width:160px;padding-bottom:16px;font:italic 500 11px/1 var(--ff-t);color:var(--ink-2)}
.scale__bar{position:relative;display:flex;height:5px;border:1px solid var(--ink)}
.scale__bar::before{content:"0";position:absolute;left:0;top:calc(100% + 4px);transform:translateX(-50%)}
.scale__bar i{position:relative;flex:var(--w,1) 1 0}
.scale__bar i:nth-child(odd){background:var(--ink)}
.scale__bar i::after{content:attr(data-v);position:absolute;right:0;top:calc(100% + 5px);transform:translateX(50%);white-space:nowrap}

/* Север: залитая стрелка 8×14 и «С». Поворот виллы в --rot. <span class="north" style="--rot:12deg">С</span> */
.north{display:inline-flex;flex-direction:column;align-items:center;gap:3px;font:600 11px/1 var(--ff-t);letter-spacing:.14em;color:var(--ink-2)}
.north::before{content:"";width:8px;height:14px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);transform:rotate(var(--rot,0deg))}

/* Выноска: точка Ø5, линия под 45°, полка, текст над полкой. Ставится в точку объекта
   (left/top в процентах кадра). .leader--l уводит текст влево.
   <span class="leader" style="left:40%;top:52%"><span class="leader__t">травертин 40 мм</span></span> */
.leader{position:absolute;width:0;height:0;pointer-events:none;--len:34px}
.leader::before{content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--surface);border:1px solid var(--ink)}
.leader::after{content:"";position:absolute;left:0;top:0;width:calc(var(--len)*1.4142);height:1px;background:var(--ink);transform-origin:0 0;transform:rotate(-45deg)}
.leader__t{position:absolute;left:var(--len);bottom:var(--len);padding:0 2px 3px;border-bottom:1px solid var(--ink);white-space:nowrap;font:italic 500 12px/1.2 var(--ff-t);color:var(--ink)}
.leader--l::after{transform:rotate(-135deg)}
.leader--l .leader__t{left:auto;right:var(--len)}

/* Лист чертежа: панель, рамка и вторая рамка внутри с отступом 8px, поля 22px. Только для чертежей. */
.sheet{position:relative;background:var(--surface);border:1px solid var(--line);padding:30px}
.sheet::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}

/* ---------- 5. кнопки и ссылки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;font:500 13px/1 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;border-radius:0;cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s}
.btn--line{border:1px solid var(--bronze);color:var(--bronze-ink);background:transparent}
.btn--line:hover{background:var(--bronze);color:var(--surface)}
.btn--solid{border:1px solid var(--ink);background:var(--ink);color:var(--bg);min-height:54px;padding:0 34px}
.btn--solid:hover{background:var(--bronze-ink);border-color:var(--bronze-ink)}
/* Ссылка-действие кончается засечкой (линия 34px и штрих 45°), не стрелкой */
.tick-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font:500 13px/1 var(--ff-t);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tick-link::after{content:"";flex:none;width:34px;height:9px;transition:transform .35s var(--ease-out);
  background:linear-gradient(var(--bronze),var(--bronze)) left center/100% 1px no-repeat,
             linear-gradient(-45deg,transparent 44%,var(--bronze) 44% 58%,transparent 58%) right center/9px 9px no-repeat}
.tick-link:hover::after{transform:translateX(6px)}

/* ---------- 6. шапка (DIZAJN 3 «Общее»): 68px, сплошная, линия снизу ----------
   Активный пункт: aria-current="page" и внутри него <i class="hdr__mark"></i>, черта,
   которая при переходе перетекает к новому пункту (view-transition-name: navmark). */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding-inline:var(--gut);background:var(--bg);border-bottom:1px solid var(--line);view-transition-name:hdr}
.hdr__logo{font:400 1.3rem/1 var(--ff-d);letter-spacing:.34em;margin-right:auto;padding-block:12px}
.hdr__nav{display:flex;gap:clamp(18px,2.2vw,34px)}
.hdr__nav a{position:relative;padding:8px 0;font:500 .78rem/1 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__nav a[aria-current="page"]{color:var(--ink)}
.hdr__nav a[aria-current="page"]::after{display:none}
.hdr__mark{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronze);view-transition-name:navmark}
.hdr__cta{padding:0 18px}
.hdr__burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px;border:0;background:none;padding:0;cursor:pointer}
.hdr__burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--ink);transition:transform .4s var(--ease-out),top .4s var(--ease-out)}
.hdr__burger i:first-child{top:18px}.hdr__burger i:last-child{top:26px}
.hdr__burger[aria-expanded="true"] i:first-child{top:22px;transform:rotate(35deg)}
.hdr__burger[aria-expanded="true"] i:last-child{top:22px;transform:rotate(-35deg)}

/* ---------- 7. шторка меню: ведомость листов крупно, номера курсивом слева ---------- */
.curtain{position:fixed;inset:var(--hdr) 0 0;z-index:45;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:24px var(--gut) 32px;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-io)}
.curtain.is-open{clip-path:inset(0)}
.curtain__list>li{border-bottom:1px solid var(--line)}
.curtain__list a{display:flex;align-items:baseline;gap:16px;min-height:44px}
.curtain__list>li>a{padding:10px 0;font:400 clamp(2rem,8.5vw,2.8rem)/1.1 var(--ff-d)}
.curtain__list i{flex:none;width:2.6em;font:italic 500 13px/1 var(--ff-t);color:var(--muted)}
.curtain__list a[aria-current="page"]{color:var(--bronze-ink)}
.curtain__villas{display:flex;flex-wrap:wrap;column-gap:22px;padding:0 0 12px calc(2.6*13px + 16px)}
.curtain__villas a{font:400 1.25rem/1 var(--ff-d);gap:8px;min-height:40px;align-items:center}
.curtain__villas i{width:auto}
.curtain__foot{margin-top:auto;padding-top:28px}

/* ---------- 8. первый экран листа, разделы, заглушки ----------
   Табличка листа: заголовок D1, лид, штамп. Расклад по колонкам страница может переопределить. */
.plate{padding-top:clamp(48px,6vw,88px)}
.plate__top{align-items:end;row-gap:28px}
.plate__title{grid-column:1/10}
.plate__lead{grid-column:1/7}
.plate .stamp{grid-column:10/13;grid-row:1/3}
.plate .chain{margin-top:36px}
.sec{padding-top:var(--sec)}
.sec__head{display:grid;gap:20px;margin-bottom:40px}
/* Заглушка каркаса: место, которое наполнит другая роль. Перед сдачей их не должно остаться:
   grep -c 'class="stub' *.html → 0 в каждом файле. */
.stub{display:grid;place-items:center;min-height:var(--stub-h,200px);padding:24px;border:1px dashed var(--line-2);color:var(--muted);font:italic 500 13px/1.45 var(--ff-t);text-align:center}
.stub+.stub{margin-top:var(--gap)}
.plate>.stub{margin-block:clamp(28px,3vw,40px)}

/* ---------- 9. ссылка на следующий лист: D2 «Лист 03. Генплан» и засечка ---------- */
.next{margin-top:var(--sec)}
.next a{display:flex;align-items:center;gap:24px;padding:40px 0 48px;border-top:1px solid var(--line-2)}
.next a::after{content:"";flex:none;width:34px;height:9px;transition:transform .35s var(--ease-out);
  background:linear-gradient(var(--bronze),var(--bronze)) left center/100% 1px no-repeat,
             linear-gradient(-45deg,transparent 44%,var(--bronze) 44% 58%,transparent 58%) right center/9px 9px no-repeat}
.next a:hover::after{transform:translateX(8px)}
.next a:hover .d2{color:var(--bronze-ink)}
.next .d2{transition:color .3s}

/* ---------- 10. подвал: бренд, ведомость листов (это и есть навигация), авторы, строка демо ---------- */
.foot{position:relative;z-index:1;background:var(--sand);border-top:1px solid var(--line-2);padding:clamp(56px,6vw,88px) 0 32px}
.foot__grid{row-gap:40px}
.foot__brand{grid-column:1/4}
.foot__logo{font:400 2.2rem/1 var(--ff-d);letter-spacing:.3em}
.foot__brand .cap{margin-top:10px}
.foot__vedom{grid-column:4/10}
.vedom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:var(--gap)}
.foot__h{font:400 1.25rem/1.1 var(--ff-d);margin-bottom:16px}
.vedom__head{display:flex;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--ink-2)}
.vedom__head span:first-child,.vedom i{flex:none;width:44px}
.vedom li{border-bottom:1px solid var(--line-2)}
.vedom a{display:flex;align-items:baseline;gap:16px;padding:9px 0;min-height:40px;transition:color .25s}
.vedom a:hover{color:var(--bronze-ink)}
.vedom i{font:italic 500 13px/1 var(--ff-t);color:var(--muted)}
.vedom__grp span{display:flex;align-items:baseline;gap:16px;padding:9px 0;min-height:40px;color:var(--muted)}
.vedom a[aria-current="page"]{color:var(--bronze-ink)}
.vedom a[aria-current="page"] i{color:var(--bronze-ink)}
.foot__who{grid-column:10/13;display:grid;gap:14px;align-content:start}
.foot__who dt{font:600 11px/1.3 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot__who dd{margin-top:3px}
.foot__demo{margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid var(--line-2)}

/* ---------- 11. прелоадер «ГРАНИ»: только первый заход за сессию ----------
   Класс is-first ставит head.js. Если site.js не загрузился, вуаль сама уходит через 5 с. */
.veil{display:none}
html.is-first .veil{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;align-content:center;gap:28px;clip-path:inset(0);transition:clip-path 1s var(--ease-io);animation:veil-safety 0s linear 5s forwards}
.veil.is-gone{clip-path:inset(0 0 100% 0);pointer-events:none}
.veil__word{display:flex;font:400 clamp(2.4rem,6vw,4.4rem)/1 var(--ff-d);letter-spacing:.32em;padding-left:.32em}
.veil__word span{opacity:0;transform:translateY(.4em);animation:veil-in .9s var(--ease-out) forwards}
.veil__word span:nth-child(2){animation-delay:.08s}.veil__word span:nth-child(3){animation-delay:.16s}
.veil__word span:nth-child(4){animation-delay:.24s}.veil__word span:nth-child(5){animation-delay:.32s}
.veil__bar{width:min(240px,50vw);height:1px;background:var(--line)}
.veil__bar i{display:block;height:100%;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
@keyframes veil-in{to{opacity:1;transform:none}}
@keyframes veil-safety{to{visibility:hidden}}

/* ---------- 12. переход «Грань» (DIZAJN 4) ----------
   Межстраничные View Transitions (Chrome 126+, Safari 18.2+). Новая страница открывается косым
   срезом 28,2° от вертикали (D = 100vh·tg 28,2° = 53,6vh), между страницами щель-блик.
   X среза идёт одной анимацией у обеих половин (--gx), щель g только у старой (--gg),
   поэтому край не плывёт. Направление: тип back ставит head.js по номеру листа.
   Где не поддерживается, обычный переход без анимации. */
@view-transition{navigation:auto}
@property --gx{syntax:"<length>";inherits:false;initial-value:0px}
@property --gg{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes gran-x{from{--gx:0px}to{--gx:calc(100vw + 53.6vh)}}
@keyframes gran-g{0%{--gg:0px}45%{--gg:18px}100%{--gg:2px}}
@keyframes gran-g-m{0%{--gg:0px}45%{--gg:12px}100%{--gg:2px}}
@keyframes gran-dim{from{filter:brightness(1)}to{filter:brightness(.94)}}
::view-transition{background:#FFFDF8}
::view-transition-image-pair(root){background:#FFFDF8}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:620ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.25,1)}
::view-transition-new(root){animation-name:gran-x;
  clip-path:polygon(-60vh 0,var(--gx) 0,calc(var(--gx) - 53.6vh) 100%,-60vh 100%)}
::view-transition-old(root){animation-name:gran-x,gran-g,gran-dim;animation-timing-function:cubic-bezier(.65,0,.25,1),linear,cubic-bezier(.65,0,.25,1);
  clip-path:polygon(calc(var(--gx) + var(--gg)) 0,calc(100vw + 60vh) 0,calc(100vw + 60vh) 100%,calc(var(--gx) + var(--gg) - 53.6vh) 100%)}
html:active-view-transition-type(back)::view-transition-new(root){
  clip-path:polygon(calc(100vw + 60vh) 0,calc(100vw - var(--gx)) 0,calc(100vw - var(--gx) + 53.6vh) 100%,calc(100vw + 60vh) 100%)}
html:active-view-transition-type(back)::view-transition-old(root){
  clip-path:polygon(-60vh 0,calc(100vw - var(--gx) - var(--gg)) 0,calc(100vw - var(--gx) - var(--gg) + 53.6vh) 100%,-60vh 100%)}
/* шапка стоит на месте, черта активного пункта перетекает к новому за те же 620 мс */
::view-transition-group(hdr),::view-transition-new(hdr){animation:none}
::view-transition-old(hdr){animation:none;opacity:0}
::view-transition-group(navmark){animation-duration:620ms;animation-timing-function:cubic-bezier(.65,0,.25,1)}

/* ---------- 13. планшет и телефон ---------- */
@media (max-width:980px){
  .hdr__nav,.hdr__cta{display:none}
  .hdr__burger{display:block}
  .plate__title,.plate__lead,.plate .stamp{grid-column:1/-1;grid-row:auto}
  .foot__brand{grid-column:1/-1}
  .foot__vedom{grid-column:1/9}
  .foot__who{grid-column:9/13}
}
@media (max-width:760px){
  :root{--gut:20px;--gap:16px;--cols:4;--hdr:60px;--sec:96px}
  body{font-size:16px}
  .brand{font-size:4.5rem}
  .d1{font-size:3.4rem}
  .d2{font-size:2.1rem}
  .d3{font-size:1.4rem}
  .txt{font-size:16px}
  .ann{font-size:11px}
  .chain{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:22px;border-bottom:0}
  .chain>div{border-bottom:1px solid var(--ink-2)}
  .chain>div:nth-child(even){border-right:.5px solid var(--line-2)}
  .chain>div:nth-child(even)::after{content:"";position:absolute;bottom:-6px;right:-6px;width:11px;height:1.3px;background:var(--ink);transform:rotate(-45deg)}
  .stamp{grid-template-columns:38% 62%}
  .stamp dt{white-space:normal}
  .sheet{padding:20px}
  .next a{gap:16px;padding:28px 0 36px}
  .foot__vedom,.foot__who{grid-column:1/-1}
  .vedom{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  ::view-transition-old(root){animation-name:gran-x,gran-g-m,gran-dim}
}

/* ---------- 14. reduced-motion: без анимаций и без перехода страниц ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}