/* Themes overview and the three theme pages.
   Also loaded by /documentaries/, /for-companies/, /contact/ and 404
   for the small layout helpers at the end. */

/* The project as one line under the themes (Nachtrag 6, N3) */
.pline{padding-block:28px}
.pline p{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:0;padding-block:18px;border-block:1px solid var(--line-2)}
.pline .mono{color:var(--text-dim)}

/* artist cards */
.acards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:40px 24px}
.acard{display:grid;gap:8px;align-content:start;text-decoration:none}
.acard img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--ink-2);margin-bottom:6px;transition:filter .3s ease}
.acard h3{font-size:clamp(20px,1.8vw,26px);font-weight:800;font-stretch:112%;line-height:1.05}
.acard p{color:var(--text-dim);font-size:16px;line-height:1.5}
.acard:hover h3,.acard:focus-visible h3{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.15em}
@media (max-width:520px){.acards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}.acard p{font-size:15px}}

/* films on theme pages and /documentaries/ */
.tfilms{display:grid;gap:48px 32px;max-width:960px}
.tfilms.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
@media (max-width:820px){.tfilms.two{grid-template-columns:1fr}}

/* concept rows: theme label and audience */
.rows .t-world,.rows .t-identity,.rows .t-learning{margin-top:10px}
.rows .mono.t-world{color:var(--blue-on-ink)}
.rows .mono.t-identity{color:var(--red-on-ink)}
.rows .mono.t-learning{color:var(--yellow)}
@media (min-width:821px){.rows.crows > li{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.9fr)}}
.rows > li > div > p + p{margin-top:8px}

/* ---------- small helpers for other pages ---------- */
.stack{display:grid;gap:22px;align-content:end}
.co .lede{color:var(--ink)}
.co .contact .card .mono{color:var(--ink)}

/* list of big links (contact, 404) */
.ways{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.ways li{border-bottom:1px solid var(--line-2)}
.ways a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:32px;align-items:baseline;padding-block:26px;text-decoration:none}
.ways b{font-family:var(--display);font-size:clamp(24px,2.6vw,38px);font-weight:800;font-stretch:112%;line-height:1}
.ways span{color:var(--text-dim)}
.ways i{font-style:normal;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.06em;border-bottom:2px solid var(--green);padding-bottom:2px}
.ways a:hover b,.ways a:focus-visible b{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.15em}
@media (max-width:820px){.ways a{grid-template-columns:1fr;gap:8px}.ways i{justify-self:start}}

.addr{font-style:normal;display:grid;gap:2px}
.addr b{font-weight:700}

.nf-h{margin-bottom:18px;font-weight:500}
.scr .sec-head h2{font-size:clamp(38px,5.4vw,80px)}