.page-shell {
    width: min(var(--site-max-width), calc(100% - (var(--site-gutter) * 2)));
    margin: 0 auto;
    padding: var(--page-gap) 0;
}

.page-shell--narrow {
    width: min(var(--site-narrow-width), calc(100% - (var(--site-gutter) * 2)));
}

.page-header {
    display: grid;
    gap: var(--space-sm);
    max-width: var(--site-readable-width);
    margin-bottom: var(--space-xl);
}

.page-header h1,
.page-header h2 {
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
}

.page-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.eyebrow {
    margin: 0;
    color: var(--color-accent-primary-hover);
    font-family: var(--font-family-ui);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.eyebrow a {
    color: inherit;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-lg);
}

.stack {
    display: grid;
    gap: var(--space-md);
}

.section-band {
    padding: var(--space-2xl) 0;
    background: var(--color-bg-section);
    border-block: var(--border-default);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.splash-actions {
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* Editorial page structure */
.section-heading,
.panel-heading {
    display: grid;
    gap: var(--space-xs);
}

.section-heading {
    max-width: var(--site-readable-width);
    margin-bottom: var(--space-xl);
}

.section-heading h2 {
    font-size: var(--font-size-heading-lg);
}

.section-heading p:not(.eyebrow),
.panel-heading p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.section-heading--quiet {
    max-width: 42rem;
    margin-bottom: var(--space-lg);
}

.section-heading--quiet h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.section-heading--quiet p:not(.eyebrow) {
    font-size: var(--font-size-body-md);
}

.panel-heading {
    margin-bottom: var(--space-md);
}

.panel-heading h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.member-home {
    display: grid;
}

.member-home__section {
    display: grid;
    gap: var(--space-lg);
}

.member-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-lg);
    align-items: start;
}

.member-intro__body {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.member-intro__body h1 {
    max-width: 17ch;
    font-size: var(--font-size-heading-lg);
}

.member-intro__body p:not(.eyebrow) {
    max-width: 56ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.member-intro__aside {
    align-content: start;
}

.status-strip {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
}

.status-strip__item {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    border-bottom: var(--border-default);
}

.status-strip__item:last-child {
    border-bottom: 0;
}

.status-strip dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
}

.status-strip dd {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.next-step-section {
    padding-block: var(--space-3xl);
}

.next-step-card {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.32fr);
    align-items: stretch;
}

.next-step-card__content,
.next-step-card__note {
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.next-step-card__content h3 {
    max-width: 18ch;
    font-size: var(--font-size-display);
}

.next-step-card__content p,
.next-step-card__note p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.next-step-card__note {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--color-surface-primary) 45%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.supporting-paths {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.supporting-paths h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.path-stack,
.utility-grid,
.studio-split {
    display: grid;
    gap: var(--space-md);
}

.studio-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.utility-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.utility-card {
    align-content: start;
}

.utility-card h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.path-row {
    background: var(--color-surface-primary);
}

.path-row__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.library-page {
    display: grid;
}

.library-orientation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.library-orientation__item {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
}

.library-orientation__item h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.library-orientation__item p {
    color: var(--color-text-secondary);
}

.library-map {
    display: grid;
    gap: var(--space-md);
}

.library-lane-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.55fr) auto;
    align-items: center;
    background: var(--color-surface-primary);
}

.library-lane-row__body {
    display: grid;
    gap: var(--space-xs);
}

.library-lane-row__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.lane-start {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-md);
    background: color-mix(in srgb, var(--color-surface-secondary) 72%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.lane-start__title,
.lane-start__meta {
    margin: 0;
}

.lane-start__title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.lane-start__title a {
    color: inherit;
}

.lane-start__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
}

.library-lane-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-items: center;
}

.lane-page {
    display: grid;
}

.lane-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.36fr);
    gap: var(--space-xl);
    align-items: start;
}

.lane-intro__body {
    display: grid;
    gap: var(--space-md);
    max-width: var(--site-readable-width);
}

.lane-intro__body h1 {
    font-size: var(--font-size-display);
}

.lane-intro__body p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.lane-intro__aside {
    align-content: start;
}

.lane-intro__aside h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.lane-intro__aside p:not(.eyebrow) {
    color: var(--color-text-secondary);
}

.lane-start-feature {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.34fr);
    align-items: stretch;
    margin-top: var(--space-xl);
}

