@font-face{font-family:"Inter";src:url("/fonts/inter-cyrillic.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;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}


/* ── Literata: голос её собственных текстов ────────────────────────────
   Переменная антиква с осью оптического размера (opsz 7–72): мелкий кегль
   и крупный заголовок нарисованы по-разному, как в металлическом наборе.
   Браузер скачивает эти файлы только на страницах, где шрифт применён, —
   на главную и остальной сайт они не влияют. */
@font-face{font-family:"Literata";src:url("/fonts/literata-cyrillic.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";src:url("/fonts/literata-latin.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Literata";src:url("/fonts/literata-cyrillic-italic.woff2") format("woff2");
  font-weight:400 600;font-style:italic;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --bg:#FFFFFF; --bg2:#F8F5F2; --line:#E8E3DE;
  --ink:#171310;      /* 18.3:1 */
  --muted:#5B524B;    /*  7.4:1 */
  --accent:#B3355B; --accent-ink:#8E2A47; --accent-2:#8E2A47;
  --grad:linear-gradient(120deg,#FFE0B8 0%,#FFB9A6 30%,#EBA0C6 62%,#CDB2EC 88%,#FFFFFF 100%);
  --grad-op:.66;
  --r:16px;
  --pad:clamp(1.25rem,4vw,2rem);
}
/* режим «до ИП»: цена и оплата скрыты, форма собирает лист ожидания */
/* НЕ УДАЛЯТЬ при уборке мёртвого CSS: разметки под эти классы сейчас нет,
   но она вернётся в октябре вместе с ценой, разделом «Оплата» и формой.
   .only-after — блоки режима «после регистрации ИП», .rows — таблица оплаты. */
html[data-stage="pre"] .only-after{display:none!important}
html:not([data-stage="pre"]) .only-pre{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss03" 1}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.021em}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
a{color:var(--accent-ink);text-underline-offset:.15em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{width:100%;max-width:68rem;margin-inline:auto;padding-inline:var(--pad);position:relative}
@media (min-width:74rem){
  .rails{position:relative}
  .rails::before,.rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:0;pointer-events:none}
  .rails::before{left:calc(50% - 34rem)}
  .rails::after{right:calc(50% - 34rem)}
  .rails > *{position:relative;z-index:1}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99;border-radius:6px}

/* ── шапка ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
/* Кнопка в шапке — контурная, а не залитая. Вероника 30.08.2026: призывов
   «слишком много повсюду», сайт «очень сильно старается заманить». Малиновая
   заливка была единственным громким цветом и висела на верху каждого экрана
   всех девятнадцати страниц — это и читалось как «повсюду». Слово оставлено
   («Написать мне», её первое лицо), убран только цвет.
   background:transparent обязателен: у .pill-ghost фон #fff, а шапка
   полупрозрачная с размытием — сплошной белый овал читался бы заплаткой.
   Рамка акцентная, а не --line: #E8E3DE на полупрозрачном белом почти не видно,
   и на главной шапка ещё проезжает над розовым клином первого экрана. */
.top .pill-ghost{background:transparent;box-shadow:none;border-color:var(--accent)}
.top .pill-ghost:hover{background:rgba(179,53,91,.07)}
.top .pill-ghost:active{background:rgba(179,53,91,.13)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:60px}
.brand{font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--muted);font-weight:400}
/* На узком экране в шапке три элемента: имя, ссылка на записи и кнопка.
   Чтобы имя не ломалось на две строки, приписку и часть кегля убираем. */
@media (max-width:30rem){.brand span{display:none}}
.cta-short{display:none}
@media (max-width:26rem){
  .brand{font-size:.94rem}
  .top .pill{padding:.52rem .95rem;font-size:.9rem}
  .topnav{margin-right:.6rem}
  .cta-short{display:inline}
  .cta-full{display:none}
}
/* Совсем узкие экраны (320 px и уже). Ужимаем поля и кегль, но ссылку на записи
   сохраняем: без неё в раздел с телефона можно попасть только через подвал. */
@media (max-width:21rem){
  .top .wrap{padding-inline:.85rem}
  .brand{font-size:.9rem}
  .topnav a{font-size:.86rem}
  .top .pill{padding:.48rem .8rem;font-size:.86rem}
}
/* 320 px и уже: три элемента не помещаются даже после сжатия, и кнопка
   начинает обрезаться. Жертвуем ссылкой — на главной есть блок с записями,
   и на каждой странице есть ссылка в подвале. Доля таких экранов ничтожна. */
@media (max-width:20rem){.topnav{display:none}}

.pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.55rem 1.15rem;
  font-size:.94rem;font-weight:500;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.pill-fill{background:var(--accent);color:#fff}
.pill-fill:hover{filter:brightness(.88)}
.pill-ghost{background:#fff;color:var(--accent-ink);border-color:var(--line);box-shadow:0 1px 2px rgba(23,19,16,.06)}
.pill-ghost:hover{border-color:var(--accent)}
.pill-lg{padding:.8rem 1.6rem;font-size:1rem}

/* ── ПРИЁМ: диагональная лента, единственное цветное пятно ── */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:-18% -6% auto auto;width:62%;height:118%;z-index:-1;
  background:var(--grad);
  clip-path:polygon(40% 0,100% 0,100% 58%,4% 100%);
  opacity:var(--grad-op);
  -webkit-mask-image:linear-gradient(220deg,#000 42%,rgba(0,0,0,.35) 72%,transparent 96%);
          mask-image:linear-gradient(220deg,#000 42%,rgba(0,0,0,.35) 72%,transparent 96%);
}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 92%)}
.hero .wrap{padding-block:clamp(2.25rem,5vw,3.25rem) clamp(2rem,5vw,3rem)}
.hero h1{font-size:clamp(2.05rem,1.45rem + 2.7vw,3.1rem);line-height:1.1;max-width:20ch;margin:0 0 1.1rem}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.lead-contacts{font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);font-weight:600;margin:0 0 1.9rem}
.lead-contacts a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.lead-contacts a:hover{color:var(--accent-ink)}
.hero .lead{font-size:clamp(1.06rem,1rem + .4vw,1.22rem);color:var(--muted);max-width:34rem;margin:0 0 1.9rem}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.4rem}
.under{font-size:.92rem;color:var(--muted);margin:0;line-height:1.75}
.under b{color:var(--ink);font-weight:600}

/* ── секции ─────────────────────────────────────────────── */
.sec{padding-block:clamp(2.75rem,7vw,4.5rem)}
.sec > h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.1rem);line-height:1.18;margin:0 0 .7rem;max-width:22ch}
/* Тонкая акцентная линейка под заголовком раздела. Внутри @supports она
   прочерчивается слева направо при входе секции в экран; где scroll-анимаций
   нет — просто стоит на месте. Книжных страниц не касается: там нет .sec. */
.sec > h2::after{content:"";display:block;width:2.6rem;height:2px;margin-top:.8rem;
  background:var(--accent);border-radius:2px;transform-origin:left center}
.sec > .sub{color:var(--muted);max-width:38rem;margin:0 0 2rem}
.about-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
.col-right{display:flex;flex-direction:column;gap:.9rem}
.paper{display:flex;gap:1.15rem;align-items:flex-start;max-width:30rem;margin:1.4rem 0 0;
  text-decoration:none;color:var(--ink)}
.paper .ph{position:relative;flex:0 0 auto;width:7.5rem;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 2px 5px rgba(23,19,16,.09),0 14px 28px -18px rgba(23,19,16,.35);
  transition:transform .16s ease,box-shadow .16s ease}
.paper:hover .ph{transform:translateY(-3px) rotate(-.6deg);
  box-shadow:0 4px 10px rgba(23,19,16,.12),0 22px 40px -20px rgba(23,19,16,.45)}
.paper .ph img{width:100%;height:auto;display:block}
.paper .meta{display:block}
.paper .meta b{display:block;font-size:1.02rem;margin-bottom:.25rem}
.paper .meta .d{display:block;color:var(--muted);font-size:.92rem;margin:0 0 .5rem;line-height:1.45}
.paper .meta em{font-style:normal;color:var(--accent-ink);font-size:.9rem}
.snap{margin:0}
.snap img{width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:0 2px 6px rgba(23,19,16,.07), 0 18px 36px -20px rgba(23,19,16,.28)}
@media (min-width:52rem){
  .about-grid{grid-template-columns:minmax(0,1fr) 21rem;gap:3rem;align-items:start}
  .about-grid .prose{max-width:none}
}
.prose{max-width:38rem;color:var(--muted)}
.prose p{margin-bottom:1.05em}
.tint{background:var(--bg2);border-block:1px solid var(--line)}

.cards{display:grid;grid-template-columns:1fr;gap:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:0 1px 2px rgba(23,19,16,.05)}
.card h3{font-size:1.02rem;margin:0 0 .4rem}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.card .n{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.8rem;font-weight:600;margin:0 0 .8rem}

details.q{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin:0 0 .6rem;max-width:44rem;overflow:hidden}
details.q > summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
details.q > summary::-webkit-details-marker{display:none}
details.q > summary::after{content:"+";font-weight:400;font-size:1.4rem;color:var(--accent-ink);line-height:1}
details.q[open] > summary::after{content:"–"}
details.q > p{margin:0;padding:0 1.25rem 1.15rem;color:var(--muted);font-size:.96rem}

/* оплата */
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;max-width:44rem}
.rows > div{display:grid;grid-template-columns:1fr;gap:.1rem;padding:.95rem 1.15rem;border-bottom:1px solid var(--line)}
.rows > div:last-child{border-bottom:0}
.rows dt,.rows .k{font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rows .v{margin:0;font-size:.98rem}

/* ── соцсети: иконка = ссылка, один клик до переписки ── */
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.15rem;padding:0;list-style:none}
.social a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.05rem .55rem .6rem;
  box-shadow:0 1px 2px rgba(23,19,16,.06);transition:border-color .14s ease,transform .14s ease}
