/* ---------- Text pages (page.html: /about, /privacy, /terms, /press): one white card of plain prose, built from
	homepage/pages/<name>.html by the build ---------- */
.page-sec { padding-top: clamp(30px, 5vh, 64px); }
.page { width: 100%; max-width: 820px; margin: 0 auto; padding: clamp(26px, 4.4vw, 52px) clamp(22px, 5vw, 60px) clamp(30px, 4.4vw, 52px); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.page > * { margin: 0; }
.page > * + * { margin-top: 16px; }
.page h1 { font-weight: var(--h-weight); font-size: calc(var(--h-size) * 1.25); line-height: 1.1; letter-spacing: -.01em; }
.page .page-lead { margin-top: 18px; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.page h2 { margin-top: 34px; font-weight: 850; font-size: 19px; line-height: 1.25; }
.page h2 + * { margin-top: 10px; }
.page p, .page li { font-weight: 500; font-size: 16px; line-height: 1.6; }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: 6px; }
.page .page-note { font-weight: 600; font-size: 13px; color: var(--muted); }
.page a:not(.pill):not(.press-get) { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); text-underline-offset: 3px;
	transition: text-decoration-color .6s var(--ease), color .6s var(--ease); }
@media (hover: hover) { .page a:not(.pill):not(.press-get):hover { text-decoration-color: var(--ink); transition-duration: .35s; } }
.page .pills { justify-content: flex-start; margin-top: 30px; }

/* the About milestones: a year, then its releases */
.page .years { display: grid; grid-template-columns: max-content 1fr; gap: 14px 22px; margin-top: 26px; padding: 0; list-style: none; }
.years > li { display: contents; }
.years .year { font-weight: 900; font-size: 17px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.years .year-items { display: grid; gap: 4px; }
.years .year-item { font-weight: 650; font-size: 16px; line-height: 1.6; }
.years .year-item b { font-weight: 600; color: var(--muted); white-space: nowrap; }

/* the press kit: logo tiles with downloads, key art, facts */
.press-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.press-logo { display: grid; grid-template-rows: 150px auto 1fr; gap: 10px; min-width: 0; padding: 12px; border-radius: 22px; background: var(--paper); }
.press-logo .press-gets { align-self: end; }
.press-logo-art { display: grid; place-items: center; border-radius: 14px; background: #fff; }
.press-logo-art.dark { background: #15151a; }
.press-logo-art img { max-width: 78%; max-height: 104px; width: auto; height: auto; }
.press-logo-name { font-weight: 800; font-size: 14px; }
.press-gets { display: flex; flex-wrap: wrap; gap: 6px; }
.press-get { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 750; font-size: 13px; text-decoration: none; box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent;
	transition: translate .6s var(--ease), box-shadow .6s var(--ease), scale .6s var(--ease), background-color .6s var(--ease), color .6s var(--ease); }
@media (hover: hover) { .press-get:hover { translate: 0 -2px; box-shadow: var(--shadow-md); background: var(--ink); color: var(--paper); transition-duration: .35s; } }
.press-get:active { scale: .95; transition-duration: .35s, .35s, .4s, .35s, .35s; }
.page .press-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 0; list-style: none; }
.page .press-art li { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; }
.press-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--soft); }
.press-art-name { display: flex; justify-content: space-between; gap: 8px; font-weight: 750; font-size: 14px; }
.press-art-name b { font-weight: 600; color: var(--muted); white-space: nowrap; }

@media (max-width: 700px) {
	.press-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.press-logo { grid-template-rows: 110px auto 1fr; }
	.page .press-art { grid-template-columns: minmax(0, 1fr); }
}