.lane-start-feature__content,
.lane-start-feature__note {
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.lane-start-feature__content h2 {
    max-width: 18ch;
    font-size: var(--font-size-heading-lg);
}

.lane-start-feature__content p,
.lane-start-feature__note p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.lane-start-feature__note {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--color-surface-primary) 45%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.course-path-row {
    background: var(--color-surface-primary);
}

.course-page {
    display: grid;
}

.course-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.36fr);
    gap: var(--space-xl);
    align-items: start;
}

.course-intro__body {
    display: grid;
    gap: var(--space-md);
    max-width: var(--site-readable-width);
}

.course-intro__body h1 {
    font-size: var(--font-size-display);
}

.course-intro__body p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.course-intro__aside {
    align-content: start;
}

.course-intro__aside h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.course-intro__aside p:not(.eyebrow) {
    color: var(--color-text-secondary);
}

.course-action-panel,
.course-materials {
    margin-top: var(--space-xl);
}

.course-action-panel h2,
.course-materials h2,
.course-module h2 {
    font-family: var(--font-family-ui);
    letter-spacing: 0;
}

.course-action-panel h2,
.course-materials h2 {
    font-size: var(--font-size-heading-md);
}

.course-materials p:not(.eyebrow),
.module-materials p:not(.eyebrow) {
    color: var(--color-text-secondary);
}

.course-module {
    gap: var(--space-lg);
}

.module__header {
    display: grid;
    gap: var(--space-xs);
}

.module__header p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.module-materials {
    box-shadow: var(--shadow-none);
}

.course-lesson-row {
    background: var(--color-surface-primary);
}

.lesson-page {
    display: grid;
}

.lesson-header {
    display: grid;
    gap: var(--space-md);
    max-width: var(--site-readable-width);
    margin-bottom: var(--space-xl);
}

.lesson-header h1 {
    font-size: var(--font-size-display);
}

.lesson-header p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.lesson-focus {
    display: grid;
    gap: var(--space-lg);
}

.lesson-media {
    gap: var(--space-sm);
}

.lesson-completion-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--color-surface-secondary);
}

.lesson-completion-panel h2,
.lesson-support-panel h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.lesson-support-panel {
    align-content: start;
}

.lesson-support-panel p:not(.eyebrow),
.lesson-support-list p {
    color: var(--color-text-secondary);
}

.lesson-support-list {
    display: grid;
    gap: var(--space-md);
}

.lesson-support-list section {
    display: grid;
    gap: var(--space-xs);
}

.lesson-support-list h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-body-md);
    letter-spacing: 0;
}

.lesson-access-panel,
.lesson-nav {
    margin-top: var(--space-xl);
}

.lesson-return-link {
    display: inline-flex;
    width: fit-content;
    margin-bottom: var(--space-xl);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.lesson-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.workspace-page,
.workspace-section {
    display: grid;
}

.workspace-section {
    gap: var(--space-lg);
}

.workspace-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-lg);
    align-items: start;
}