.social a:hover{border-color:var(--accent);transform:translateY(-1px)}
.social .ic{width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--ink);flex:0 0 auto}
.social svg{width:1.15rem;height:1.15rem;display:block}
.social b{font-weight:600;font-size:.94rem}
.social .who{color:var(--muted);font-size:.88rem;white-space:nowrap}

.ways{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem;padding:0;list-style:none}
.ways a{display:inline-flex;gap:.45rem;align-items:baseline;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.6rem 1.1rem;font-size:.94rem;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(23,19,16,.05)}
.ways a:hover{border-color:var(--accent)}
.ways .who{color:var(--muted);font-size:.85rem}
.note{font-size:.9rem;color:var(--muted);max-width:38rem;margin:0 0 1.8rem}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;max-width:34rem;box-shadow:0 1px 3px rgba(23,19,16,.08)}
.field{display:block;margin:0 0 1.1rem}
.field .k{display:block;font-size:.86rem;font-weight:500;margin-bottom:.35rem}
.field .hint{display:block;font-size:.82rem;color:var(--muted);margin-top:.35rem}
.field input,.field textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.6rem .75rem;box-shadow:0 1px 2px rgba(23,19,16,.05)}
.field textarea{min-height:5rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(179,53,91,.18)}
/* Сообщение над формой при ошибке заполнения: форма возвращается с тем,
   что человек уже написал, и должна сразу объяснить, чего не хватает. */
