/* ─────────────────────────────────────────────────────────────
   Organic Journal — оформление

   Гарнитуры: Prata (дидона, заголовки), Literata (тело),
   Golos Text (кикеры, меню, подписи). Все три с кириллицей,
   лежат у нас, а не на чужом домене.
   ───────────────────────────────────────────────────────────── */

:root{
  --paper:#ffffff;
  --wash:#f2edea;
  --ink:#16141a;
  --muted:#6c6572;
  --rule:#e4ddd8;
  --accent:#7c2d42;
  --accent-wash:#f8edf0;

  --serif:'Prata',Georgia,'Times New Roman',serif;
  /* Тело журнала набрано гротеском: у нашей Literata обрезана ось
     оптического размера и нет веса легче 400, поэтому на светлом фоне
     она читается тяжело. Антиква осталась там, где работает лучше
     всего — в заголовках (Prata) и в цитатах (--quote). */
  --text:'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --quote:'Literata',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --logo:'Jost','Century Gothic','Golos Text',sans-serif;

  --wrap:1240px;
  --column:clamp(660px,55vw,790px);
  --gap:clamp(20px,4vw,40px);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141117;
    --wash:#1c1821;
    --ink:#ece5ea;
    --muted:#a096a4;
    --rule:#2f2933;
    --accent:#e6a2b4;
    --accent-wash:#2a1f26;
  }
}
:root[data-theme="dark"]{
  --paper:#141117; --wash:#1c1821; --ink:#ece5ea; --muted:#a096a4;
  --rule:#2f2933; --accent:#e6a2b4; --accent-wash:#2a1f26;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 18px/1.74 var(--text);
  font-synthesis-weight:none;
  /* Без этого macOS рисует веб-шрифт субпиксельным сглаживанием, и текст
     выглядит заметно жирнее, чем системный. Замер снимка: средняя яркость
     штриха 81 против 94 у givecreative; со сглаживанием — 92. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.column{width:min(100%,var(--column));margin-inline:auto}

/* ── служебная строка: рубрика, дата, подписи ───────────────── */
.kicker{
  font:600 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
}
.kicker:hover{text-decoration:underline;text-underline-offset:3px}
.meta{font:400 13px/1.5 var(--sans);color:var(--muted)}

/* ── шапка ─────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:20px 0 18px;
}
/* Логотип — зарегистрированный знак №945537, взятый вектором из исходного
   файла: перерисованный в разметке знак каждый раз выходит чуть другим.
   Ставим маской, а не картинкой: так он берёт цвет темы и в тёмной
   становится светлым, оставаясь одним кешируемым файлом. */
.logo{
  display:block;flex:none;
  width:clamp(112px,15vw,146px);
  aspect-ratio:505/198;
  background:var(--ink);
  -webkit-mask:url(logo.svg) no-repeat left center/contain;
  mask:url(logo.svg) no-repeat left center/contain;
}

.tagline{
  font:400 13px/1.4 var(--sans);color:var(--muted);
  letter-spacing:.02em;max-width:26ch;padding-bottom:3px;
}
@media (max-width:640px){.tagline{display:none}}

.nav{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(14px,2.4vw,30px);
  overflow-x:auto;scrollbar-width:none;
}
.nav ul::-webkit-scrollbar{display:none}
.nav a{
  display:block;padding:13px 0;text-decoration:none;
  font:500 13px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav .current-menu-item>a{border-bottom-color:var(--accent)}

/* ── карточки ленты ────────────────────────────────────────── */
.grid{
  display:grid;gap:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin:0 0 clamp(48px,7vw,80px);
}
.card{display:flex;flex-direction:column;gap:12px}
.card .shot{
  position:relative;overflow:hidden;background:var(--wash);
  aspect-ratio:4/3;
}
.card .shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .shot img{transform:scale(1.03)}
.card h2,.card h3{
  margin:0;font:400 21px/1.28 var(--serif);
  text-wrap:balance;
}
.card h2 a,.card h3 a{text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--accent)}
.card p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}

/* первая статья ленты — во всю ширину, как разворот */
.lead{
  display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:1fr;
  padding:clamp(28px,4vw,48px) 0;
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(36px,5vw,56px);
}
@media (min-width:860px){
  .lead{grid-template-columns:1.35fr 1fr;align-items:center}
}
.lead .shot{aspect-ratio:3/2;overflow:hidden;background:var(--wash)}
.lead .shot img{width:100%;height:100%;object-fit:cover}
.lead h2{
  margin:14px 0 12px;
  font:400 clamp(28px,4.2vw,42px)/1.16 var(--serif);
  text-wrap:balance;
}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{color:var(--accent)}
.lead p{margin:0 0 14px;color:var(--muted);font-size:17px;line-height:1.62}

/* заголовок раздела ленты */
.section-head{
  display:flex;align-items:baseline;gap:14px;
  border-top:2px solid var(--ink);
  padding-top:12px;margin:0 0 clamp(24px,3vw,34px);
}
.section-head h2{
  margin:0;font:600 13px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
}
.section-head a{
  margin-left:auto;font:400 13px/1 var(--sans);color:var(--muted);
  text-decoration:none;
}
.section-head a:hover{color:var(--accent)}