.workspace-intro__body {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.workspace-intro__body h1 {
    max-width: 17ch;
    font-size: var(--font-size-heading-lg);
}

.workspace-intro__body p:not(.eyebrow) {
    max-width: 58ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.workspace-intro__aside {
    align-content: start;
}

.workspace-focus-section {
    padding-block: var(--space-3xl);
}

.workspace-resume-card {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.32fr);
    align-items: stretch;
}

.workspace-resume-card__content,
.workspace-resume-card__note {
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.workspace-resume-card__content h3 {
    max-width: 18ch;
    font-size: var(--font-size-display);
}

.workspace-resume-card__content p,
.workspace-resume-card__note p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.workspace-resume-card__note {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--color-surface-primary) 45%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.workspace-stack {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.workspace-stack h3,
.workspace-support-panel h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.workspace-course-row,
.workspace-completion-row,
.workspace-mentorship-row,
.workspace-start-row {
    background: var(--color-surface-primary);
}

.workspace-support-grid {
    align-items: start;
}

.workspace-support-panel {
    align-content: start;
}

.workspace-panel-list {
    display: grid;
    gap: var(--space-md);
}

.workspace-empty {
    color: var(--color-text-secondary);
}

.account-page,
.account-section {
    display: grid;
}

.account-section {
    gap: var(--space-lg);
}

.account-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-lg);
    align-items: start;
}

.account-intro__body {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.account-intro__body h1 {
    max-width: 17ch;
    font-size: var(--font-size-heading-lg);
}

.account-intro__body p:not(.eyebrow) {
    max-width: 58ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.account-intro__aside,
.account-management-panel {
    align-content: start;
}

.account-management-grid {
    align-items: start;
}

.account-management-panel h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.account-access-card {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.32fr);
    align-items: stretch;
}

.account-access-card__content,
.account-access-card__note {
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.account-access-card__content h3 {
    max-width: 18ch;
    font-size: var(--font-size-display);
}

.account-access-card__content p,
.account-access-card__note p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.account-access-card__note {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--color-surface-primary) 45%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.account-entitlement-row {
    background: var(--color-surface-primary);
}

.auth-page {
    display: grid;
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.76fr);
    gap: var(--space-xl);
    align-items: start;
}

.auth-intro,
.auth-panel,
.auth-note {
    display: grid;
    gap: var(--space-md);
}

.auth-intro {
    max-width: var(--site-readable-width);
}

.auth-intro h1 {
    max-width: 16ch;
    font-size: var(--font-size-display);
}

.auth-intro p:not(.eyebrow),
.auth-note p:not(.eyebrow),
.auth-panel p:not(.eyebrow),
.auth-switch {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.auth-note {
    margin-top: var(--space-lg);
}

.auth-panel {
    align-content: start;
}

.creator-page,
.creator-section {
    display: grid;
}

.creator-section {
    gap: var(--space-lg);
}

.creator-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-lg);
    align-items: start;
}

.creator-intro__body {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.creator-intro__body h1 {
    max-width: 16ch;
    font-size: var(--font-size-display);
}

.creator-intro__body p:not(.eyebrow),
.creator-intro__aside p:not(.eyebrow),
.creator-teaching-note p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.creator-intro__aside,
.creator-teaching-note {
    align-content: start;
}

.creator-intro__meta {
    display: grid;
    gap: var(--space-xs);
}

.creator-teaching-note {
    margin-top: var(--space-xl);
}

.creator-teaching-note h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.creator-lane-row {
    align-items: start;
    background: var(--color-surface-primary);
}

.creator-lane-row__start {
    margin: 0;
    color: var(--color-text-secondary);
}

.creator-lane-row__start span {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.event-page,
.event-detail-page,
.replay-archive-page {
    display: grid;
}

.studio-session-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-lg);
}

.studio-session-card {
    gap: var(--space-sm);
}

.studio-session-card h2 {
    font-size: var(--font-size-heading-md);
}

.studio-session-card__summary,
.studio-session-card__note {
    color: var(--color-text-secondary);
}

.studio-session-card__note {
    padding-top: var(--space-sm);
    border-top: var(--border-default);
}

.event-session-header {
    display: grid;
    gap: var(--space-md);
    max-width: var(--site-readable-width);
    margin-bottom: var(--space-xl);
}

.event-session-header h1 {
    font-size: var(--font-size-display);
}

.event-session-header p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.event-session-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.38fr);
    gap: var(--space-lg);
    align-items: start;
}

.event-session-grid--support-only {
    grid-template-columns: minmax(min(100%, 18rem), 24rem);
}

.event-session-panel h2,
.event-live-panel h2,
.event-replay-panel h2 {
    font-family: var(--font-family-ui);
    letter-spacing: 0;
}

.event-session-panel h2 {
    font-size: var(--font-size-heading-md);
}

.event-session-panel p:not(.eyebrow),
.event-live-panel p:not(.eyebrow),
.event-replay-panel p:not(.eyebrow) {
    color: var(--color-text-secondary);
}

.event-live-panel,
.event-replay-panel {
    margin-top: var(--space-xl);
}

.event-live-panel--primary,
.event-replay-panel--primary {
    margin-top: 0;
    margin-bottom: var(--space-xl);
}

.structured-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-items: center;
}

/* Surface primitives */
.soft-panel,
.feature-panel,
.object-card,
.card,
.access-prompt,
.message,
.creator-outline-card {
    display: grid;
    gap: var(--space-md);
    color: var(--color-text-primary);
    border: var(--border-default);
    box-shadow: var(--shadow-soft);
}

.soft-panel,
.access-prompt,
.message,
.creator-outline-card {
    padding: var(--panel-padding-compact);
    background: var(--color-surface-primary);
    border-radius: var(--radius-md);
}

.feature-panel {
    padding: var(--panel-padding);
    background: var(--color-surface-feature);
    border-radius: var(--radius-xl);
}

.object-card,
.card {
    align-content: start;
    padding: var(--panel-padding-compact);
    background: var(--color-surface-primary);
    border-radius: var(--radius-md);
}

