/* ──────────────────────────────────────────────────────────────
   Минималистичный блог. Только чёрное и белое.
   Цвета заданы переменными: смена темы = смена переменных на <html>.
   ────────────────────────────────────────────────────────────── */

:root {
  --bg: #fff;
  --fg: #000;
  --muted: #6b6b6b;
  --line: #e3e3e3;
  --code-bg: #f4f4f4;

  --wrap: 41rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", "Noto Serif", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

@font-face {
  font-family: 'PabloCoScript';
  src: url('../fonts/PabloCoScript-Regular.otf') format('opentype'),
       url('../fonts/PabloCoScript-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html[data-theme="dark"] {
  --bg: #000;
  --fg: #fff;
  --muted: #9b9b9b;
  --line: #2a2a2a;
  --code-bg: #141414;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.9rem;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  z-index: 10;
}
.skip-link:focus {
  top: 1rem;
}

/* ───────── каркас */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main {
  flex: 1;
  padding-block: 3.5rem 5rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
}

.site-title {
  font-weight: 700;
  font-size: 2.0625rem;
  font-family: 'PabloCoScript', sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--fg);
}

.theme-toggle {
  display: grid;
  place-items: center;
  padding: 0.4rem;
  margin: -0.4rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.theme-toggle svg {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-theme="dark"] .theme-toggle svg {
  transform: rotate(180deg);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  padding-block: 2rem 2.5rem;
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2.5rem) 1px no-repeat;
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--fg);
}

/* ───────── главная: поиск, теги, список */