.form-error{margin:0 0 1.2rem;padding:.75rem 1rem;border-radius:var(--r);
  background:rgba(179,53,91,.07);border:1px solid rgba(179,53,91,.28);
  color:var(--accent-ink);font-size:.98rem;max-width:38rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:0 0 1.2rem}
.consent input{margin-top:.2rem;accent-color:var(--accent);width:1rem;height:1rem;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button{font:inherit;font-size:1rem;font-weight:500;background:var(--accent);color:#fff;border:0;
  border-radius:999px;padding:.75rem 1.6rem;cursor:pointer}
.form button[disabled]{opacity:.42;cursor:not-allowed}
.soon{font-size:.94rem;color:var(--muted);max-width:38rem;margin:0;padding:1rem 1.2rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r)}


.portrait{margin:0 0 1.7rem}
.portrait img{width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:0 2px 6px rgba(23,19,16,.08), 0 22px 44px -22px rgba(23,19,16,.32)}

/* 5.5rem снизу были местом под липкую полосу .bar. Полосу сняли 30.08.2026,
   и запас больше не нужен — на 19 страницах, где полосы не было никогда,
   он всё это время оставлял ~88 px пустоты под подвалом на телефоне. */
.foot{border-top:1px solid var(--line);padding-block:2rem 3rem;color:var(--muted);font-size:.86rem}
.foot a{color:var(--muted)}

