/* Medeo Serif (DNF Studio, OFL 1.1, assets/fonts/medeo-serif/OFL.txt) — основной текст рассказов.
   Подмножества по алфавитам: браузер скачивает только нужные. */
@font-face {
  font-family: "Medeo Serif";
  src: url("fonts/medeo-serif/MedeoSerif-Regular.symbols.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D8-02D9, U+02DB, U+20C5, U+2190, U+2192, U+21E7, U+222B, U+25B2, U+F8FF;
}
@font-face {
  font-family: "Medeo Serif";
  src: url("fonts/medeo-serif/MedeoSerif-Regular.cyrillic-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-0304, U+0306-030D, U+0312, U+031B, U+0323, U+0326-0329, U+0330-0331, U+0335-0337, U+0460-048F, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04D7, U+04DA-04E7, U+04EA-052F, U+1C80-1C8A, U+1DC4-1DC7, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Medeo Serif";
  src: url("fonts/medeo-serif/MedeoSerif-Regular.cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-0304, U+0306-030D, U+0312, U+031B, U+0323, U+0326-0329, U+0330-0331, U+0335-0337, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+1DC4-1DC7, U+2116;
}
@font-face {
  font-family: "Medeo Serif";
  src: url("fonts/medeo-serif/MedeoSerif-Regular.latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-0304, U+0306-030D, U+0312, U+031B, U+0323, U+0326-0329, U+0330-0331, U+0335-0337, U+1D00-1DBF, U+1DC4-1DC7, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Medeo Serif";
  src: url("fonts/medeo-serif/MedeoSerif-Regular.latin.woff2") format("woff2");
  font-weight: 400;
  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+0300-0304, U+0306-030D, U+0312, U+031B, U+0323, U+0326-0329, U+0330-0331, U+0335-0337, U+1DC4-1DC7, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lebowski";
  src: url("fonts/lebowski-regular.woff2") format("woff2"),
       url("fonts/lebowski-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --paper: #f0f0ef;
  --ink: #0d0d0d;
  --mute: #858585;
  --line: #d8d8d6;
  --accent: #e100c3;
  --placeholder: #d4d4d2;
  --red: #ff3d1f;
  color-scheme: light;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Lebowski", "Geist", Georgia, serif;
  --gutter: clamp(16px, 3vw, 40px);
  --scale: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121212;
    --ink: #e6e6e4;
    --mute: #7d7d7b;
    --line: #2a2a2a;
    --accent: #ff4fe3;
    --placeholder: #2a2a2a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121212;
  --ink: #e6e6e4;
  --mute: #7d7d7b;
  --line: #2a2a2a;
  --accent: #ff4fe3;
  --placeholder: #2a2a2a;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.35 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.mute { color: var(--mute); }

/* ---------- home ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 16px var(--gutter) 96px;
  text-align: center;
}
.caps {
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  max-width: 30em;
}
.portrait {
  width: clamp(160px, 18vw, 230px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--placeholder);
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
}
.hero .scroll { border-bottom: 1px solid currentColor; }
.hero .scroll:hover { color: var(--accent); }

.index { padding: 0 var(--gutter) 96px; }
.index-head, .row-main {
  display: grid;
  grid-template-columns: 1fr 3.2em 2fr auto;
  gap: var(--gutter);
  align-items: baseline;
  justify-items: start;
}
.index-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  color: var(--mute);
}
.row { border-bottom: 1px solid var(--line); }
.row-main {
  width: 100%;
  text-align: left;
  padding: 14px 0 13px;
}
.row .tag { font: 400 15px/1.2 var(--sans); color: var(--mute); }
.row .title { font: 400 clamp(26px, 2.8vw, 36px)/1.05 var(--display); }
.row .num { font: 400 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.row .time { font: 400 15px/1.2 var(--sans); color: var(--mute); justify-self: end; white-space: nowrap; }
.row-main:hover .title, .row-main:hover .num, .row.open .title, .row.open .num { color: var(--accent); }

.row-more {
  display: grid;
  grid-template-columns: 1fr 3.2em 2fr auto;
  gap: var(--gutter);
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.7,.2,1);
}
.row.open .row-more { max-height: 420px; }
.row-more p {
  grid-column: 3;
  font: 400 15px/1.55 var(--sans);
  max-width: 36em;
  padding: 2px 0 14px;
}
.row-more .read {
  grid-column: 3;
  justify-self: start;
  margin-bottom: 22px;
  border-bottom: 1px solid currentColor;
}
.row-more .read:hover { color: var(--accent); }


/* ---------- reader ---------- */
.progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0;
  background: var(--ink); z-index: 10;
  box-shadow: 0 0 10px var(--ink);
  animation: progress-pulse 1.8s ease-in-out infinite;
}
@keyframes progress-pulse { 50% { opacity: 0.4; box-shadow: 0 0 2px var(--ink); } }
@media (prefers-reduced-motion: reduce) { .progress { animation: none; } }
.reader {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--gutter);
  padding: 64px var(--gutter) 96px;
}
/* Колонка с данными рассказа — тем же кеглем, что и текст рассказа. */
.meta { position: sticky; top: 24px; align-self: start; font-size: calc(17px * var(--scale)); line-height: 1.35; }
.meta .num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.meta dl { margin-top: 24px; display: grid; gap: 2px; }
.meta dt { color: var(--mute); margin-top: 10px; }

.text { max-width: 34em; }
/* Заголовок рассказа — тем же набором, что крупный текст на главной. */
.text h1 {
  font: 600 clamp(38px, 8.4vw, 136px)/calc(var(--big-lh, 0.79) * 0.9) var(--sans);
  letter-spacing: -0.055em;
  color: var(--ink);
  margin: 0 calc(-50% - var(--gutter)) 24px 0;
  padding-top: 0.04em;
}
.text .byline { color: var(--mute); margin-bottom: 64px; font-family: var(--sans); letter-spacing: -0.005em; }
.text p {
  font: 400 calc(17px * var(--scale)) / var(--read-lh, 1.65) "Medeo Serif", Georgia, serif;
  letter-spacing: 0.005em; /* было −0.005em от body, +1% */
  hanging-punctuation: first;
  margin-bottom: 0.9em;
}
.text p.short { text-indent: 0; }
.text .end { margin-top: 64px; color: var(--mute); font: 400 15px/1.2 var(--sans); }

.next {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--gutter);
  padding: 22px var(--gutter);
  border-top: 1px solid var(--ink);
}
.next a { grid-column: 2; display: block; }
.next .label { color: var(--mute); display: block; margin-bottom: 6px; }
.next .title { font: 600 clamp(32px, 4.6vw, 76px)/var(--big-lh, 0.79) var(--sans); letter-spacing: -0.055em; display: block; padding-top: 0.04em; }
.next a:hover .title { color: var(--accent); }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .index-head { display: none; }
  .row-main { grid-template-columns: auto 1fr auto; row-gap: 4px; padding: 16px 0 14px; }
  .row .tag { grid-column: 2 / 4; grid-row: 2; font-size: 15px; }
  .row .num { grid-row: 1; }
  .row .time { font-size: 15px; }
  .row-more { grid-template-columns: 1fr; }
  .row-more p, .row-more .read { grid-column: 1; }
  .reader { grid-template-columns: 1fr; padding-top: 16px; }
  .meta { position: static; display: flex; justify-content: space-between; align-items: baseline; font-size: calc(18px * var(--scale)); }
  .meta dl { display: none; }
  .text p { font-size: calc(18px * var(--scale)); }
  .text .byline { margin-bottom: 40px; }
  .text h1 { margin-right: 0; font-size: calc(18px * var(--scale) * 3); line-height: calc(var(--big-lh, 0.79) * 0.99); } /* как цитата; межстрочное +10% */
  .next { grid-template-columns: 1fr; }
  .next a { grid-column: 1; }
}

/* ---------- static pages ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.notfound { min-height: calc(100svh - 120px); display: grid; place-content: center; text-align: center; gap: 24px; padding: 0 var(--gutter); }
.notfound h1 { font: 400 clamp(36px, 5vw, 64px)/1.05 var(--display); }
.notfound a { border-bottom: 1px solid currentColor; justify-self: center; }
.notfound a:hover { color: var(--accent); }
.list { list-style: none; }

/* ---------- stories: one flowing paragraph of titles ---------- */
.toc {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px var(--gutter) 24px; gap: 72px;
}
.toc-list {
  font: 700 calc(clamp(30px, 8.4vw, 120px) * var(--list-size, 1)) / var(--list-lh, 0.9) var(--sans);
  letter-spacing: -0.05em;
  text-align: var(--list-align, center);
  max-width: 15em;
}
.toc-list { color: var(--red); }
.toc-list a:hover { color: var(--ink); }
.toc-num {
  font-size: 0.3em; font-weight: 600; letter-spacing: -0.02em;
  vertical-align: 1.45em; line-height: 0; margin-right: 0.06em;
}
.toc-lead, .toc-list .w { white-space: nowrap; }
.toc-list .ch { display: inline-block; transition: filter .35s ease; }
.toc-list a:hover .ch, .toc-list a:focus-visible .ch { filter: blur(var(--b)); }

/* ---------- home, layout 2: big type ---------- */
/* Вид 2 — по умолчанию; Вид 1 включается в настройках (data-layout="a"). */
.hero-b { padding: 16px var(--gutter) 96px; }
:root:not([data-layout="a"]) .hero { display: none; }
:root[data-layout="a"] .hero-b { display: none; }
.about { font: 500 13px/1.22 var(--sans); letter-spacing: -0.01em; margin-bottom: 10px; }
.hero-b-grid { display: grid; grid-template-columns: minmax(120px, 24%) 1fr; gap: 10px; align-items: start; }
.hero-b img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.08);
}
.big { font: 600 clamp(38px, 8.4vw, 136px)/var(--big-lh, 0.79) var(--sans); letter-spacing: -0.055em; color: var(--red); }
.big > * { display: block; padding-top: 0.02em; }
.big a:hover { color: var(--ink); }