.card h2,
.card h3,
.card p,
.object-card h2,
.object-card h3,
.object-card p,
.soft-panel h2,
.soft-panel h3,
.soft-panel p,
.feature-panel h2,
.feature-panel h3,
.feature-panel p,
.access-prompt h2,
.access-prompt p {
    margin: 0;
}

.card h2,
.card h3,
.object-card h2,
.object-card h3 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-sm);
    letter-spacing: 0;
}

.feature-panel h2,
.feature-panel h3 {
    font-size: var(--font-size-heading-lg);
}

.card__meta,
.meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
}

.media-strip {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.media-strip__image,
.creator-profile__image {
    object-fit: cover;
    background: var(--color-surface-secondary);
    border: var(--border-default);
}

.media-strip__image {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: var(--radius-sm);
}

.creator-profile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.creator-profile__image {
    width: 8rem;
    height: 8rem;
    border-radius: var(--radius-md);
}

.media-preview-trigger {
    display: block;
    width: fit-content;
    padding: 0;
    cursor: zoom-in;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.media-preview-trigger .media-strip__image,
.media-preview-trigger .creator-profile__image {
    transition:
        border-color var(--transition-soft),
        filter var(--transition-soft);
}

.media-preview-trigger:hover .media-strip__image,
.media-preview-trigger:hover .creator-profile__image {
    border-color: var(--color-accent-primary);
    filter: saturate(1.04);
}

.media-image--unavailable {
    opacity: 0.72;
}

.media-preview-dialog {
    width: min(56rem, calc(100% - (var(--site-gutter) * 2)));
    max-width: none;
    padding: 0;
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.media-preview-dialog::backdrop {
    background: color-mix(in srgb, var(--color-text-primary) 38%, transparent);
}

.media-preview-dialog__body {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.media-preview-dialog__header {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
}

.media-preview-dialog__image {
    width: 100%;
    max-height: min(70vh, 48rem);
    object-fit: contain;
    background: var(--color-surface-secondary);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.media-preview-dialog__caption {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
}

/* Badges are state cues, not metadata containers. */
.badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 1.7rem;
    padding: 0 var(--space-sm);
    color: var(--color-badge-neutral-text);
    background: var(--color-badge-neutral-bg);
    border: var(--border-default);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.badge a {
    color: inherit;
}

.badge--completed {
    color: var(--color-badge-support-text);
    background: var(--color-badge-support-bg);
}

.badge--current {
    color: var(--color-badge-guidance-text);
    background: var(--color-badge-guidance-bg);
    border-color: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-border-default));
}

.badge--attention {
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border-color: var(--color-border-default);
}

.badge--locked {
    color: var(--color-badge-locked-text);
    background: var(--color-badge-locked-bg);
}

/* Actions */
.button {
    display: inline-flex;
    width: fit-content;
    min-height: var(--button-height);
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-lg);
    color: var(--color-button-primary-text);
    background: var(--color-button-primary-bg);
    border: 1px solid var(--color-button-primary-bg);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--transition-soft),
        border-color var(--transition-soft),
        color var(--transition-soft);
}

.button:hover {
    color: var(--color-button-primary-text);
    background: var(--color-button-primary-bg-hover);
    border-color: var(--color-button-primary-bg-hover);
}

.button--secondary {
    color: var(--color-button-secondary-text);
    background: var(--color-button-secondary-bg);
    border-color: var(--color-button-secondary-border);
}

.button--secondary:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-secondary);
    border-color: color-mix(in srgb, var(--color-border-default) 70%, var(--color-text-muted));
}

.button--quiet {
    min-height: auto;
    padding: 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 36%, transparent);
    text-underline-offset: 0.18em;
}

.button--quiet:hover {
    color: var(--color-accent-primary-hover);
    background: transparent;
}

/* Navigation support */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin-top: var(--space-lg);
    padding-bottom: var(--space-xs);
    border-bottom: var(--border-default);
}

.subnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.subnav__link:hover {
    color: var(--color-text-primary);
}

.subnav__link--current {
    color: var(--color-text-primary);
}

.subnav__link--current::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--space-xs) - 1px);
    left: 0;
    height: 3px;
    background: var(--color-accent-primary);
    border-radius: var(--radius-pill);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
}

.breadcrumb a {
    color: var(--color-text-muted);
}

.breadcrumb a:hover {
    color: var(--color-text-primary);
}

/* Status messages and callouts */
.message-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.message--success {
    background: var(--color-accent-support-wash);
    border-color: color-mix(in srgb, var(--color-accent-support) 45%, var(--color-border-default));
}