@media (min-width:38rem){
  .cards{grid-template-columns:repeat(3,1fr)}
  .rows > div{grid-template-columns:12rem 1fr;gap:1rem;align-items:baseline}
}
@media (min-width:58rem){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 19rem;column-gap:3rem;align-items:start}
  .hero .portrait{grid-column:2;grid-row:1 / span 8;align-self:start;margin:0}
  .hero > .wrap > :not(.portrait){grid-column:1}
}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap > *{animation:up .5s cubic-bezier(.22,.61,.36,1) both}
  .hero .wrap > *:nth-child(2){animation-delay:.05s}
  .hero .wrap > *:nth-child(3){animation-delay:.1s}
  .hero .wrap > *:nth-child(4){animation-delay:.15s}
  .hero .wrap > *:nth-child(5){animation-delay:.2s}
  @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  /* На бумаге ничего не «проявляется»: сбрасываем всё, что ждёт прокрутки,
     иначе часть карточек ушла бы в печать невидимой. */
  *{animation:none!important;opacity:1!important;transform:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .top,.actions,.form,.social{display:none}
  .hero::before,.hero::after{display:none}
  .tint,.card,.rows,details.q{background:#fff;border:1px solid #999}
  details.q > p{display:block}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .portrait img,.snap img{max-width:60mm}
  /* Книжные страницы: на бумаге лист не нужен — ни тени, ни тонированного фона */
  .reading .sheet{background:#fff;box-shadow:none;padding-inline:0;margin-bottom:0}
}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.card-link:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 14px rgba(23,19,16,.09)}
.card-link .more{display:inline-block;margin-top:.7rem;color:var(--accent-ink);font-size:.92rem;font-weight:500}
/* Ссылка на раздел записей. На телефоне текст короче — иначе не помещается
   рядом с именем и кнопкой, а прятать её нельзя: попасть в раздел с телефона
   было бы можно только через подвал в самом низу длинной страницы. */
.topnav{margin-left:auto;margin-right:.9rem;white-space:nowrap}
.topnav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.topnav a:hover{color:var(--accent-ink)}
@media (min-width:38rem){
  .topnav{margin-right:1.2rem}
  .topnav a{font-size:.94rem}
}
.after-cards{margin:1.9rem 0 0;color:var(--muted);font-size:.96rem}

/* Цели нажатия на телефоне. «Блог» в шапке был 18×33 px при минимуме 24×24
   (WCAG 2.5.8) и рекомендации 44 — палец мажет. Область растим padding'ом,
   а отрицательным margin возвращаем прежнюю геометрию: внешне не меняется ничего.
   Ссылкам внутри абзаца это не нужно и там вредно — цели налезли бы друг на друга,
   поэтому список только из самостоятельных ссылок. По горизонтали расширяем
   лишь «Блог»: у остальных соседи в строке, и цели пересеклись бы.

   ЭТО ЖЕ ПРАВИЛО САМО СЕБЯ И НАРУШИЛО — исправлено 30.08.2026 тем же днём.
   Про горизонталь я подумал, про вертикаль нет: `padding-block` с точно
   обратным `margin-block` оставляет шаг строки прежним, а коробку нажатия
   делает выше на 2 × padding, то есть на 17,6 px. Пока абзац в одну строку,
   это незаметно; как только он переносится, нижняя строка забирает нижние
   17,6 px верхней. Замерено: 19 пар налезающих ссылок на 320 и 375 px, хуже
   всего список из восьми ссылок на /mysli/ и хлебные крошки книжной страницы.
   Положительный padding поменьше не спасает: перекрытие всегда равно
   2 × padding, безопасного значения не существует.

   Поэтому цель увеличивается только там, где ссылка одна во всём абзаце
   (`:only-child`). Ссылки внутри предложения остаются как были — WCAG 2.5.8
   их прямо исключает: «target is in a sentence or its size is otherwise
   constrained by the line-height of non-target text».
   ОСТОРОЖНО: добавишь вторую ссылку в такой абзац — padding молча исчезнет.
   Так и задумано, но помнить об этом надо. */
.topnav a{display:inline-block;padding:.6rem .55rem;margin:-.6rem -.55rem}
.after-cards a:only-child,.page-kicker a:only-child,
.foot a:only-child,.reading .cta-back a{display:inline-block;
  padding-block:.55rem;margin-block:-.55rem}
.after-cards a{color:var(--accent-ink)}

/* «Знакомо?» — плитка реплик; используется в записях раздела «Мысли о важном» */
.quotes{display:grid;grid-template-columns:1fr;gap:.75rem;max-width:44rem}
.quotes li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1.2rem;font-size:1rem;line-height:1.5;box-shadow:0 1px 2px rgba(23,19,16,.05)}
.quotes li::before{content:"";display:block;width:1.6rem;height:2px;background:var(--accent);margin:0 0 .7rem;border-radius:2px}
@media (min-width:44rem){.quotes{grid-template-columns:repeat(2,1fr);max-width:none}}