/* Концы каждой строки размыты: скрипт режет строку на буквы,
   и чем дальше буква от середины фразы, тем сильнее её размытие. */
.edge .ch { display: inline-block; white-space: pre; }
.edge-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clock { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .hero-b-grid { grid-template-columns: 1fr; }
  .hero-b img { width: var(--clock-w, 46%); order: 1; }
  .big { font-size: 10.4vw; }
  .about { font-size: 12px; }
}

/* content fills the window height */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* home: all text in red */
.home main, .home .mute { color: var(--red); }
.home .big a:hover, .home .hero .scroll:hover { color: var(--ink); }

/* photo swaps while the pointer moves over it */
.swap { cursor: crosshair; }

/* Круглые кнопки «на главную» и «все рассказы»: сплошной круг цвета текста,
   иконка цвета фона; прижаты к низу экрана по центру, на одной высоте. */
.round-btn {
  position: fixed; left: 50%; bottom: var(--gutter); z-index: 15;
  width: 64px; height: 64px; margin-left: -32px;
  color: var(--ink);
  will-change: transform;
}
.round-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.round-btn:hover, .round-btn:focus-visible { color: var(--red); }
.toc { padding-bottom: 160px; }
.next { padding-bottom: 140px; }
.round-btn-left { left: var(--gutter); margin-left: 0; }

