/* Мобильная композиция: перестраивает связи, а не просто уменьшает десктоп. Одна таблица правил без повторов. */
@media(max-width:1100px){.has-note{grid-template-columns:minmax(0,1fr);gap:2em}}
@media(max-width:900px){
  /* ночь остаётся закреплённой; циферблат уменьшен, чтобы всё поместилось в экран */
  .nz{grid-template-columns:minmax(0,1fr);gap:var(--g1);align-content:center;padding-top:1.5rem}
  .nz__clock canvas{width:min(64vw,34vh);width:min(64vw,34svh)}
  /* зона 4 без закрепления: состояния меняются, пока шкала проходит через экран; порядок: название, шкала, пояснение */
  #z4{height:auto}#z4 .pin{position:static;height:auto;overflow:visible;padding:var(--g3) 0}
  .d4{display:flex;flex-direction:column;align-items:stretch;width:100%;box-sizing:border-box;height:auto;gap:var(--g1);padding:0 var(--m)}
  .d4__l{display:contents}.d4__l h2{order:1}.d4__r{order:2}.d4__l #d4cap{order:3}.d4__l .d4n{order:4}.d4__l .seg{order:5}
  .tl--pin{height:720px}
  .d4__note{display:none}
  .d4__l #d4cap{min-width:0;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:900px) and (max-height:640px){.nz__clock canvas{width:min(46vw,24vh);width:min(46vw,24svh)}.nz__clock .cap{display:none}}
@media(max-width:700px){
  :root{--g3:4rem}
  .split,.att,.pnls{grid-template-columns:minmax(0,1fr)}
  .split>*+*,.att>li+li,.pnls>.pnl+.pnl{border-left:0;border-top:1px solid currentColor}
  .cols,.fcols,.three>div{grid-template-columns:minmax(0,1fr)}.three>div{gap:.5rem}
  .sx{height:520px}
  .dbr{display:none}
  .tr{grid-template-columns:minmax(0,1fr) auto}.tr i{grid-column:1/-1;grid-row:2}.tr b{grid-column:2;grid-row:1}
  .ph .q{font-size:var(--fs-speech)}
  .tl{--ax:4.25rem}.hl{font-size:var(--fs-tag)}
  .tl--long{height:200vh}.tl--long .name{font-size:var(--fs-lead)}
  .z3g{grid-template-columns:minmax(0,1fr)}.readout{display:none}.now time{display:block}
  .opts{flex-direction:column}.opt{white-space:normal;text-align:center;padding:1rem 1.25rem}
  /* годы жизни: сетка вместо одной длинной полосы, прокрутки вбок нет, каждая клетка не меньше 28 px */
  .yrs{height:auto;display:grid;gap:4px}
  #y60{grid-template-columns:repeat(10,minmax(0,1fr))}#y60 .yr{height:auto;aspect-ratio:1/1;min-height:28px}
  #y7{grid-template-columns:repeat(7,minmax(0,1fr))}#y7 .yr{height:3.5rem}
  /* боковая рейка на телефоне закрывала бы край текста */
  #rail{display:none}
}