/* Заголовок внутренней страницы. Раньше он размечался как h2 с инлайновым
   размером — из-за этого на шестнадцати страницах не было ни одного h1. */
.sec > h1{font-size:clamp(1.85rem,1.35rem + 2.1vw,2.6rem);line-height:1.16;
  margin:0 0 .7rem;max-width:24ch;letter-spacing:-.01em}

/* ── служебные классы вместо повторяющихся инлайновых стилей ──────────── */
.measure{max-width:40rem}                 /* комфортная длина строки */
.plain{text-decoration:none;color:inherit}
.plain:hover{color:var(--accent-ink)}
.sec-lead{padding-bottom:0}               /* блок с заголовком страницы */
.sec-body{padding-top:1.5rem}             /* первый содержательный блок под ним */
.sec-near{padding-block:2.2rem}           /* блок «Рядом» и ссылки внизу */
/* блок «Рядом» на страницах тем: он идёт сразу под текстом, сверху воздух
   уже есть от секции, а снизу нужен отступ до ссылок навигации */
.after-cards.near{margin:0 0 1.2rem}

/* ── «Лекарство для души»: личные тексты Вероники ──────────────────────
   Читается не как статья, а как письмо: колонка уже, кегль крупнее,
   строки просторнее. Первый абзац без отступа сверху. */
/* ── КНИЖНАЯ ПОЛОСА: шаблон для её текстов ─────────────────────────────
   Отличие от статьи не в ширине колонки, а в наборе. Три приёма, и все —
   настоящие типографские, а не украшения:
     · антиква с осью оптического размера;
     · абзацный отступ красной строкой вместо отбивки пустой строкой;
     · буквица через initial-letter (не float — тот ломал первую строку).
   Фон — бумажный, а не белый: белый на этом сайте значит «интерфейс». */
/* Книга не висит в пустоте — она лежит перед читателем. Поэтому не «текст
   в узкой колонке на белом», а видимый лист на столе: подложка темнее,
   лист светлее, мягкая тень. Это и объясняет поля: они принадлежат листу,
   а не остаются необъяснимой пустотой по краям экрана.
   Строку при этом не расширяем: 60–70 знаков — оптимум, на длинной строке
   глаз теряет начало следующей. */
/* Лист — предмет на подложке, поэтому подложка обязана быть видна под ним
   всегда, а не только когда текст случайно не дотянул до низа экрана.
   Раньше нижнего поля не было: на коротком оглавлении бежевый фон проступал,
   на длинном тексте лист упирался в край окна — и страницы выглядели по-разному.
   Флекс-колонка растягивает лист минимум на высоту окна, поле под ним постоянное.
   width:100% обязателен: при auto-полях по горизонтали flex не растягивает
   элемент, и лист сжался бы по ширине содержимого. */
.reading{background:#EAE3DA;display:flex;flex-direction:column;
  min-height:100vh;min-height:100svh}
.reading .sheet{background:var(--bg2);width:100%;max-width:56rem;flex:1 0 auto;
  margin:0 auto clamp(2rem,5vw,3.5rem);
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  box-shadow:0 1px 3px rgba(23,19,16,.07),0 22px 60px -30px rgba(23,19,16,.45)}
.reading .wrap{max-width:40.5rem}
.reading .sheet .wrap{padding-inline:0}

@media (max-width:52rem){
  /* На телефоне лист занимает весь экран — тень и поля листа там ни к чему.
     Но поля САМОГО ТЕКСТА возвращаем: без них строки упираются в край экрана. */
  .reading{background:var(--bg2)}
  .reading .sheet{box-shadow:none;max-width:none;padding-inline:0;margin-bottom:0}
  .reading .sheet .wrap{padding-inline:var(--pad)}
}
/* На бумажном фоне подложка .tint того же цвета и пропадает — на этих
   страницах она становится белой, чтобы блок связи отделялся от текста. */
.reading .tint{background:var(--bg);border-block-color:var(--line)}

.page-head{padding-block:clamp(2.2rem,5vw,3.4rem) 0}
.sheet .page-head{padding-top:clamp(1.6rem,4vw,2.6rem)}
.page-kicker{font-family:"Inter",sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1.1rem}
.page-kicker a{color:inherit;text-decoration:none}
.page-kicker a:hover{text-decoration:underline}

