.about-feature {
max-width: var(--rail-page);
font-family: var(--font-sans);
}
.about-feature__hero {
display: grid;
grid-template-columns: 1fr 1.05fr;
align-items: center;
gap: clamp(24px, 4vw, 64px);
margin-block: var(--space-lg) var(--space-xl);
}
.about-feature__intro {
min-width: 0;
}
.about-feature__intro .dst-overline {
color: var(--color-accent-ink);
margin-bottom: var(--space-md);
}
.about-feature__title {
margin: 0 0 var(--space-lg);
font-family: var(--font-title-serif);
font-size: clamp(1.9rem, 3.5vw, 3.2rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-text);
text-align: start;
}
.about-feature__title span {
display: block;
margin-bottom: var(--space-xs);
font-size: 0.72em;
font-weight: 400;
letter-spacing: 0;
color: var(--color-text-muted);
}
.about-feature__intro .dst-lede {
max-width: 46ch;
margin: 0;
font-size: var(--font-size-base);
line-height: var(--leading-loose);
color: var(--color-text-muted);
}
.about-feature__hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md) var(--space-lg);
margin-top: var(--space-lg);
font-size: var(--font-size-sm);
}
.about-feature__story-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-height: var(--control-h);
border-bottom: none;
color: var(--color-text);
font-weight: 500;
text-decoration: none;
}
.about-feature__story-link:hover {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 4px;
}
.about-feature__hero-image {
width: 100%;
margin: 0;
border-radius: var(--radius-xl);
overflow: clip;
box-shadow: var(--shadow-lg);
}
.about-feature__hero-image img {
width: 100%;
height: 100%;
min-height: 320px;
aspect-ratio: 1.45;
object-fit: cover;
border-radius: inherit;
}
.about-feature__contents {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
padding-block: var(--space-md);
border-block: 1px solid var(--color-border);
margin-bottom: var(--space-xxl);
font-size: var(--font-size-sm);
}
.about-feature__contents > span {
margin-inline-end: auto;
color: var(--color-text-muted);
}
.about-feature__contents a {
display: inline-flex;
align-items: center;
min-height: var(--control-h);
padding: var(--space-xs) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.about-feature__contents a:hover {
background-color: var(--color-surface-hover);
border-color: var(--color-text-muted);
}
.about-feature__section {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--space-xl);
padding-block: var(--space-xl);
scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}
.about-feature__section-heading h2 {
max-width: 14ch;
margin: 0;
font-family: var(--font-title-serif);
font-size: var(--font-size-4xl);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: -0.015em;
text-align: start;
}
.about-feature__section-body {
min-width: 0;
max-width: 72ch;
}
.about-feature .about-feature__section p:not(.about-feature__more) {
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--leading-loose);
text-align: start;
}
.about-feature__verse {
max-width: none;
margin: var(--space-lg) 0;
padding: var(--space-lg) clamp(20px, 4vw, 40px);
background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-solid));
border-radius: var(--radius-lg);
text-align: start;
}
.about-feature__verse::before,
.about-feature__verse::after {
content: none;
}
.about-feature__verse blockquote {
font-size: var(--font-size-xl);
font-style: normal;
line-height: var(--leading-loose);
margin-bottom: var(--space-md);
}
.about-feature__verse figcaption {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--color-accent-ink);
}
.about-feature__section#tools {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
#tools .about-feature__section-heading h2 {
max-width: none;
}
#tools .about-feature__section-body {
max-width: none;
}
.about-feature__tool-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-xl);
}
.about-feature__tool-group > h3 {
margin: 0 0 var(--space-sm);
font-family: var(--font-title-serif);
font-weight: 600;
font-size: var(--font-size-2xl);
color: var(--color-primary);
}
.about-feature .features-list {
display: block;
margin: 0;
}
.about-feature .features-list__item {
height: auto;
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--lectern-seam);
border-radius: 0;
background: none;
box-shadow: none;
gap: var(--space-md);
}
.about-feature .features-list__item:last-child {
border-bottom: none;
}
.about-feature .features-list__item:has(a):hover {
background: none;
box-shadow: none;
}
.about-feature .features-list__icon {
width: 20px;
height: 24px;
margin-top: 0;
background: none;
box-shadow: none;
border-radius: 0;
color: var(--color-primary);
}
.about-feature .features-list__item:has(a):hover .features-list__icon {
background: none;
box-shadow: none;
}
.about-feature .features-list__title {
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
line-height: var(--leading-normal);
text-wrap: initial;
margin-bottom: var(--space-sm);
}
.about-feature .features-list__title a::after {
border-radius: var(--radius-sm);
}
.about-feature .features-list__item:hover .features-list__title {
color: var(--color-primary);
}
.about-feature .about-feature__section p.features-list__desc {
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
margin: 0;
}
.about-feature__more {
margin: var(--space-lg) 0 0;
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
text-align: start;
line-height: var(--leading-relaxed);
}
.about-feature .section-highlight {
padding: var(--space-md) var(--space-lg);
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
}
.about-feature__stats {
max-width: none;
margin: 0;
gap: var(--space-lg);
text-align: start;
}
.about-feature__stat-num {
font-family: var(--font-title-serif);
font-size: var(--font-size-4xl);
font-weight: 600;
color: var(--color-text);
}
.about-feature__stat-label {
max-width: 14ch;
line-height: var(--leading-normal);
}
.about-feature .timeline-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg) var(--space-xl);
padding: 0;
margin: 0;
border: none;
}
.about-feature .timeline-item {
margin: 0;
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.about-feature .timeline-item::before {
content: none;
}
.about-feature .timeline-date {
margin-bottom: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--color-accent-ink);
}
.about-feature .about-feature__section .timeline-item p {
font-size: var(--font-size-sm);
line-height: var(--leading-loose);
color: var(--color-text-muted);
margin: 0;
}
.about-feature__credits {
max-width: none;
margin: var(--space-lg) 0;
font-size: var(--font-size-md);
}
.about-feature__credits li {
padding-block: var(--space-lg);
line-height: var(--leading-loose);
color: var(--color-text-muted);
}
.about-feature__credits strong {
font-weight: 600;
}
.about-feature__credits .about-feature__editions {
margin: var(--space-sm) 0;
padding-inline-start: var(--space-lg);
font-size: var(--font-size-sm);
}
.about-feature__credits .about-feature__editions li {
padding-block: 0;
border-top: 0;
line-height: var(--leading-loose);
}
.about-feature__support,
.about-feature__final {
text-align: start;
}
.about-feature__support p,
.about-feature__final p {
max-width: none;
margin-inline: 0;
}
.about-feature a.about-feature__donate,
.about-feature .info-page-cta {
min-height: var(--control-h);
padding: var(--space-sm) var(--space-lg);
margin-top: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
box-shadow: var(--shadow-xs);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
line-height: var(--leading-normal);
color: var(--color-text);
text-align: start;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.about-feature a.about-feature__donate:hover,
.about-feature .info-page-cta:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-muted);
color: var(--color-text);
}
.about-feature a.about-feature__donate i,
.about-feature .info-page-cta i {
color: var(--color-primary);
}
.about-feature a.about-feature__donate:focus-visible,
.about-feature .info-page-cta:focus-visible {
box-shadow: var(--focus-ring);
}
.about-feature__signature {
padding: clamp(24px, 5vw, 56px);
margin-block: var(--space-lg) var(--space-xl);
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface-solid));
box-shadow: var(--paper-shadow);
}
.about-feature__signature-inner {
max-width: var(--measure);
margin-inline: auto;
}
.about-feature__signature-quote {
margin: 0 0 var(--space-lg);
font-family: var(--font-title-serif);
font-size: var(--font-size-3xl);
font-style: normal;
font-weight: 400;
line-height: var(--leading-normal);
}
.about-feature__signature-attr {
text-align: start;
}
.about-feature__signature-name {
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: 500;
}
.about-feature__signature-role {
font-size: var(--font-size-sm);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
@media (width <= 967px) {
.about-feature__hero {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.about-feature__hero-image img {
min-height: 280px;
}
.about-feature__section {
grid-template-columns: 180px minmax(0, 1fr);
gap: var(--space-lg);
}
.about-feature__tool-groups {
gap: var(--space-lg);
}
}
@media (width <= 715px) {
.about-feature__hero {
grid-template-columns: 1fr;
margin-block: var(--space-md) var(--space-lg);
}
.about-feature__title {
margin-bottom: var(--space-md);
}
.about-feature__hero-image img {
min-height: 0;
height: auto;
aspect-ratio: 2;
}
.about-feature__contents {
margin-bottom: var(--space-xl);
gap: var(--space-sm);
}
.about-feature__contents > span {
flex-basis: 100%;
margin-bottom: var(--space-xs);
}
.about-feature__contents a {
padding-inline: var(--space-mobile-md);
}
.about-feature__section {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-block: var(--space-lg);
}
.about-feature__section-heading h2 {
max-width: none;
font-size: var(--font-size-3xl);
}
.about-feature__tool-groups {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.about-feature .features-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--space-lg);
}
.about-feature .features-list__item:last-child {
border-bottom: 1px solid var(--lectern-seam);
}
.about-feature__signature {
margin-bottom: var(--space-lg);
}
.about-feature__signature-quote {
font-size: var(--font-size-2xl);
}
}
@media (width <= 480px) {
.about-feature .features-list,
.about-feature .timeline-container {
grid-template-columns: 1fr;
}
.about-feature .features-list__item {
padding-block: var(--space-md);
}
.about-feature .features-list__item:last-child {
border-bottom: none;
}
}