/* Kurvball News: the index and article pages, on one centred reading column under the site's top row. The top row,
   footer, type, buttons and the field's colours come from the site stylesheet (/home.css); this file adds the page head,
   the list, the article, its cover on the field, and the demo invitation. */
.reading { width: min(100%, calc(680px + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.reading main p, .reading main li { text-wrap: pretty; }

/* Page head: the title in the serif, then one line and the RSS link. */
.page-head { padding-block: clamp(48px, 9vw, 120px) clamp(32px, 4vw, 56px); }
.page-head h1, .article-head h1, .article-by { font-family: var(--serif); font-size: clamp(1.75rem, 2.35vw, 2.5rem); font-weight: 400; letter-spacing: -.022em; line-height: 1.16; text-wrap: balance; }
.page-head p { margin-top: .9em; color: var(--body); }
.rss-link, .article-body a, .back-link, .featured-action { color: var(--ink); text-decoration: underline 1px var(--green); text-underline-offset: 4px; transition: color .2s ease; }
.rss-link:hover, .article-body a:hover, .back-link:hover { color: var(--green); }

/* The list: the date in mono, the title, the summary, on hairlines. */
.news-list { border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a, .featured-link { display: grid; gap: 4px; padding-block: 22px; color: inherit; text-decoration: none; }
.news-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.news-title, .featured-title { font-weight: 500; transition: color .2s ease; }
.featured-title { font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.18; }
.news-summary { color: var(--body); }
.news-list a:hover .news-title, .featured-link:hover .featured-title { color: var(--green); }
.featured-action { justify-self: start; margin-top: 8px; font-size: var(--small); }
.news-featured { padding-bottom: clamp(32px, 4vw, 56px); }
.news-featured + .news-page { padding-top: 8px; }
.news-empty { padding-block: 22px; border-block: 1px solid var(--line); }
.news-empty h2 { font: inherit; font-weight: 500; }
.news-empty p { margin-top: .2em; color: var(--body); }

/* An article: the title, who wrote it and when, the lead, the cover on the field, then the body. */
.article-head { padding-block: clamp(48px, 9vw, 120px) clamp(28px, 3vw, 44px); }
.article-by { color: var(--muted); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.article-summary { margin-top: clamp(28px, 3vw, 40px); }
/* A screen on the field: the post's cover and any image in its body, wider than the reading column, the screen rising
   from the field's foot, the caption back on the column's measure. */
.field-figure { position: relative; left: 50%; width: min(100vw - 2 * var(--gutter), 1180px); margin-block: clamp(36px, 4vw, 56px); transform: translateX(-50%); }
.field-box { overflow: hidden; padding: clamp(24px, 5.5%, 72px) clamp(16px, 8%, 110px) 0; border-radius: 16px; background-color: var(--f4); background-image: var(--grain), linear-gradient(to bottom, var(--f0), var(--f1) 26%, var(--f2) 52%, var(--f3) 78%, var(--f4)); }
.field-box img { width: 100%; height: auto; border-radius: clamp(6px, 1vw, 12px) clamp(6px, 1vw, 12px) 0 0; box-shadow: 0 0 0 1px rgba(0, 35, 31, .08), 0 50px 90px -40px rgba(0, 16, 14, .6); }
.field-figure figcaption { width: min(100%, 680px); margin: 12px auto 0; color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; }
.article-cover { margin-top: 0; }
.news-featured .article-cover { margin-top: 8px; }

.article-body > * + * { margin-top: 1em; }
.article-body > .field-figure { margin-block: clamp(36px, 4vw, 56px); }
.article-body h2, .article-body h3 { margin-top: 2em; color: var(--muted); font: inherit; }
.article-body h2 + *, .article-body h3 + * { margin-top: .5em; }
.article-body strong { font-weight: 600; }
.article-body ul, .article-body ol { display: grid; gap: .35em; }
.article-body ul li { position: relative; padding-left: 1.4em; }
.article-body ul li::before { content: ''; position: absolute; left: .25em; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.article-body ol { counter-reset: step; }
.article-body ol li { display: grid; grid-template-columns: 2em minmax(0, 1fr); counter-increment: step; }
.article-body ol li::before { content: counter(step); color: var(--muted); font-variant-numeric: tabular-nums; }
.article-body blockquote { margin-block: 1.6em; padding-left: 20px; border-left: 1px solid var(--green); font-family: var(--serif); font-size: 1.15em; font-style: italic; line-height: 1.45; }
.article-body code { font-family: var(--mono); font-size: .86em; }
.article-body pre { overflow-x: auto; padding: 18px 20px; border-radius: 12px; background: var(--deep); color: var(--light); }
.article-body pre code { font-size: .82em; line-height: 1.6; }
.article-end { margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--small); }
.back-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.back-link svg { color: var(--muted); }

/* The demo invitation that closes the News index; an article ends on the demo form itself. */
.page-cta { padding-top: var(--section); }
.page-cta p { color: var(--body); }
.page-cta-action { margin-top: 1.2em; }