/* core.css — общий слой ПОДСТРАНИЦ (пять кейсов, разборы, политика) в облике «Ночи».
 * 28.09.2026: перенос с антрацита на синий шёлк главной (DESIGN.md v2). Значения токенов
 * взяты из site-v2/css/noch.css один в один, новых цветов нет. ИМЕНА токенов прежние,
 * на них держатся work.css и read.css; соответствие именам главной — в комментарии у каждого.
 * Главная этот файл не подключает. Подключается ПЕРВЫМ. */

/* ─── Переход между страницами: 0 КБ, деградирует в обычную загрузку ── */
@view-transition{ navigation: auto; }

/* ─── Шрифты: те же файлы, что у главной (кэш общий, переход с главной без догрузки).
   Unbounded 300 для чисел и 600 для шапок, Golos 400/600 для текста; ₽ в каждой грани ── */
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-num.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0020, U+0025, U+002B-003A, U+00A0, U+00D7, U+2013, U+20BD, U+2192, U+2212, U+2248;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-lat.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0021-0024, U+0026-002A, U+003B-007E, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2190-2191, U+2193, U+2264-2265;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-cyr.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0401, U+0410-044F, U+0451, U+2116;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}
@font-face{
  font-family:"Golos Text";
  src:url("../assets/fonts/noch-golos-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2009, U+2011, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+202F, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}
@font-face{
  font-family:"Golos Text";
  src:url("../assets/fonts/noch-golos-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2009, U+2011, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+202F, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

/* ─── Токены ──────────────────────────────────────────────────────────────── */
:root{
  /* цвет: смысловые токены главной, остальное смешение (DESIGN.md «Цвет») */
  --ink:      oklch(25.5% .05 253);                       /* поле страницы = --deep главной */
  --ink-deep: color-mix(in oklch, var(--ink) 86%, black); /* плашки и подвал = поле главы B */
  --ink-lift: color-mix(in oklab, var(--ink), var(--paper) 5%); /* стол ниже фолда: шёлк светлее поля */
  --night:    oklch(24.7% .026 249);                      /* текст на латуни, как у .go главной */
  --paper:    oklch(94% .015 85);                         /* текст = --ink главной, тёплый белый */
  --dim:      oklch(85% .022 250);                        /* второй голос = --dim главной */
  --line:     oklch(40% .05 258);                         /* волосяные линии = --line главной */
  --paper-73: var(--dim);
  --paper-62: var(--dim);                                 /* был 62% белого, теперь второй голос главной */
  --paper-38: color-mix(in oklab, var(--paper) 44%, var(--ink)); /* зачёркнутое «было», засечки */
  --paper-16: var(--line);
  --paper-07: color-mix(in oklab, var(--line) 55%, transparent);
  --brass:    oklch(78% .11 78);                          /* единственный акцент */
  --glow:     var(--brass);                               /* тёплый свет лампы: латунь в 12–34% смеси */

  /* моушен: одна кривая и три длительности главной */
  --t-press:110ms;
  --t-micro:200ms;
  --t-scene:300ms;
  --e-out:cubic-bezier(.22,1,.36,1);
  --d-1:60ms;
  --d-2:120ms;

  --ff-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --ff-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* шаг 4, как у главной */
  --sp-3xs:4px; --sp-2xs:8px; --sp-xs:12px; --sp-sm:16px;
  --sp-md:24px; --sp-lg:32px; --sp-xl:48px; --sp-2xl:64px;
  --pad:clamp(20px,3.4vw,40px);                           /* поле страницы: 20 на телефоне, 40 на широком */
  /* статичное зерно с альфой .18, как у полей главной */
  --grain-18:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

/* ─── База ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--ink);}
html,body{overflow-x:clip;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:400 16px/1.5 var(--ff-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ol{margin:0;padding:0;list-style:none;}

:focus-visible{outline:2px solid var(--paper); outline-offset:3px;}

.skip{
  position:fixed; top:var(--sp-2xs); left:var(--sp-2xs); z-index:9;
  transform:translateY(-180%);
  display:inline-flex; align-items:center; min-height:44px;
  padding:var(--sp-xs) var(--sp-sm); border-radius:999px; background:var(--paper); color:var(--night);
  font:600 14px/1 var(--ff-body);
  transition:transform var(--t-micro) var(--e-out);
}
.skip:focus-visible{transform:translateY(0);}

/* ─── Шапка: имя слева как у главной, «Кейсы» и «Написать» справа. Без линии: шов не линия (J7) */
.bar{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:clamp(var(--sp-sm),3vw,var(--sp-lg));
  padding:var(--sp-xs) var(--pad);
  font:400 16px/1.5 var(--ff-body);
  view-transition-name:bar;
}
.bar__nav{display:flex; gap:clamp(var(--sp-xs),2.4vw,var(--sp-md)); margin-left:auto;}
/* узкий экран и длинное имя (политика: «Алексей Салтанов» + «← на главную»): кнопка уходила за край на 71 px при 320 */
@media (max-width:30rem){ body:has(#privacy) .bar{flex-wrap:wrap; row-gap:0;} }

/* Дубль текста в ::after остался в разметке (data-t), но не катается: у главной
   наведение рисует линию под словом, а не прокручивает его */
.msk{position:relative; display:block; line-height:1.5;}
.msk::after{content:none;}

.bar__mark,.lnk{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; flex:0 0 auto;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--e-out);
}
.bar__mark{font:600 17px/1 var(--ff-body); letter-spacing:-.01em; color:var(--paper);}
.lnk{color:var(--paper);}
/* подчёркивание рисуется от левого края, как у «Telegram» в шапке главной */
.bar__mark::after,.lnk::after{
  content:""; position:absolute; left:0; right:0; bottom:10px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-micro) var(--e-out);
}

/* «Написать»: тихая пилюля по линии. Латунь на подстранице одна, у Telegram в блоке связи */
.cta{
  display:inline-flex; align-items:center; gap:var(--sp-2xs);
  min-height:44px; padding:0 var(--sp-sm);
  border:1px solid var(--line); border-radius:999px;
  color:var(--paper); font:600 15px/1 var(--ff-body);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--e-out), border-color var(--t-micro) var(--e-out);
}
.cta__arw{display:inline-block; font-size:15px; line-height:1; transition:transform var(--t-micro) var(--e-out);}

@media (hover:hover) and (pointer:fine){
  .bar__mark:hover::after,.lnk:hover::after{transform:scaleX(1);}
  .cta:hover{border-color:var(--dim);}
  .cta:hover .cta__arw{transform:translateX(3px);}
}
.lnk:active,.bar__mark:active{transform:translateY(1px);}
.cta:active{transform:scale(.97);}
.skip:active{transform:translateY(0) scale(.99);}
.cta[aria-disabled="true"],.lnk[aria-disabled="true"]{opacity:.55; cursor:not-allowed; pointer-events:none;}

/* ─── Метка главы над блоком связи: второй голос, строчными, как подписи главной */
.sec__head{margin:0; font:400 15px/1.5 var(--ff-body); color:var(--dim);}
.sec__head i{font-style:normal; color:var(--dim);}

/* ─── Общие keyframes ─── */
@keyframes slide-in{from{transform:translateY(18px);} to{transform:translateY(0);}}

/* ══ .rise: лесенка въезда (B17). Движется только transform: контент виден всегда ══ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{
      animation:slide-in linear both;
      animation-timeline:view();
      animation-range:entry var(--rise-a,0%) entry var(--rise-b,90%);
    }
  }
}

/* ══ .amb: тёплое пятно лампы на синем поле. Стоит, не дышит (J10: ниже первого экрана
   само не движется ничего); гравировка-сетка старого сайта снята ══ */
.amb{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.amb__glow{
  position:absolute; inset:-10% -6%;
  background:radial-gradient(var(--amb-size,54% 44%) at var(--amb-at,26% 34%),
    color-mix(in oklab,var(--glow) 12%,transparent), transparent 72%);
  mix-blend-mode:screen; opacity:.55;
}
.amb__etch{display:none;}

/* ── покой подстраниц (23.09.2026): свет стоит, лесенки .rise нет ── */
:is(#case,#razbor) .amb__glow,
:is(#case,#razbor) .rise{animation:none;}

/* ══ ПОДВАЛ: строй главной (Ft6), поле главы B, от 64rem колонки 2:3. Движения нет ══ */
.end{
  position:relative; z-index:2;
  padding:var(--sp-2xl) var(--pad) max(var(--sp-2xl), env(safe-area-inset-bottom));
  background:var(--grain-18) 0 0 / 220px 220px, var(--ink-deep);
  background-blend-mode:overlay;
  color:var(--dim); font:400 15px/1.5 var(--ff-body);
}
.end p{margin:0;}
.end__in{display:grid; gap:var(--sp-sm); max-width:76rem;}
.end__ways{display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--sp-xs);}
.end__ways .end__a{font:600 17px/1.3 var(--ff-body);}
.end__nav ul{display:flex; flex-wrap:wrap; gap:var(--sp-2xs) var(--sp-md); margin:0; padding:0; list-style:none;}
.end__law{display:grid; gap:var(--sp-3xs);}
.end__sep{color:var(--dim);}
.end__a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  color:var(--paper);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--e-out);
}
.end__a::after{
  content:""; position:absolute; left:0; right:0; bottom:10px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-micro) var(--e-out);
}
@media (hover:hover) and (pointer:fine){ .end__a:hover::after{transform:scaleX(1);} }
.end__a:active{transform:translateY(1px);}
.end__a[aria-current="page"]::after{transform:scaleX(1); opacity:.5;}
.end .end__sign{margin-top:var(--sp-xs); max-width:34em;}
.end__legal .end__a{text-wrap:balance;}
.end__a > svg{flex:none; margin-left:8px;}   /* стрелка внешней ссылки «Сайт МосТехноГрада», как у Telegram в шапке (22.10) */
@media (min-width:64rem){
  .end__in{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:40px; align-items:start;}
  .end__nav,.end__law{grid-column:2;}
  .end__nav{grid-row:1;}
  .end .end__sign{grid-column:1; grid-row:2; margin-top:0;}
}
@media (max-width:360px){ .end{font-size:14px;} }
@media (max-width:30rem){
  .end__ways{flex-direction:column; align-items:flex-start; row-gap:var(--sp-2xs);}
  .end__sep{display:none;}
}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

@media (prefers-contrast:more){ .end{color:var(--paper);} }

/* ─── Уважение к настройке системы ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;}
  .lnk,.bar__mark,.cta,.cta__arw,.end__a,.end__a::after,.lnk::after,.bar__mark::after{transition:none !important; transform:none !important;}
  @view-transition{ navigation: none; }
}