/* © 2026 Dennis Andres */
.chapter { padding-block: clamp(64px, 8vw, 120px); }
.chapter.is-light { color: var(--cc-on-sky); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.chapter-head { position: sticky; top: calc(var(--cc-header) + 32px); display: grid; gap: 14px; }
.chapter-num { color: transparent; font-size: clamp(4.5rem, 3rem + 6vw, 9rem); font-weight: 900; letter-spacing: -.06em; line-height: .8; -webkit-text-stroke: 2px rgba(255, 140, 192, .55); }
.is-light .chapter-num { -webkit-text-stroke-color: rgba(42, 18, 51, .45); }
.chapter-title { font-size: var(--cc-fs-h2); letter-spacing: -.05em; line-height: .95; }
.chapter-note { color: #8fe3f7; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.is-light .chapter-note { color: var(--cc-on-sky); }
.chapter-lead { max-width: 46ch; color: var(--cc-snow-soft); font-size: var(--cc-fs-lead); line-height: 1.6; }
.is-light .chapter-lead { color: var(--cc-on-sky-soft); }
.chapter-art { width: 100%; height: auto; margin-top: 10px; border-radius: var(--cc-r-lg); }
.chapter-label { margin-bottom: 6px; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.chapter-label.is-next { margin-top: clamp(36px, 4vw, 56px); }
.chapter-list { margin: 0; }
.chapter-item { display: grid; grid-template-columns: minmax(130px, 2fr) minmax(0, 5fr); gap: 8px 28px; padding: 20px 0; border-top: 1px solid var(--cc-line); }
.is-light .chapter-item { border-top-color: rgba(42, 18, 51, .16); }
.chapter-item dt { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.chapter-item dd { margin: 0; color: var(--cc-snow-soft); line-height: 1.65; }
.is-light .chapter-item dd { color: var(--cc-on-sky-soft); }
.chapter-next { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.chapter-next li { position: relative; padding-left: 26px; color: var(--cc-snow-soft); line-height: 1.6; }
.chapter-next li::before { content: ""; position: absolute; top: .62em; left: 0; width: 12px; height: 2px; background: var(--cyan); }
.chapter-next strong { color: var(--cc-snow); }
.is-light .chapter-next li { color: var(--cc-on-sky-soft); }
.is-light .chapter-next strong { color: var(--cc-on-sky); }
.is-light .chapter-next li::before { background: var(--cc-on-sky); }

.rows-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rows-head { position: sticky; top: calc(var(--cc-header) + 32px); display: grid; gap: 16px; }
.rows-title { color: var(--cc-on-sky); }
.rows-lead { color: var(--cc-on-sky-soft); }
.rows-list { margin: 0; padding: 0; list-style: none; }
.rows-item { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 4fr); gap: 8px 28px; padding: 26px 0; border-top: 2px solid rgba(42, 18, 51, .18); }
.rows-item:last-child { border-bottom: 2px solid rgba(42, 18, 51, .18); }
.rows-meta { color: var(--cc-on-sky); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.rows-meta.is-num { color: transparent; font-size: 3rem; font-weight: 900; letter-spacing: -.05em; line-height: .9; text-transform: none; -webkit-text-stroke: 1.5px rgba(42, 18, 51, .55); }
.rows-name { color: var(--cc-on-sky); font-size: var(--cc-fs-h3); letter-spacing: -.03em; line-height: 1.15; }
.rows-text { max-width: 60ch; margin-top: 8px; color: var(--cc-on-sky-soft); line-height: 1.65; }
.rows-when { display: block; margin-top: 12px; color: var(--cc-on-sky); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; -webkit-text-stroke: 0; }
.is-numbered .rows-meta.is-num { font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem); }
.rows-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; color: var(--cc-on-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rows-link::after { content: "\2192"; transition: translate var(--cc-dur) var(--cc-ease); }
.rows-link:hover::after { translate: 4px 0; }

.team-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.team-title { color: var(--cc-on-sky); }
.team-lead { color: var(--cc-on-sky-soft); }
.team-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.team-people.is-single { grid-template-columns: minmax(0, 360px); }
.team-person { display: grid; gap: 6px; align-content: start; }
.team-portrait { overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 14px; border-radius: var(--cc-r-lg); background: var(--cc-plum-deep); }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--cc-dur-slow) var(--cc-ease); }
.team-person:hover .team-portrait img { scale: 1.04; }
.team-initials { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 140, 192, .55); background: radial-gradient(circle at 30% 20%, rgba(255, 59, 141, .28), transparent 60%), radial-gradient(circle at 80% 90%, rgba(53, 201, 238, .2), transparent 55%); font-size: clamp(5rem, 3.5rem + 5vw, 9rem); font-weight: 900; letter-spacing: -.06em; }
.team-role { color: var(--cc-on-sky); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.team-name { color: var(--cc-on-sky); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -.04em; line-height: 1.05; }
.team-text { max-width: 42ch; margin-top: 6px; color: var(--cc-on-sky-soft); line-height: 1.65; }

@media (max-width: 960px) {
  .chapter-grid, .rows-grid { grid-template-columns: minmax(0, 1fr); }
  .chapter-head, .rows-head { position: static; }
}
@media (max-width: 560px) {
  .chapter-item { grid-template-columns: minmax(0, 1fr); }
  .rows-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rows-meta.is-num { font-size: 2.25rem; }
  .team-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .team-name { font-size: 1.35rem; }
  .team-text { font-size: .9375rem; }
}