/* About Ashline: page content only. The shell, hero frame, panel surfaces and
   controls are shared (site.css, styles.css, redesign.css). Section blocks span
   the shared 1110px column like every other page, stay transparent so the
   backdrop reads through, and carry the Ashline accent rather than FWOB's. */

.about-hero h1 span { color: inherit; }

/* Sections are separated by a rule, as on the Minecraft page, not boxed. */
.ashline-about-page .site-section {
  margin-top: 42px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.ashline-about-page .site-section .section-heading h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); }

/* One column of prose, filling the shared block width. No narrow measure,
   no column splitting. */
.about-prose > p { margin: 0 0 15px; color: var(--muted); font-size: 0.92rem; line-height: 1.66; }
.about-prose > p:last-child { margin-bottom: 0; }

/* History reads as dated columns, like the channel timeline on the FWOB page. */
.about-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.about-timeline article { padding-left: 12px; border-left: 1px solid var(--line); }
.about-timeline strong { color: var(--page-accent-bright); font: 600 0.82rem var(--font-title); }
.about-timeline p { margin: 8px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* Releases: four compact cards per row; an open description becomes a full-width feature panel. */
.latest-release-card.site-card { width: 100%; }
.latest-release-card .release-description-body { margin-top: 22px; }
.latest-release-card .site-actions { margin-top: 22px; }
.release-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 13px; }
.release-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.release-card:has(.release-description[open]) { grid-column: 1 / -1; grid-row: span 2; min-height: 393px; }
.release-heading { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; }
.release-version { margin: 0; color: var(--page-accent-bright); font: 600 1.25rem var(--font-title); }
.release-heading time { color: var(--muted); font: 400 0.9rem var(--font-content); white-space: nowrap; }
.release-summary { height: 2.5rem; margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.release-description { width: 100%; margin-top: 14px; }
.release-card:not(:has(.release-description[open])) .release-description { height: 24px; min-height: 24px; }
.release-card:has(.release-description[open]) .release-description { flex: 1; }
.release-description summary { width: fit-content; color: var(--text); cursor: pointer; font: 600 0.76rem var(--font-link); letter-spacing: 0.04em; text-transform: uppercase; }
.release-description summary::marker { color: inherit; }
.release-description summary:hover { color: var(--page-accent-bright); }
.release-description summary:focus-visible { border-radius: 3px; outline: 2px solid var(--page-accent-bright); outline-offset: 4px; }
.release-description-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.release-description-body p { width: 100%; margin: 0 0 14px; color: var(--muted); font-size: 0.92rem; line-height: 1.66; }
.release-description-body p:last-child { margin-bottom: 0; }
.release-card .site-actions { margin-top: auto; padding-top: 18px; }

@media (max-width: 800px) {
  .about-timeline { grid-template-columns: 1fr; gap: 18px; }
  .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-card:has(.release-description[open]) { grid-column: 1 / -1; min-height: 393px; }
}

@media (max-width: 520px) {
  .release-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .release-card:has(.release-description[open]) { grid-column: auto; grid-row: auto; min-height: 320px; }
  .release-summary { height: auto; min-height: 0; }
}