/* Classics pages (/classics/ and /classics/<slug>/). Loaded only there,
   on top of site.css: same palette, type and document layout (.doc). No
   boxed cards: typographic items with a hairline, like the home page's
   Classics list. The drawings are the app's own (assets/classics/*.svg). */

.cl-doc { max-width: 820px; }
.cl-doc h1 { margin: 10px 0 0; }
.cl-doc .lead { margin-bottom: 4px; }

.cl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--outline); }
.cl-crumbs a { color: var(--on-surface-variant); text-decoration: none; }
.cl-crumbs a:hover { color: var(--on-surface); text-decoration: underline; }

.cl-next { margin: 10px 0 0; font-size: 17px; color: var(--on-surface); }
.cl-next > span:first-child { margin-right: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--glow); }
.cl-off { font-family: var(--mono); font-size: 12.5px; color: var(--outline); }

.cl-figure { margin: 26px 0 8px; }
.cl-art { width: 100%; height: auto; aspect-ratio: 361 / 132; border-radius: var(--radius); }

.cl-entry { margin-top: 30px; padding-top: 6px; }
.cl-entry + .cl-entry { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cl-entry h2 { margin-top: 18px; }
.cl-entry h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.005em; }
.cl-qual { margin: -4px 0 12px; font-family: var(--mono); font-size: 12.5px; color: var(--outline); }
.cl-coords { font-family: var(--mono); font-size: 13.5px; color: var(--on-surface); }
.cl-entry p { overflow-wrap: anywhere; }

.cd-tz { margin: 0 0 6px; font-size: 14px; color: var(--outline) !important; }
.cd-list { list-style: none; margin: 0; padding: 0 !important; }
.cd-list .cd-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
  margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cd-list .cd-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cd-row p { margin: 0; }
.cd-day { font-weight: 600; color: var(--on-surface) !important; }
.cd-time { text-align: right; font-family: var(--mono); font-size: 16px; color: var(--glow) !important; white-space: nowrap; }
.cd-time span { font-size: 12px; color: var(--outline); }
.cd-meta, .cd-row .cd-note { grid-column: 1 / -1; font-size: 14px; }
.cd-note { font-size: 14.5px; }
.cd-more { margin-top: 10px; font-size: 14px; color: var(--outline) !important; }

.cl-computed { margin-top: 40px; font-size: 13px; color: var(--outline) !important; }

.cl-cta { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cl-cta h2 { margin-top: 0; }
.cl-cta p { margin: 0 0 18px; }

.cl-more { margin-top: 48px; }
.cl-group { margin-top: 34px; }

/* Index / "more classics": the drawing, then name, place and next date. */
.cx-list {
  list-style: none; margin: 14px 0 0; padding: 0 !important;
  display: grid; grid-template-columns: 1fr; gap: 26px 22px;
}
@media (min-width: 560px) { .cx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cx-list li { margin: 0 !important; min-width: 0; }
.cx-list a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.cx-art { width: 100%; height: auto; aspect-ratio: 361 / 132; border-radius: 12px; margin-bottom: 8px; }
.cx-name { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--on-surface); }
.cx-list a:hover .cx-name { text-decoration: underline; text-underline-offset: 3px; }
.cx-place { font-size: 14px; color: var(--on-surface-variant); }
.cx-when { font-family: var(--mono); font-size: 12.5px; color: var(--glow); }

@media (max-width: 480px) {
  .cd-list .cd-row { grid-template-columns: 1fr; }
  .cd-time { text-align: left; }
}
.cl-badge { margin: 22px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary) !important; }
.cl-badge + h1 { margin-top: 6px; }