.reading h1{font-family:"Literata",Georgia,serif;
  font-variation-settings:"opsz" 48;font-weight:500;
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.15rem);line-height:1.08;
  letter-spacing:-.015em;margin:0;max-width:20ch}

.essay{font-family:"Literata",Georgia,serif;
  font-variation-settings:"opsz" 15;font-weight:400;
  font-size:clamp(1.1rem,1.04rem + .3vw,1.24rem);line-height:1.68;
  color:var(--ink);max-width:36em;
  hyphens:none;-webkit-hyphens:none;
  margin-top:clamp(2rem,4vw,2.8rem)}
/* ПЕРЕНОСОВ В ЕЁ РУБРИКЕ НЕТ — решение Вероники 08.09.2026, дословно:
   «поправь, пожалуйста, левый край текста, он будто обрубленный».
   Обрубленным его делали именно переносы: при выключке по формату строка
   начинается там же, где кончилась предыдущая, и на телефоне каждая третья
   начиналась с обрывка в две-три буквы — «ряла», «щала», «ка,», «ла,», «рая».
   Слово начинается не сначала, и глаз читает это как обрез.
   Пробовал лечить пределами: «6 3 5» оставляет на новой строке целые слоги
   и убирает половину обрывков, но не все. Совсем без переносов их ноль —
   каждая строка начинается с целого слова.
   **Плата — более разреженные пробелы:** переносить нечего, и весь остаток
   строки уходит в пробелы. На широкой колонке этого почти не видно, на узкой
   заметно. Размен принят сознательно: она назвала левый край, на пробелы
   не жаловалась, а её собственная рукопись набрана так же — в Pages
   автоматические переносы по умолчанию выключены, и это её образец.
   **Если захочет вернуть:** `hyphens:auto` плюс
   `@supports (hyphenate-limit-chars: 10 5 5){.essay{hyphenate-limit-chars:10 5 5}}` —
   переносятся только длинные слова, от десяти букв, и на новой строке
   остаётся не меньше пяти. Проверено скриншотом 14.09.2026 на «Турецком
   пэчворке»: дыр заметно меньше, обрывков в начале строк единицы и все
   длинные. Показано ей на выбор, не включено без её слова. */
@supports (hanging-punctuation: first){.essay{hanging-punctuation:first last}}

/* Красная строка — так набирают прозу. Первый абзац без отступа:
   после заголовка он и так начинает мысль. */
/* Выключка по формату — просьба Вероники 07.09.2026: «а то справа край
   неравный, неэстетично немного». Так набрана и её собственная рукопись.
   Переносов при этом нет — она же попросила убрать их днём позже, разбор
   выше. Значит весь остаток строки уходит в пробелы, и **на узкой колонке
   разреженные строки — это нормально и ожидаемо, а не поломка.** Правил
   у этой пары два: правый край ровный, слова целые. Пробелы третьи. */
.essay p{margin:0;text-indent:1.6em;text-align:justify}
/* Перечень внутри текста: у неё каждый пример на своей строке
   («Пошёл дождь — отлично…»). Красная строка тут не нужна, а перенос длинной
   строки уводится вправо висячим отступом — иначе не видно, где начинается
   следующий пример. */
.essay .lines{margin-block:1.15em}
/* Перечень выключку по формату НЕ получает, в отличие от прозы. Колонка
   у пунктов уже на висячий отступ, строки короткие — замерено на 375 px:
   пробелы разъезжались до 32 px, а в одном месте до 78 при обычных 7,8.
   В книгах списки тоже набирают влево: это перечень, а не абзац. */
.essay .lines p{padding-left:1.5em;text-indent:-1.5em;text-align:start}
/* Только собственный первый абзац эссе. Без «>» правило ловит и первый
   абзац внутри вложенного блока: 06.09.2026 из-за этого буквица упала
   на первую строку перечня «Пошёл дождь — отлично…». */
.essay > p:first-of-type{text-indent:0}
/* Абзац с буквицей обязан вмещать её целиком. Если он короче буквицы —
   у «Турецкого пэчворка» первый абзац в две строки, а буквица на три, —
   следующий абзац обтекает её и уезжает вправо: «— Гостеприимной…» начиналась
   от середины строки. flow-root растит абзац до высоты буквицы, и следующий
   идёт под ней с обычной красной строкой. На длинном абзаце ничего не меняет.
   Поймано скриншотом 14.09.2026, в разметке этого не видно. */
.essay > p:first-of-type,.essay .essay-title + p{display:flow-root}

