/* Home: the four category cards under the videos, each folding out to its in-depth text. */
/* Six columns: closed cards span three (two per row). When one opens it takes the full width and moves
   below, and the other three close up into a single row of three, so there is never a hole in the grid.
   <details name> keeps it to one open card at a time. */
.explore { list-style: none; margin: 48px auto 0; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; }
.explore > li { grid-column: span 3; display: flex; }
.explore > li > .explore-card { flex: 1; }
.explore:has(> li > [open]) > li { grid-column: span 2; }
.explore:has(> li > [open]) > li:has(> [open]) { grid-column: 1 / -1; order: 1; }   /* (0,3,2) beats the span-2 rule above at (0,2,2) */
.explore-card { position: relative; overflow: hidden; background: var(--mint); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px var(--shadow); transition: box-shadow .15s; }
/* A burnt corner marker, bottom right, in the same tone as the card's ring. */
.explore-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, var(--t) 50%); pointer-events: none; }
.explore > li:nth-child(4n+1) { --t: var(--burnt-1); }
.explore > li:nth-child(4n+2) { --t: var(--burnt-2); }
.explore > li:nth-child(4n+3) { --t: var(--burnt-3); }
.explore > li:nth-child(4n+4) { --t: var(--burnt-4); }
/* Hover: the pills' lift shadow. */
.explore-card:hover { box-shadow: 0 5px 14px var(--shadow-strong); }
.explore-card summary { display: flex; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; border-radius: 12px; }
.explore-card summary::-webkit-details-marker { display: none; }
.explore-card summary:hover .explore-title { color: var(--link); }
.explore-card summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.explore-card .ring { width: 54px; height: 54px; font-size: 23px; }
.explore-head { display: grid; gap: 4px; flex: 1; }
.explore-title { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-alt); }
.explore-text { font-size: 15px; color: var(--muted); line-height: 1.5; }
.explore-card[open] { border-color: var(--line-strong); }
.explore-more { padding: 4px 24px 24px 94px; }
.explore-more h3 { font-size: 21px; line-height: 1.3; margin: 0 0 .7em; font-weight: 600; }
.explore-more h3 span { color: var(--link); }
.explore-more .prose { max-width: 70ch; }
.explore-more .prose strong { font-weight: inherit; color: inherit; }   /* Luke: no emboldening here */
.explore-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
@media (max-width: 900px) { .explore { grid-template-columns: 1fr; max-width: 640px; } .explore > li, .explore:has(> li > [open]) > li, .explore:has(> li > [open]) > li:has(> [open]) { grid-column: auto; order: 0; } }
@media (max-width: 600px) { .explore-more { padding: 0 18px 20px; } .explore-card summary { padding: 16px 18px; gap: 14px; } }