.rhythm-caption { margin-top: 1.25rem; max-width: 52ch; } .people { display: grid; gap: var(--gap-split); } @media (min-width: 46rem) { .people { grid-template-columns: 1fr 1fr; } } .person { display: grid; gap: 0.35rem; align-content: start; } .avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin-bottom: 1.1rem; } .avatar.is-riff { background: var(--riff); } .avatar.is-ink { background: var(--ink); } .person-role { margin-top: 0.35rem; } .person-bio { margin-top: 0.7rem; max-width: 40ch; font-size: 1rem; } .who { display: grid; gap: var(--gap-split); align-items: start; } .who-yes { font-size: 1.0625rem; } .who-no { display: grid; gap: 0.8rem; align-content: start; border-left: 3px solid var(--sand-line); padding-left: 1.25rem; } .who-no p { max-width: 46ch; font-size: 1rem; } @media (min-width: 52rem) { .who { grid-template-columns: 1fr 1fr; } } .tile-link { text-decoration: none; color: var(--ink); border-top-width: 2px; border-top-color: var(--ink); } .tile-link:hover .arw { transform: translateX(3px); } .tile-go { color: var(--riff); margin-top: 0.35rem; font-size: 0.92rem; } @media (min-width: 60rem) { .kan-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 60rem) { .kan-tiles .tile-link { grid-template-rows: auto 1fr auto; } } .om-facts { max-width: 56rem; } .tenets { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); list-style: none; padding: 0; } .tenets li { display: grid; gap: 0.7rem; align-content: start; border-top: 2px solid currentColor; padding-top: 1.1rem; } .tenets p { opacity: 0.76; max-width: 46ch; font-size: 1rem; line-height: 1.6; } @media (min-width: 52rem) { .tenets { grid-template-columns: repeat(2, 1fr); column-gap: var(--gap-cols); } } .small { display: grid; gap: var(--gap-split); align-items: start; } .small-body { display: grid; gap: 1.1rem; } .small-body p { max-width: 54ch; } .small-aside { border-left: 3px solid var(--riff); padding-left: 1.25rem; display: grid; gap: 0.6rem; align-content: start; } .small-aside p { max-width: 34ch; font-size: 1rem; } @media (min-width: 58rem) { .small { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } .trail { display: grid; gap: var(--gap-cols); margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 46rem) { .trail { grid-template-columns: 1fr 1fr; } } .trail-link { display: grid; gap: 0.45rem; align-content: start; text-decoration: none; color: var(--ink); } .trail-kicker { font-size: 0.82rem; font-weight: 500; letter-spacing: -0.006em; color: var(--riff); } .trail-link .fine { margin-top: 0.15rem; } @media (max-width: 47.99rem) { .person { grid-template-columns: 2.75rem 1fr; column-gap: 0.85rem; } .avatar { width: 2.75rem; height: 2.75rem; font-size: 0.88rem; margin-bottom: 0; grid-row: 1 / span 2; align-self: start; } .person-bio { grid-column: 1 / -1; } .person-role { margin-top: 0; } .tile-go { display: none; } .trail { gap: 0; } .trail-link { background: none; border: 0; border-top: 1px solid var(--sand-line); border-radius: 0; padding: 1.15rem 0; } .trail-link:hover { transform: none; box-shadow: none; } }