/* Спільне для варіантів сторінки статті: текст, зміст, таблиця, FAQ, автор, пов'язані, попередня/наступна. Токени — ../base.css */
html { scroll-padding-top: 6rem; } /* відступ для якорів — лише тут, щоб не додавався до scroll-margin заголовків */
.skip { position: fixed; left: 0.75rem; top: -3.75rem; z-index: 50; padding: 0.625rem 1rem; border-radius: 0.625rem; background: var(--ink); color: var(--bg); text-decoration: none; }
.skip:focus { top: 0.75rem; }
.post { --measure: 42.5rem; --read: 0; }
.chip--lg { font-size: 0.875rem; }
.crumbs { margin-bottom: 1.125rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.125rem; font-size: 0.9375rem; color: var(--muted); }
.meta b { color: var(--ink); font-weight: 400; }
.ava { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 900 0.9375rem/1 var(--display); letter-spacing: -.03em; }
.meta__who { display: inline-flex; align-items: center; gap: 0.625rem; }
.cover { margin: 0; }
.cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.375rem; background: var(--paper); }
.cover figcaption { margin-top: 0.625rem; font-size: 0.875rem; color: var(--muted); }

/* Текст статті */
.prose { max-width: var(--measure); min-width: 0; font-size: 1.125rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose > p + p, .prose > p + ul, .prose > p + ol, .prose > ul + p, .prose > ol + p { margin-top: 1.45em; } /* абзаци дихають */
.prose p { margin: 0; }
.prose h2 { margin: 2.8em 0 .7em; font: 800 clamp(1.625rem, 2.6vw, 2.125rem)/1.12 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.prose h3 { margin: 2em 0 .45em; font: 700 1.3125rem/1.3 var(--display); letter-spacing: -.015em; }
.prose a:not(.btn) { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.1875rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: .9em; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose strong { font-weight: 600; }
.prose .lead { font-size: 1.3125rem; line-height: 1.55; color: var(--ink); }
.mats { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; vertical-align: middle; }
.mats li { padding: 2px 0.5625rem; border-radius: 62.4375rem; border: 1.5px solid var(--m); color: var(--m); font: 600 0.75rem/1.6 var(--display); letter-spacing: .04em; }
.m-tpu { --m: #8A5CF6; } .m-petg { --m: var(--r-materials); } .m-pla { --m: var(--accent); }
/* позначки матеріалів — не звичайний список статті */
.prose .mats { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; padding: 0; }
.prose .mats li::marker { content: none; }

/* Таблиця матеріалів: на вузьких екранах гортається сама, сторінка — ні */
.table { overflow-x: auto; margin-top: 1.2em; border-radius: 1rem; border: 1px solid var(--line); }
.table table { width: 100%; min-width: 32.5rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.table caption { padding: 0.875rem 1rem 0; text-align: left; font-size: 0.8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.table th, .table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { border-top: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table tbody th { font: 700 1.125rem/1.2 var(--display); white-space: nowrap; }

/* Зміст */
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: t; }
.toc a { display: block; padding: 0.4375rem 0; color: var(--muted); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; transition: color .2s; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--accent); }
.toc summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); list-style: none; }
.toc summary::-webkit-details-marker { display: none; }

/* Коротко */
.tldr { padding: 1.375rem 1.5rem; border-radius: 1.25rem; background: var(--paper); }
.tldr h2 { margin: 0 0 0.625rem; font: 900 0.875rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tldr ul { margin: 0; padding-left: 1.2em; display: grid; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.6; }

/* FAQ */
.faq { margin-top: 3em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1.5px solid var(--ink); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; font: 600 1.1875rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.625rem; line-height: .9; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.125rem; color: var(--muted); }

/* Автор */
.author { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; align-items: center; margin-top: 3em; padding: 1.375rem; border-radius: 1.25rem; background: var(--paper); }
.author .ava { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; grid-row: span 2; }
.author b { font: 600 1.1875rem/1.2 var(--display); }
.prose .author b a { color: inherit; text-decoration: none; }
.prose .author b a:hover, .prose .author b a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.author p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

/* Заклик посеред/наприкінці статті */
.order { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.875rem 1.375rem; margin-top: 1.6em; padding: 1.375rem 1.5rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.order p { margin: 0; max-width: 32em; font-size: 1.0625rem; }
.order .btns { display: flex; flex-wrap: wrap; gap: 0.625rem; }

/* Пов'язані статті й попередня/наступна */
.related { margin-top: clamp(3.75rem, 8vw, 6.25rem); }
.related h2 { margin: 0 0 1.125rem; font: 900 clamp(1.625rem, 2.8vw, 2.375rem)/1 var(--display); letter-spacing: -.035em; }
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rel a { display: grid; gap: 0.625rem; height: 100%; text-decoration: none; }
.rel img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1rem; background: var(--paper); }
.rel h3 { margin: 0; font: 600 1.1875rem/1.3 var(--display); letter-spacing: -.015em; transition: color .2s; }
.rel a:hover h3 { color: var(--accent); }
.rel small { font-size: 0.875rem; color: var(--muted); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.pn a { display: grid; gap: 0.375rem; padding: 1.125rem 1.25rem; border-radius: 1.125rem; border: 1.5px solid var(--line); text-decoration: none; transition: border-color .2s; }
.pn a:hover { border-color: var(--accent); }
.pn small { font-size: 0.8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pn b { font: 600 1.0625rem/1.35 var(--display); }
.pn a:last-child { text-align: right; }

/* Прогрес читання — тонка смужка під шапкою (усі варіанти) */
.readbar { position: fixed; left: 0; top: 4.5rem; z-index: 9; height: 0.1875rem; width: calc(var(--read) * 100%); background: var(--accent); pointer-events: none; }

@media (max-width: 900px) {
  .prose { font-size: 1.0625rem; }
  .prose .lead { font-size: 1.1875rem; }
  .rel { grid-template-columns: 1fr; }
  .rel a { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 0.25rem 0.875rem; }
  .rel img { grid-row: span 2; }
  .pn { grid-template-columns: 1fr; }
  .pn a:last-child { text-align: left; }
}