.search input {
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder {
  color: var(--muted);
}
.search input:focus {
  border-bottom-color: var(--fg);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  padding: 0.05rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.tag:hover {
  border-color: var(--fg);
  color: var(--fg);
}
.tag.is-on {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}
.tag sup {
  margin-left: 0.3em;
  font-size: 0.7em;
  opacity: 0.7;
}

.filter-info {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.posts {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.posts li {
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
}
.posts li:last-child {
  border-bottom: 1px solid var(--line);
}
.post-link {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.post-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.meta {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.meta a {
  color: inherit;
  text-decoration: none;
}
.meta a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.empty {
  margin-top: 3rem;
  color: var(--muted);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.pager a {
  text-decoration: none;
}
.pager a:hover {
  text-decoration: underline;
}

/* ───────── статья */

.article h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 6.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.article .meta {
  margin-top: 0;
}

.prose {
  margin-top: 2.75rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.prose > * {
  margin-block: 0 1.4em;
}
.prose > :last-child {
  margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-block: 2.2em 0.7em;
  font-family: var(--sans);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.prose h2 { font-size: 1.65rem; }
.prose h3 { font-size: 1.3rem; }
.prose h4 { font-size: 1.1rem; }

.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.35em;
}

.prose blockquote {
  margin-inline: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--fg);
  font-style: italic;
}
.prose blockquote > :last-child {
  margin-bottom: 0;
}
/* Подпись цитаты («— автор») — последний абзац после основного текста. */
.prose blockquote p + p:last-child {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-style: normal;
}

.prose code {
  padding: 0.12em 0.35em;
  border-radius: 3px;
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 0.86em;
}
.prose pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 0.9rem;
  line-height: 1.6;
  tab-size: 4;
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Разделитель: «разрыв» страницы. Форма — SVG-маска, цвет берётся из темы. */
:root {
  --tear: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 30%22 preserveAspectRatio=%22none%22%3E%3Cpolygon points=%220,3 600,3 600,5.8 596.7,8.1 590.2,10.0 584.9,10.0 576.6,11.7 569.8,5.8 563.1,9.0 557.8,9.3 551.4,10.8 543.6,8.0 535.4,11.1 528.3,7.6 519.8,10.4 512.6,10.0 504.2,10.0 497.9,5.8 488.9,7.3 481.5,8.4 474.7,5.4 465.9,9.8 457.5,5.4 454.3,6.2 447.8,9.7 440.8,11.6 432.5,7.6 428.7,9.0 423.5,6.4 420.1,8.2 415.5,5.4 411.3,11.2 406.6,9.2 398.5,8.9 394.1,5.7 386.8,6.4 382.0,9.1 374.1,6.9 366.9,6.8 358.1,5.5 354.5,8.0 347.8,10.9 339.1,6.6 330.5,10.0 326.4,6.9 318.4,11.1 314.5,6.5 306.3,9.0 300.4,11.4 294.7,7.7 288.1,6.9 281.6,5.9 278.2,7.2 273.2,10.2 268.6,6.7 259.7,5.9 252.8,10.8 247.5,6.6 239.2,7.2 231.4,11.5 226.7,6.7 221.2,6.0 214.3,6.1 207.0,6.5 201.3,8.9 197.2,10.4 193.8,5.9 189.4,6.1 181.8,11.5 176.8,5.9 172.2,10.3 165.4,5.8 160.0,11.6 154.2,11.1 150.0,5.3 141.9,11.4 136.6,10.7 131.2,10.2 127.7,7.1 123.4,7.3 116.1,10.7 107.1,11.7 102.5,8.2 95.5,8.5 88.7,8.6 80.6,8.1 74.8,5.5 70.4,6.5 67.0,8.7 63.9,6.3 57.2,9.5 48.4,11.6 45.2,9.7 37.3,5.9 32.5,5.9 24.7,9.3 18.7,6.5 12.2,8.6 6.4,11.2 0,8.2%22/%3E%3Cpolygon points=%220,23.1 3.2,22.1 9.1,19.8 16.3,21.5 22.9,24.2 27.5,18.4 32.3,22.6 36.5,19.4 44.9,22.5 50.6,24.0 55.5,22.6 59.7,21.1 67.6,24.2 75.9,20.8 82.4,20.3 86.2,21.5 94.2,23.7 101.5,24.4 106.1,19.4 111.8,20.1 116.1,20.9 122.9,21.5 127.8,23.7 136.6,21.2 140.1,18.5 148.3,18.6 155.6,22.0 160.4,23.4 163.6,19.2 169.3,18.5 177.3,19.8 181.1,18.6 187.9,21.2 194.7,22.5 202.5,24.4 209.6,19.6 215.5,19.4 218.5,21.3 225.8,19.4 230.4,20.5 237.6,21.6 244.3,23.1 249.7,23.4 258.1,18.9 266.7,22.9 270.5,21.2 277.2,24.1 282.5,21.9 290.8,23.4 299.4,21.3 306.4,19.6 313.7,23.5 320.5,22.9 324.8,24.1 333.7,24.6 339.9,23.4 344.8,24.1 353.0,20.5 356.5,21.1 362.8,23.2 368.7,18.5 376.6,18.7 384.4,19.4 389.4,23.3 393.2,19.3 399.3,22.9 407.3,22.7 416.0,21.5 424.7,18.9 429.0,21.7 433.8,23.0 440.6,21.6 448.7,21.9 453.6,20.7 461.6,24.1 465.9,23.7 474.7,21.7 481.1,19.6 487.3,21.5 494.0,18.5 502.8,21.6 508.2,23.4 514.6,21.4 521.7,18.7 527.9,20.9 536.7,24.2 541.3,21.3 545.1,21.1 553.0,24.1 558.8,20.3 563.0,22.3 571.5,19.1 579.2,18.4 583.4,19.8 590.5,20.4 595.6,22.3 599.2,23.0 600,21.6 600,27 0,27%22/%3E%3C/svg%3E");
}
.prose hr {
  height: 1.9rem;
  margin-block: 3rem;
  border: 0;
  background: var(--fg);
  -webkit-mask: var(--tear) center / 100% 100% no-repeat;
  mask: var(--tear) center / 100% 100% no-repeat;
}

.prose figure {
  margin-inline: 0;
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
}
.prose figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.875rem;
  text-align: center;
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}

.tags--post {
  margin-top: 3rem;
}

.pager--post {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}
.pager--post a {
  max-width: 48%;
  line-height: 1.4;
}
.pager--post a[rel="prev"] {
  margin-left: auto;
  text-align: right;
}

.notice {
  margin: 0 0 1.75rem;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid var(--fg);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.notice code {
  color: var(--fg);
}

.notfound h1 {
  margin: 0 0 0.5rem;
  font-size: 4rem;
  letter-spacing: -0.04em;
}

@media (max-width: 34rem) {
  main { padding-block: 2.5rem 4rem; }
  .post-link { font-size: 1.3rem; }
  .prose { font-size: 1.125rem; }
}

/* ───────── смена темы */

/* Запасной вариант без View Transitions: плавное перетекание цветов. */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease !important;
}

/* ───────── Волна
   Смена темы идёт через View Transitions. Стандартное перетекание отключаем:
   сверху лежит снимок новой темы, а маска пропускает его только за фронтом
   волны. Маску (несколько радиальных градиентов, пересекающихся друг с другом)
   каждый кадр собирает theme.js и кладёт в --wave-mask: фронт неровный, а
   позади него — затухающие гребни, сквозь которые просвечивает старая тема. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}

html.theme-wave::view-transition-new(root) {
  -webkit-mask-image: var(--wave-mask);
  mask-image: var(--wave-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ───────── теги: раскрывающийся список, если не помещаются в строку */

.tags-box {
  margin-top: 1.4rem;
}
.tags-box > summary {
  display: none; /* без JS и когда всё помещается в строку — просто теги */
  list-style: none;
}
.tags-box > summary::-webkit-details-marker {
  display: none;
}
.tags-box .tags {
  margin-top: 0;
}
.tags-box.is-collapsible > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.tags-box.is-collapsible > summary:hover {
  color: var(--fg);
}
.tags-box.is-collapsible > summary::before {
  content: "";
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.tags-box.is-collapsible[open] > summary::before {
  transform: rotate(45deg);
}
.tags-box__label sup {
  margin-left: 0.25em;
  font-size: 0.7em;
  opacity: 0.7;
}
.tags-box__picked {
  color: var(--fg);
}
.tags-box.is-collapsible[open] > .tags {
  margin-top: 0.6rem;
}

/* ───────── таблицы, заметки, чек-листы, маркер в статьях */

.prose .table-wrap {
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
}
.prose th,
.prose td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th {
  border-bottom: 1.5px solid var(--fg);
  font-weight: 600;
}
.prose td:last-child,
.prose th:last-child {
  padding-right: 0;
}

.prose .callout {
  padding: 1rem 1.25rem;
  border: 1px solid var(--fg);
  border-left-width: 4px;
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.6;
}
.prose .callout > :last-child {
  margin-bottom: 0;
}
.prose .callout p {
  margin-block: 0 0.6em;
}
.prose .callout-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prose mark {
  padding: 0 0.2em;
  background: var(--fg);
  color: var(--bg);
}

.prose ul:has(> li.task) {
  padding-left: 0;
  list-style: none;
}
.prose li.task input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 0.65em 0 0;
  border: 1.5px solid var(--fg);
  border-radius: 3px;
  vertical-align: -0.14em;
  background: transparent;
}
.prose li.task input[type="checkbox"]:checked {
  background: var(--fg);
  box-shadow: inset 0 0 0 2px var(--bg);
}