/* Articles index + article, long-form prose (also used by the legal pages) — DESIGN.md §4.5 */

.featured { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.featured .acard__media { aspect-ratio: 3 / 2; }
.featured h2 { font-size: var(--step-3); font-weight: 800; font-stretch: 80%; line-height: 1.02; }
@media (min-width: 760px) {
  .featured .acard__media { aspect-ratio: 21 / 9; }
}
.article-grid { display: grid; gap: var(--s-7) var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pager { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--hairline); }
.pager a:only-child[rel="next"] { margin-left: auto; }

/* Article */
.article { padding-bottom: var(--section); }
.article__head { max-width: var(--measure); margin-inline: auto; display: grid; gap: var(--s-4); padding-block: var(--s-3) var(--s-6); }
.article__head h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 75%; line-height: 0.98; letter-spacing: -0.01em; }
.article__lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.article__cover { margin: 0 calc(var(--gutter) * -1) var(--s-7); }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 60%; background: var(--paper-sunk); }
.article__cover figcaption { padding: var(--s-2) var(--gutter) 0; font: 500 0.6875rem/1.4 var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
@media (min-width: 760px) {
  .article__cover { max-width: 1100px; margin-inline: auto; }
  .article__cover img { border-radius: var(--r-2); }
  .article__cover figcaption { padding-inline: 0; }
}
.article__body { max-width: var(--measure); margin-inline: auto; }
.article__end { max-width: var(--measure); margin: var(--s-7) auto 0; display: grid; gap: var(--s-4); }
.article__byline { font-size: var(--step--1); color: var(--ink-3); }
.more { border-top: var(--hairline); padding-block: var(--section); }
.articles-page { padding-bottom: var(--section); }

/* Prose: Action Text bodies and legal pages */
.prose { font-size: var(--step-0); line-height: 1.7; color: var(--ink); }
.prose > * + *, .prose .trix-content > * + * { margin-top: 1.1em; }
.prose :is(h2) { font: 700 var(--step-3)/1.05 var(--font-display); font-stretch: 85%; margin-top: 2.2em; }
.prose :is(h3) { font: 700 var(--step-2)/1.15 var(--font-display); font-stretch: 85%; margin-top: 1.8em; }
.prose :is(h2, h3) + *, .prose .trix-content > :is(h2, h3) + * { margin-top: 0.6em; }
.prose h1 { font: 700 var(--step-3)/1.05 var(--font-display); font-stretch: 85%; margin-top: 2em; } /* Trix "Heading" = h1 inside body */
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--ink-3); }
.prose a:not(.btn) { font-weight: 600; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .prose a:not(.btn):hover { color: var(--accent-hover); } }
.prose blockquote { border-left: 4px solid var(--accent); padding-left: var(--s-4); font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.prose img { border-radius: var(--r-2); height: auto; }
.prose figure, .prose action-text-attachment { display: block; }
.prose figcaption { font: 500 0.75rem/1.4 var(--font-mono); color: var(--ink-3); margin-top: var(--s-2); }
.prose pre { overflow-x: auto; font: 500 0.875rem/1.5 var(--font-mono); background: var(--paper-sunk); padding: var(--s-4); border-radius: var(--r-1); }
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.prose th { font: 500 0.75rem/1.3 var(--font-mono); text-transform: uppercase; color: var(--ink-3); text-align: left; }
.prose th, .prose td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--hairline); vertical-align: top; }
.prose .mention { margin-block: 1.8em; }
.prose mark { background: var(--accent-soft); padding-inline: 2px; border-radius: 2px; font-family: var(--font-mono); font-size: 0.9em; }
.prose .attachment-gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Legal / info pages */
.doc { padding-bottom: var(--section); }
.doc__body { max-width: var(--measure); }
.doc__meta { font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--ink-3); }
.doc__toc { margin-bottom: var(--s-6); padding: var(--s-4) 0; border-block: var(--hairline); }
.doc__toc ol { margin: var(--s-2) 0 0; padding-left: 1.2em; columns: 1; }
.doc__toc li { padding-block: 2px; }
@media (min-width: 760px) { .doc__toc ol { columns: 2; column-gap: var(--s-7); } }
.prose .callout { padding: var(--s-4); background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-2); }
.prose .callout > * + * { margin-top: 0.6em; }
.prose dl.cookies { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-5); }
.how-page .steps-plain { list-style: none; padding: 0; counter-reset: s; display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.how-page .steps-plain li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1.5px solid var(--ink); }
.how-page .steps-plain li::before { content: "0" counter(s); font: 500 var(--step--1)/1.6 var(--font-mono); color: var(--ink-3); }
.how-page .steps-plain h2 { font: 700 var(--step-2)/1.15 var(--font-display); font-stretch: 85%; margin: 0; }
.how-page .steps-plain p { color: var(--ink-2); margin-top: var(--s-2); }
.faq { margin-top: var(--s-8); display: grid; gap: 0; border-top: var(--hairline); }
.faq details { border-bottom: var(--hairline); }
.faq summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 var(--step-1)/1 var(--font-mono); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s-4); color: var(--ink-2); max-width: var(--measure); }
.how-page .prose { margin-top: var(--s-8); }
.how-cta { margin-top: var(--s-7); }
.doc .prose ol[type="a"] { list-style-type: lower-alpha; margin-top: 0.5em; }
.prose > h2, .prose .trix-content > h2, .prose > h1, .prose .trix-content > h1 { margin-top: 2.2em; }
.prose > h3, .prose .trix-content > h3 { margin-top: 1.8em; }
.prose .trix-content > .mention, .prose > .mention { margin-block: 1.8em; }

/* End-of-article booking path when the article has no linked model */
.try-live { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1.5px solid var(--ink); border-radius: var(--r-2); background: var(--surface); }
.try-live h3 { font-size: var(--step-2); font-weight: 700; font-stretch: 85%; line-height: var(--lh-snug); }
.try-live p { color: var(--ink-2); max-width: 52ch; }
.try-live .finder { max-width: none; }