/* ── страница статьи ───────────────────────────────────────── */
.article-head{
  padding:clamp(30px,5vw,56px) 0 0;text-align:left;
  max-width:var(--column);
}
.article-head h1{
  margin-top:14px;
  font:400 clamp(29px,4.2vw,42px)/1.16 var(--serif);
  text-wrap:balance;letter-spacing:-.005em;
}
.deck{
  margin-top:16px;
  font:400 clamp(18px,2.2vw,21px)/1.58 var(--quote);
  color:var(--muted);text-wrap:pretty;
}
.byline{
  margin-top:22px;font:400 13px/1.5 var(--sans);color:var(--muted);
  letter-spacing:.02em;
}
.byline b{font-weight:500;color:var(--ink)}
.cover{margin-top:clamp(26px,4vw,42px);background:var(--wash)}
.cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cover figcaption{
  margin-top:9px;font:400 13px/1.5 var(--sans);color:var(--muted);
}

.entry{margin:clamp(30px,4.4vw,48px) auto clamp(40px,6vw,70px)}

/* Каждый блок статьи — колонка по центру. Ширину и центрирование задаём
   один раз здесь; ниже трогаем только отступы сверху и снизу. Краткая
   запись margin обнуляет боковые auto — и заголовки уезжают вправо
   относительно текста; так и было в первой версии. */
.entry>*{margin-left:auto;margin-right:auto;width:min(100%,var(--column))}
.entry p{margin-top:0;margin-bottom:1.35em}
.entry h2{
  margin-top:1.9em;margin-bottom:.65em;
  font:400 clamp(24px,3.2vw,31px)/1.24 var(--serif);
  text-wrap:balance;
}
.entry h3{
  margin-top:1.6em;margin-bottom:.5em;
  font:600 20px/1.35 var(--sans);letter-spacing:-.01em;
}
.entry a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.entry a:hover{color:var(--accent)}
.entry ul,.entry ol{margin-top:0;margin-bottom:1.35em;padding-left:1.25em}
.entry li{margin-bottom:.5em}
.entry li::marker{color:var(--accent)}
.entry blockquote{
  margin-top:1.7em;margin-bottom:1.7em;padding:2px 0 2px 22px;
  border-left:2px solid var(--accent);
  font:italic 400 20px/1.55 var(--quote);
}
.entry blockquote p:last-child{margin-bottom:0}
.entry figure{margin-top:1.9em;margin-bottom:1.9em}
.entry figure img{width:100%}
.entry figcaption{
  margin-top:9px;font:400 13px/1.5 var(--sans);color:var(--muted);
}
/* картинка шире колонки — журнальный приём для важных кадров */
.entry .wide{width:min(100%,940px)}
.entry hr{
  width:64px;margin:2.4em auto;border:0;border-top:2px solid var(--ink);
}
.entry>.wide{width:min(100%,940px)}
.entry code{
  font:400 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--wash);padding:.1em .35em;border-radius:2px;
}

/* таблицы: строгие линии, без зебры */
.table-scroll{
  width:min(100%,940px);margin:1.9em auto;overflow-x:auto;
}
.entry>.table-scroll{width:min(100%,940px)}
.entry table{
  width:100%;border-collapse:collapse;
  font:400 16px/1.5 var(--sans);
}
.entry th,.entry td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.entry th{
  font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--ink);
}
.entry td+td,.entry th+th{font-variant-numeric:tabular-nums}

/* врезка */
.entry .note{
  margin-top:1.9em;margin-bottom:1.9em;padding:20px 22px;
  background:var(--accent-wash);
  font-size:17px;line-height:1.6;
}
.entry .note p:last-child{margin-bottom:0}

/* ── читайте также ─────────────────────────────────────────── */
.more{border-top:1px solid var(--rule);padding-top:clamp(30px,4vw,44px)}

/* ── подвал ────────────────────────────────────────────────── */
.foot{
  margin-top:clamp(50px,7vw,90px);border-top:1px solid var(--rule);
  background:var(--wash);padding:clamp(34px,5vw,54px) 0;
}
.foot-inner{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.foot h3{
  margin:0 0 12px;font:600 12px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot a{font:400 15px/1.5 var(--sans);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .small{font:400 13px/1.6 var(--sans);color:var(--muted)}

/* ── постраничная навигация, поиск, мелочи ─────────────────── */
.pager{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:0 0 clamp(40px,6vw,70px);
}
.pager .page-numbers{
  display:inline-block;min-width:40px;padding:9px 12px;text-align:center;
  font:500 14px/1 var(--sans);text-decoration:none;
  border:1px solid var(--rule);
}
.pager .current,.pager .page-numbers:hover{
  border-color:var(--ink);background:var(--ink);color:var(--paper);
}
.searchform{display:flex;gap:8px;margin:0 0 34px}
.searchform input[type=search]{
  flex:1;padding:11px 13px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);
  font:400 16px/1.3 var(--sans);
}
.searchform button{
  padding:11px 18px;border:1px solid var(--ink);background:var(--ink);
  color:var(--paper);font:500 13px/1.3 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.page-head{
  padding:clamp(34px,5vw,60px) 0 clamp(24px,3vw,36px);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(30px,4vw,46px);text-align:left;
}
.page-head h1{
  margin:0;font:400 clamp(28px,4.4vw,42px)/1.16 var(--serif);
  text-wrap:balance;
}
.page-head p{margin:12px 0 0;color:var(--muted);font-size:17px}

.skip{
  position:absolute;left:-9999px;top:0;padding:10px 16px;
  background:var(--ink);color:var(--paper);font:500 14px var(--sans);z-index:99;
}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Служебная страница — одна колонка: заголовок и текст по одному левому
   краю. Раньше заголовок стоял по краю широкой сетки, а текст центровался
   внутри неё, и абзацы выглядели сдвинутыми вправо. */
.page-wrap{width:min(100% - 2*var(--gap),var(--column))}
.page-wrap .entry>*{margin-left:0;margin-right:0;width:100%}