/* ФАБУЛА · Заметки. Эталон: доски Notes (1440) и NotesM (390).
   Шире 1280 — раскладка десктопа, 1101–1280 — сжатый десктоп, 721–1100 — листы в один столбец, до 720 — телефон. */

.no-bm{display:none}

/* первый экран: карандаш справа уходит под шапку, слева бумага */
/* фон первого экрана: с 0.13.9 здесь, а не в style страницы, чтобы первый экран в базе был обычными блоками */
.no-hero{--img:url(../img/fabula-zametki-shapka.webp)}
.no-hero{position:relative;height:600px;margin-top:-88px;box-sizing:border-box;padding-top:188px;
 background:linear-gradient(90deg,var(--paper) 40%,rgba(244,242,237,.6) 56%,rgba(244,242,237,0) 72%),
  linear-gradient(180deg,var(--paper) 0%,rgba(244,242,237,0) 20%,rgba(244,242,237,0) 76%,var(--paper) 100%),
  var(--img) right center/auto 100% no-repeat}
.no-hero-t{width:540px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.no-pick{display:flex;gap:22px}
.no-hero-img{display:none}

/* листы: два столбца, правый ниже */
.no-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px;align-items:start;padding-top:60px;padding-bottom:100px}
.no-col{display:flex;flex-direction:column;gap:60px}
.no-col2{margin-top:130px}
.no-sh{transform:rotate(var(--r));padding:36px 40px 30px;display:flex;flex-direction:column;gap:14px}
.no-sh2{margin-left:40px}
.no-sh[hidden]{display:none}
.no-lc{text-transform:lowercase}
.no-go{align-self:flex-start;margin-top:4px;display:flex;flex-wrap:wrap;gap:10px 28px}

/* статьи в журналах */
.no-ar .no-in{padding-bottom:120px;display:flex;flex-direction:column;gap:44px}
.no-head{display:grid;grid-template-columns:620px minmax(0,1fr);gap:60px;align-items:end}
.no-head>p{max-width:560px}
.no-tbl{border-top:1px solid var(--ink)}
.no-tbl [role=row]{display:grid;grid-template-columns:110px minmax(0,1fr) 320px;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.no-tbl .th{padding:10px 0;border-bottom-color:var(--ink);color:var(--ink-caption);font-size:14px}
.no-y,.no-f{padding-top:4px}
.no-ys{display:none}
.no-t{display:flex;flex-direction:column;gap:6px}
.no-t .cap{font-family:var(--serif)}
.no-t a{font-family:var(--serif);font-size:20px;line-height:1.3;text-decoration:none}
.no-f{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:var(--ink-muted)}
.no-doi{overflow-wrap:anywhere}
@media (min-width:721px){ .no-ar .rs{background:none;padding-top:20px} }

@media (max-width:1360px){
 .no-tbl [role=row]{grid-template-columns:100px minmax(0,1fr) 280px}
}
@media (max-width:1280px){
 .no-head{grid-template-columns:repeat(2,minmax(0,1fr))}
 .no-list{gap:0 60px}
 .no-sh2{margin-left:24px}
 .no-tbl [role=row]{grid-template-columns:90px minmax(0,1fr) 240px}
}
/* 721–1100: листы в один столбец, карандаш остаётся справа за текстом */
@media (max-width:1100px){
 .no-head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
 .no-list{display:flex;flex-direction:column;gap:48px;max-width:calc(680px + 2*var(--pad));margin-left:0}
 .no-col{display:contents}
 .no-col2{margin:0}
 .no-sh2{margin-left:0}
}
/* до 900: карандаш уходит полосой под переключатель, таблица строками, как на телефоне */
@media (max-width:900px){
 .no-hero{height:auto;margin-top:0;padding-top:64px;background:none}
 .no-hero-img{display:block;margin-top:40px;height:320px;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(244,242,237,0) 26%,rgba(244,242,237,0) 80%,var(--paper) 100%),var(--img) center/cover no-repeat}
 .no-tbl [role=row].th{display:none}
 .no-tbl [role=row]{display:flex;flex-direction:column;gap:6px;padding:16px 0}
 .no-y,.no-f{padding-top:0}
 .no-y{font-size:13px;color:var(--ink-caption)}
 .no-ys{display:inline}
 .no-fs{display:none}
 .no-f{font-size:13px;line-height:1.5}
}
/* телефон: доска NotesM, полоса карандаша ниже */
@media (max-width:720px){
 .no-bm{display:inline}
 .no-hero{padding-top:40px}
 .no-hero-t{width:auto;gap:22px}
 .no-pick{gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
 .no-pick::-webkit-scrollbar{display:none}
 .no-pick .btn{flex:none}
 .no-hero-img{margin-top:22px;height:247px}
 .no-list{padding-top:40px;padding-bottom:0;gap:28px;max-width:none}
 .no-sh{margin:0 -4px;padding:22px 22px 24px;gap:12px;transform:rotate(var(--rm))}
 .no-go{flex-direction:column;gap:12px}
 .rs.no-in{margin-top:72px;padding-top:80px}
 .no-ar .no-in{padding-bottom:80px;gap:22px}
 .no-tbl{margin-top:10px}
}