/* Methode en de vijf funderingen: dezelfde taal, plus de deuren met een regel en het blok "wat het traject beoogt". */
.doors a .two { display: grid; gap: 4px; }
.doors a .two small { font-family: var(--sans); font-size: var(--t4); color: var(--muted); }
.outcomes.dark { background: var(--bg); color: var(--off); border-top: 1px solid var(--line); }
.outcomes.dark .label { color: var(--accent-label); }
.outcomes.dark .lede { color: var(--muted); }
.outcomes.dark .list li { border-color: var(--line); }
.outcomes.dark .list b { color: var(--off); font-size: var(--fs-item); }
.outcomes.dark .list span { color: var(--muted); }
.gets .lede { color: var(--muted); margin-bottom: var(--s3); }
.gets.light .lede { color: var(--light-muted); }
.story.cream { background: var(--light-bg); color: var(--light-ink); padding-top: var(--s6); }
.story.cream .label { color: var(--gold-ink); }
.story.cream .chapter p { color: var(--light-muted); }
.statement .quote { display: block; margin-top: var(--s3); font-size: var(--t4); color: var(--light-muted); }
.statement.dark .quote { color: var(--muted); }

/* Segment per onderwerp: beeld links, tekst rechts, met een deur (overzicht van de funderingen, de blokken op /methode) */
.seg { padding: var(--s6) 0; }
.seg .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
.seg.flip .wrap > .media { order: 2; }
.seg .media { border-radius: var(--s3); overflow: hidden; aspect-ratio: 4 / 5; max-height: 460px; background: #0a2a0a; }
.seg .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg .media.wide { aspect-ratio: 4 / 3; }
.seg p.lede { margin-bottom: var(--s3); max-width: 48ch; }
.seg .textlink { margin-top: var(--s1); }
@media (max-width: 820px) { .seg { padding: var(--s5) 0; } .seg .wrap { grid-template-columns: 1fr; gap: var(--s3); } .seg.flip .wrap > .media { order: 0; } .seg .media { aspect-ratio: 4 / 3; max-height: none; } }

/* De foto's op het overzicht van de vijf funderingen (admin, 12 oktober nacht; Ryan: "de spacing van die foto klopt niet"). Elke foto
   vult zijn kolom in dezelfde staande maat, links of rechts, en de tekst staat er midden naast. Voorheen was de foto smaller dan
   zijn kolom en stond hij bij de omgekeerde blokken los in een bredere kolom. */
.seg .wrap { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
.seg.flip .wrap { grid-template-columns: 7fr 5fr; }
.seg .media, .seg .media.wide { aspect-ratio: 4 / 5; max-height: none; width: 100%; }
.seg h2 { margin-bottom: var(--s2); }
@media (max-width: 820px) { .seg .wrap, .seg.flip .wrap { grid-template-columns: 1fr; } .seg .media, .seg .media.wide { aspect-ratio: 4 / 3; } }

/* Het stappenplan op /methode: genummerde stappen die openklappen, één tegelijk, in het tempo van het menupaneel */
.plan { padding: var(--s6) 0; }
.plan .head { max-width: 720px; margin-bottom: var(--s4); }
.plan .lede { max-width: 60ch; }
.plan-list { border-top: 1px solid var(--line-2); }
.plan-item { border-bottom: 1px solid var(--line-2); }
.plan-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 20px; column-gap: var(--s2); align-items: start; padding: 20px 0; }
.plan-item summary::-webkit-details-marker { display: none; }
.plan-item .n { font-size: var(--t4); font-weight: 600; letter-spacing: 0.08em; color: var(--accent-label); padding-top: 7px; font-variant-numeric: tabular-nums; }
.plan-item .t { font-family: var(--serif); font-size: 24px; line-height: 1.25; color: rgb(var(--off-rgb) / 0.78); transition: color .2s; }
.plan-item[open] .t, .plan-item summary:hover .t { color: var(--off); }
.plan-item summary svg { width: 20px; height: 20px; margin-top: 6px; color: var(--accent-text); transition: transform .3s var(--ease); }
.plan-item[open] summary svg { transform: rotate(45deg); }
.plan-body { padding: 0 0 var(--s3) calc(40px + var(--s2)); }
.plan-body p { color: var(--muted); max-width: 60ch; }
html.js .plan-item[open] .plan-body { animation: tabin .35s var(--ease); }
@media (max-width: 820px) { .plan { padding: var(--s5) 0; } .plan-item summary { grid-template-columns: 32px 1fr 20px; padding: var(--s2) 0; } .plan-item .t { font-size: 20px; } .plan-body { padding-left: 0; } }
/* Conceptpagina drie niveaus: drie vlakken onder elkaar, rustig */
.levels { display: grid; gap: var(--island-gap); }
.level .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.level .n { display: block; font-family: var(--serif); font-size: var(--t1); line-height: 1; color: var(--accent-text); margin-bottom: var(--s2); }
.level h2 { margin-bottom: var(--s2); }
.level .lede { margin-bottom: var(--s3); max-width: 52ch; }
.level .list { margin: 0; }
@media (max-width: 820px) { .level .wrap { grid-template-columns: 1fr; gap: var(--s3); } }
.level { padding: var(--s6) 0; }
.level .list li { grid-template-columns: 1fr; }
.island.light .list li { border-color: var(--light-line); }
.island.light .list b { color: var(--light-ink); }
.island.light .list span { color: var(--light-muted); }
@media (max-width: 820px) { .level { padding: var(--s5) 0; } }
.level .list li:last-child { padding-bottom: 0; border-bottom: 0; }