.message--error {
    color: var(--color-state-error-text);
    background: var(--color-state-error-bg);
    border-color: color-mix(in srgb, var(--color-state-error-text) 35%, var(--color-border-default));
}

.message--warning,
.message--info {
    background: var(--color-state-warning-bg);
    border-color: color-mix(in srgb, var(--color-state-warning-text) 35%, var(--color-border-default));
}

.access-prompt {
    background: var(--color-surface-callout);
}

.access-prompt .button-row {
    margin-top: var(--space-xs);
}

/* Learning path primitives */
.module-list {
    display: grid;
    gap: var(--space-2xl);
}

.module {
    display: grid;
    gap: var(--space-md);
}

.module h2 {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-md);
    letter-spacing: 0;
}

.lesson-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.structured-row,
.lesson-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: color-mix(in srgb, var(--color-surface-primary) 72%, transparent);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.lesson-row__body {
    display: grid;
    gap: var(--space-xs);
}

.lesson-row__title {
    margin: 0;
    font-weight: var(--font-weight-bold);
}

.lesson-row__summary {
    margin: 0;
    color: var(--color-text-secondary);
}

.progress-panel,
.completion-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--color-surface-secondary);
}

.progress-panel h2,
.progress-panel p,
.completion-panel h2,
.completion-panel p {
    margin: 0;
}

/* Forms */
.form-shell {
    display: grid;
    gap: var(--space-md);
    width: min(38rem, 100%);
}

.form-field {
    display: grid;
    gap: var(--space-xs);
}

.form-field label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    min-height: var(--input-height);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit;
    transition:
        border-color var(--transition-soft),
        box-shadow var(--transition-soft),
        background-color var(--transition-soft);
}

.form-field select {
    appearance: none;
    padding-right: var(--space-2xl);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
        linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 1.1rem) 50%,
        calc(100% - 0.8rem) 50%;
    background-repeat: no-repeat;
    background-size: 0.4rem 0.4rem;
}

.form-field textarea {
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    outline: 0;
}

.form-field--checkbox {
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    align-items: center;
}

.form-field--checkbox input[type="checkbox"] {
    width: 1.1rem;
    min-height: 1.1rem;
    margin: 0;
    padding: 0;
}

.form-field--checkbox .form-help,
.form-field--checkbox .form-errors {
    grid-column: 1 / -1;
}

.form-help,
.form-error,
.form-errors {
    margin: 0;
    font-size: var(--font-size-body-sm);
}

.form-help {
    color: var(--color-text-muted);
}

.form-error,
.form-errors {
    color: var(--color-state-error-text);
}

.form-errors {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
}

.form-errors--quiet {
    padding: var(--space-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-primary);
    border: var(--border-default);
    border-radius: var(--radius-sm);
}

/* Summaries and details */
.account-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-md);
}

.detail-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
}

.detail-list div {
    display: grid;
    gap: var(--space-2xs);
}

.detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
}

.detail-list dd {
    margin: 0;
}

.stat {
    display: grid;
    gap: var(--space-xs);
}

.stat__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
}

.stat__value {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-ui);
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

/* Media */
.video-shell {
    display: grid;
    gap: var(--space-lg);
}

.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-text-primary);
    border: 0;
    border-radius: var(--radius-md);
}

.video-placeholder {
    display: grid;
    min-height: 18rem;
    place-items: center;
    padding: var(--space-lg);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border: var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
}

.upload-panel {
    align-content: start;
}

.upload-progress {
    display: grid;
    gap: var(--space-xs);
}

.upload-progress[hidden] {
    display: none;
}

.upload-progress__bar {
    width: 100%;
    height: 0.75rem;
    overflow: hidden;
    accent-color: var(--color-accent-primary);
    background: var(--color-surface-secondary);
    border: var(--border-default);
    border-radius: var(--radius-pill);
}

.upload-progress p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
}

/* Existing page-specific classes, kept tokenized while pages are migrated. */
.event-card,
.event-detail,
.tier-card {
    align-content: start;
}

.tier-grid {
    align-items: stretch;
}

.feature-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding-left: var(--space-lg);
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-md);
    align-items: end;
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface-primary);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.creator-toolbar {
    margin-top: var(--space-lg);
}

.creator-portal-page,
.creator-portal-shell,
.creator-portal-section,
.creator-portal-panel {
    display: grid;
}

.creator-portal-section,
.creator-portal-panel {
    gap: var(--space-lg);
}

