/* Dodatki dla stron z artykułami. Reszta stylów jest w style.css. */
.art-hero { display: grid; align-content: center; padding-block: clamp(3rem, 9vh, 5.5rem) clamp(2rem, 5vh, 3rem); }
.art-hero h1 { margin-top: 1.25rem; font-size: clamp(2.25rem, 6.5vw, 4rem); line-height: 1.04; max-width: 20ch; }
.art-hero .lead { max-width: 44rem; }
.art-meta { margin: 1.5rem 0 0; color: var(--muted); font: .875rem/1.5 var(--font-mono); }

.prose h3 { margin: 2rem 0 0; font-size: 1.25rem; line-height: 1.3; }
.prose h3:first-child { margin-top: 0; }
.prose p + h3 { margin-top: 2rem; }
.prose ul { max-width: 65ch; margin: 1.125rem 0 0; padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.panel__head + .prose { margin-top: 2rem; }
.panel__head + .roles, .panel__head + .edu { margin-top: 2rem; }
.prose + .honest, .prose + .path-title { margin-top: 2rem; }

.quote {
  margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0; background: var(--tile);
  font: 650 1.25rem/1.4 var(--font-display); max-width: 40rem;
}

.prompt { margin-top: 1.75rem; }
.prompt h3 { margin: 0; font-size: 1.125rem; }
.prompt p { margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; }
.prompt pre.code { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

.back { margin-top: 1.5rem; }
.back a { color: var(--muted); }

.sites li a { color: var(--text); text-decoration-color: rgba(102, 220, 214, .6); }
.sites li strong { margin-bottom: .25rem; }

/* Układ jak na stronie głównej: ta sama szerokość, w panelu nagłówek po lewej, treść po prawej. */
.art-hero h1 { max-width: 20ch; }
main.art .prose p, main.art .prose li { font-size: 1.0625rem; line-height: 1.7; }
main.art .prose p, main.art .prose ul, main.art .path p { max-width: 70ch; }
main.art .roles { grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  main.art .panel:not(.contact) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0; align-content: start; }
  main.art .panel:not(.contact) > .panel__head { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 6rem; }
  main.art .panel:not(.contact) > :not(.panel__head) { grid-column: 2; margin-top: 1.5rem; }
  main.art .panel:not(.contact) > .panel__head + * { margin-top: 0; }
}
@media (max-width: 61.99rem) {
  main.art .panel__head + * { margin-top: 2rem; }
}
@media (min-width: 62rem) { main.art .panel:not(.contact) h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
.path h3 { margin: 0; font-size: 1.0625rem; line-height: 1.4; }