/* Анимированный чёрный шум на фоне (под текстом), едва заметный: одна статичная SVG-текстура 200×200,
   слой просто перескакивает на несколько позиций — это дёшево, без пересчёта фильтра. */
body::before {
  content: ""; position: fixed; inset: -200px; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.1;
  will-change: transform;
  animation: grain 0.6s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-63px, 41px); }
  33%  { transform: translate(37px, -88px); }
  50%  { transform: translate(-112px, -29px); }
  67%  { transform: translate(84px, 73px); }
  83%  { transform: translate(-21px, 117px); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Выделения в тексте рассказа: крупный лид и выносная цитата. */
.text .lead {
  font: 500 calc(26px * var(--scale)) / 1.12 var(--sans);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 1.4em;
}
/* Цитата набрана как заголовок рассказа (и того же цвета), вдвое мельче. */
.text .pull {
  font: 600 calc((clamp(38px, 8.4vw, 136px) - 5px) / 2) / var(--big-lh, 0.79) var(--sans);
  letter-spacing: -0.055em;
  color: var(--ink);
  margin: 0.35em calc(-50% - var(--gutter)) 0.4em -0.3em;
  padding-top: 0.04em;
}
@media (max-width: 760px) {
  .text .lead { font-size: calc(22px * var(--scale)); }
  .text .pull { margin: 0.35em 0 0.4em; font-size: calc(18px * var(--scale) * 3); } /* как на десктопе: ~3× основного текста */
}
/* На странице рассказа весь текст — основного цвета, без серого. */
.read-page .byline, .read-page .meta dt, .read-page .end, .read-page .next .label { color: var(--ink); }

/* Разбивка между частями рассказа: символ по центру колонки. */
.text .sep { text-align: center; font: 400 calc(30px * var(--scale)) / 1 var(--sans); color: var(--ink); margin: 1.4em 0 1.5em; }

/* Блог (заглушка) */
.blog-soon { margin-top: 24px; font-size: calc(17px * var(--scale)); color: var(--ink); }
.hero .scroll + .scroll { margin-top: -16px; }

/* Градиент текста на главной (вид 2): цвет каждой буквы выставляет home-b.js. */
/* При наведении ссылка подсвечивается основным цветом (в тёмной теме — белым). */
.hero-b .big a:hover .gc, .hero-b .big a:hover .ch { color: var(--ink) !important; }

/* Построчное появление на странице «Рассказы» (задержки ставит встроенный скрипт). */
.reveal .toc-list .toc-lead, .reveal .toc-list .w { display: inline-block; }
.reveal .toc-list .toc-lead, .reveal .toc-list .w {
  animation: line-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) backwards;
}
.reveal .round-btn { animation: btn-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) backwards; }
@keyframes line-in { from { opacity: 0; filter: blur(14px); translate: 0 0.25em; } }
@keyframes btn-in  { from { opacity: 0; filter: blur(10px); scale: 0.6; } }