.creator-portal-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-lg);
    align-items: start;
}

.creator-portal-intro__body {
    display: grid;
    gap: var(--space-sm);
    max-width: var(--site-readable-width);
    padding-block: var(--space-md);
}

.creator-portal-intro__body h1 {
    max-width: 17ch;
    font-size: var(--font-size-display);
}

.creator-portal-intro__body p:not(.eyebrow),
.creator-portal-intro__aside p:not(.eyebrow),
.creator-portal-panel p,
.creator-portal-work-card p:not(.stat__value) {
    color: var(--color-text-secondary);
}

.creator-portal-intro__body p:not(.eyebrow),
.creator-portal-intro__aside p:not(.eyebrow) {
    font-size: var(--font-size-body-lg);
}

.creator-portal-intro__aside {
    align-content: start;
}

.creator-portal-nav {
    margin-top: var(--space-lg);
}

.creator-portal-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.creator-portal-stat h2,
.creator-portal-work-card h2,
.creator-portal-panel h2,
.creator-portal-panel h3 {
    font-family: var(--font-family-ui);
    letter-spacing: 0;
}

.creator-portal-stat h2,
.creator-portal-work-card h2,
.creator-portal-panel h3 {
    font-size: var(--font-size-heading-sm);
}

.creator-portal-panel h2 {
    font-size: var(--font-size-heading-md);
}

.creator-portal-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.creator-portal-work-card {
    align-content: start;
}

.creator-portal-row {
    background: var(--color-surface-primary);
}

.creator-portal-row--rich {
    align-items: start;
}

.creator-portal-row__header {
    display: grid;
    gap: var(--space-xs);
}

.creator-portal-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-md);
    padding-top: var(--space-sm);
}

.creator-portal-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.44fr);
}

.card-list,
.creator-outline-list {
    display: grid;
    gap: var(--space-md);
}

.creator-outline-card {
    background: var(--color-surface-secondary);
}

.creator-outline-summary {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-surface-primary);
    border: var(--border-default);
    border-radius: var(--radius-sm);
}

.creator-outline-summary p {
    margin: 0;
}

.creator-outline-card__header,
.video-card__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: start;
}

.creator-outline-card__summary {
    margin: 0;
    color: var(--color-text-secondary);
}

.creator-outline-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-md);
    align-items: start;
}

.creator-layout {
    align-items: start;
}

.membership-page,
.membership-section {
    display: grid;
}

.membership-section {
    gap: var(--space-lg);
}

.membership-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-xl);
}

.membership-intro__body {
    display: grid;
    gap: var(--space-md);
    max-width: var(--site-readable-width);
}

.membership-intro__body h1 {
    font-size: var(--font-size-display);
}

.membership-intro__body p:not(.eyebrow),
.membership-intro__aside p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
}

.membership-intro__aside {
    align-content: start;
}

.membership-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.membership-tier-card {
    gap: var(--space-lg);
}

.membership-tier-card--current {
    border-color: var(--color-accent-primary);
}

.membership-tier-card__header {
    display: grid;
    gap: var(--space-xs);
}

.tier-card__price {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-display);
    font-size: var(--font-size-heading-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
}

.membership-access-list {
    display: grid;
    gap: var(--space-md);
}

.membership-access-row {
    background: var(--color-surface-primary);
}

.membership-checkout-note {
    margin-top: var(--space-xl);
}

@media (max-width: 680px) {
    .lesson-row,
    .structured-row,
    .library-lane-row,
    .library-orientation,
    .lesson-completion-panel,
    .progress-panel,
    .completion-panel,
    .creator-profile,
    .creator-intro,
    .creator-portal-intro,
    .creator-portal-form-layout,
    .lane-intro,
    .lane-start-feature,
    .course-intro,
    .member-intro,
    .workspace-intro,
    .account-intro,
    .auth-layout,
    .membership-intro,
    .membership-tier-grid,
    .next-step-card,
    .workspace-resume-card,
    .account-access-card,
    .event-session-grid,
    .studio-split,
    .utility-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .library-lane-row__actions {
        justify-content: flex-start;
    }

    .member-intro__body h1 {
        max-width: none;
    }

    .structured-row__actions {
        justify-content: flex-start;
    }

    .feature-panel,
    .soft-panel,
    .object-card,
    .card,
    .access-prompt,
    .creator-outline-card {
        padding: var(--space-lg);
    }

    .page-shell {
        width: min(100% - 2rem, var(--site-max-width));
        padding: var(--space-2xl) 0;
    }
}