/* Буквица. initial-letter — штатное свойство, в отличие от float-хака,
   который вчера съезжал и ломал вторую строку. Где не поддерживается,
   первая буква просто остаётся обычной — текст не страдает. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3){
  /* Вторая буквица — у первого абзаца вложенного очерка. В книге новая часть
     открывается своим инициалом, и это самый тихий из возможных сигналов
     «начался другой текст». Двух буквиц разом человек не увидит: на 375 px
     они разнесены на 1291 px при экране в 812. */
  /* :not(.no-initial) — абзац, открывающийся репликой: буквицей стало бы
     само тире. Класс ставит генератор, разбор в tools/new-essay.py. */
  .essay > p:first-of-type:not(.no-initial)::first-letter,
  .essay .essay-title + p:not(.no-initial)::first-letter{
    -webkit-initial-letter:3;initial-letter:3;
    font-weight:500;color:var(--accent-ink);margin-right:.09em}
  /* На телефоне буквица на две строки, а не на три. С выключкой по формату
     строки рядом с буквицей короткие, и на трёх строках они расползаются:
     замерено на 375 px — пробелы 2,1× и 3,2× от обычного против одной строки
     в 2,5× при двухстрочной буквице. Это самое начало страницы, первое,
     что видит человек, — поэтому лечим, а не терпим. */
  @media (max-width:34rem){
    .essay > p:first-of-type:not(.no-initial)::first-letter,
    .essay .essay-title + p:not(.no-initial)::first-letter{-webkit-initial-letter:2;initial-letter:2}
  }
}

.essay-end{font-style:italic;color:var(--muted);text-indent:0;
  margin-top:1.8em;font-variation-settings:"opsz" 15}

/* Внутренний заголовок «матрёшки»: вступление, а внутри него озаглавленный
   очерк. Так она прислала «Мир удивителен…» с очерком о слонах внутри.
   По центру и с большими отбивками — как разделитель части в книге,
   а не как подзаголовок статьи. Ось opsz промежуточная: 28 между текстовыми
   15 и титульными 48. Абзац сразу после заголовка идёт без красной строки —
   он и так начинает мысль, ровно по тому же правилу, что первый абзац эссе.
   Отбивки заданы в rem, а не в em: em считался бы от кегля самого заголовка,
   и «2.6em» давали 54 px — полторы строки текста, то есть обычный подзаголовок
   статьи. Разделитель части должен дышать: 5.6rem это ровно три строки
   основного текста на телефоне. В rem ритм ещё и не поедет, когда clamp
   поменяет кегль заголовка. */
.essay .essay-title{font-family:"Literata",Georgia,serif;
  font-variation-settings:"opsz" 28;font-weight:500;
  font-size:clamp(1.3rem,1.2rem + .5vw,1.5rem);line-height:1.25;
  text-align:center;text-indent:0;letter-spacing:-.005em;
  max-width:24ch;margin:5.6rem auto 2.8rem;text-wrap:balance}
.essay .essay-title + p{text-indent:0}

/* ── Оглавление рубрики ────────────────────────────────────────────────
   Список текстов — не карточки товаров, а содержание книги: названия
   антиквой, тонкие линейки, никаких рамок и теней. */
.toc{margin-top:clamp(1.6rem,4vw,2.4rem)}
.toc a{display:block;text-decoration:none;color:inherit;
  border-top:1px solid var(--line);padding:1.35rem 0}
.toc a:last-child{border-bottom:0;padding-bottom:0}
/* Название — акцентным цветом и со стрелкой, как «Читать →» в карточках.
   Оглавление намеренно без рамок и теней, поэтому раньше единственным
   признаком ссылки было наведение — а на телефоне его нет вообще,
   и пункт читался как обычный заголовок. Юра поймал 30.08.2026. */
.toc h2{font-family:"Literata",Georgia,serif;font-variation-settings:"opsz" 28;
  font-weight:500;font-size:clamp(1.3rem,1.15rem + .7vw,1.62rem);
  line-height:1.2;margin:0 0 .45rem;color:var(--accent-ink);max-width:none}
.toc h2 span{font-family:"Inter",sans-serif;font-size:.72em;
  font-variation-settings:normal;white-space:nowrap}
.toc p{font-family:"Literata",Georgia,serif;font-variation-settings:"opsz" 14;
  color:var(--muted);font-size:1rem;line-height:1.55;margin:0;max-width:34em}
.toc a:hover h2{text-decoration:underline;text-underline-offset:.15em}
.toc a:hover{background:linear-gradient(90deg,rgba(179,53,91,.045),transparent 60%)}
/* Отклик на палец: наведения на телефоне нет, нажатие должно быть заметно */
.toc a:active{background:rgba(179,53,91,.08)}

/* Концовка листа — одна контекстная ссылка, без приглашения и без кнопки.
   Убраны 30.08.2026: «Написать мне» стоит в липкой шапке и видно на любой
   прокрутке, а тот же абзац читался дважды подряд при переходе
   «оглавление → текст». Своей линейки у ссылки нет намеренно — её даёт подвал,
   иначе две линейки сходятся почти вплотную вокруг одной строки. */
.reading .cta-back{margin:clamp(2.4rem,5vw,3.4rem) 0 0;
  font-family:"Inter",sans-serif;font-size:.94rem}
.reading .cta-back a{color:var(--accent-ink)}

.reading .foot{border-top:1px solid var(--line);margin-top:clamp(2rem,5vw,3rem);
  padding-block:1.4rem clamp(2.5rem,6vw,4rem);color:var(--muted)}

/* ── рубрика на странице блога ─────────────────────────────────────────
   Заголовок рубрики отделён от карточек тонкой линией: так две рубрики
   на одной странице не сливаются в общий список. */
.rubric + .rubric{margin-top:3rem}
.rubric-head{border-top:2px solid var(--accent);padding-top:1rem;margin-bottom:1.6rem}
.rubric-head h2{margin:0 0 .5rem}
.rubric-head .sub{margin:0}

/* ── Оживление на чистом CSS, без единой строчки скриптов ──────────────
   Поддержка scroll-driven анимаций: Chrome/Edge 115+, Safari 18+, Firefox
   пока за флагом (~84 % браузеров, проверено 30.08.2026). Всё завёрнуто
   в @supports: где не работает, страница просто остаётся статичной —
   ничего не ломается и ничего не пропадает.
   Уважение к prefers-reduced-motion обязательно: часть читателей приходит
   сюда в тяжёлом состоянии, и дёргающаяся страница им не нужна. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Проявляются только декоративные блоки — карточки, плитки, фотографии.
       ТЕКСТ НЕ АНИМИРУЕМ НИКОГДА: человек пришёл читать, а не ждать
       появления абзаца. Проверка 30.08.2026 показала, что при анимации
       абзацев 8 из 12 висели с opacity:0 — контент был в разметке,
       но не на экране: ломались поиск по странице и печать.

       Список расширен 30.08.2026, вопрос Юры: «в блоге плавное появление,
       почему на главной ничего подобного?». На главной оно было, но только
       на карточках — а три секции подряд карточек не содержат вовсе, и почти
       две тысячи пикселей шли без единого движения: «Обо мне» (фотография
       и сертификат), «Вопросы» (аккордеон) и «Написать мне» (контакты).
       Добавлены именно они: фотографии и плитки, ни одного абзаца.
       Анимируем .social li, а не .social a — у ссылки свой transform
       на наведении, и он бы затёрся. По той же причине .paper целиком,
       а не .paper .ph. */
    .cards > *, .quotes li, .rubric,
    .snap, .paper, details.q, .social li{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    @keyframes rise{
      from{opacity:0;transform:translateY(22px)}
      to{opacity:1;transform:none}
    }

    /* Фотография в «Обо мне» — вторая механика поверх первой: блок поднимается,
       а сам снимок в это время садится из лёгкого уменьшения. Уменьшение, а не
       наезд: при scale > 1 картинка вылезла бы за рамку figure, у которой нет
       overflow:hidden, и скруглённые углы поехали бы. */
    .snap img{
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    @keyframes settle{ from{transform:scale(.96)} to{transform:none} }

    /* Линейка под заголовком раздела прочерчивается слева направо. */
    .sec > h2::after{
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
    @keyframes draw{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

    /* Первый экран: декоративный клин медленно уходит вверх при прокрутке.
       Единственная анимация на scroll(), а не view(): псевдоэлемент не имеет
       своего места в потоке, и view() для него смысла не имеет.
       .hero{overflow:hidden} обрезает всё, что вылезет. */
    .hero::before{
      animation: drift linear both;
      animation-timeline: scroll();
      animation-range: 0 80vh;
    }
    @keyframes drift{ to{transform:translateY(-6%) scale(1.06)} }

    /* Полоски прогресса на книжных полосах нет намеренно: в книге
       прогресс не показывают, там просто читают. */
  }
}