:root {
  color-scheme: light;
  --paper: #f7f7f2;
  --surface: #ffffff;
  --ink: #050505;
  --muted: #6f6a63;
  --line: #ddd8cf;
  --leaf: #2f7a5f;
  --leaf-dark: #1f5c47;
  --clay: #b44d3d;
  --clay-soft: #f2ddd8;
  --orange: #c27718;
  --orange-soft: #f6eadb;
  --gold: #b68a3c;
  --sky: #dceef3;
  --mint: #e4f1e8;
  --rose: #f8e8e4;
  --shadow: 0 16px 42px rgba(5, 5, 5, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.5;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(221, 216, 207, 0.9);
  background: rgba(247, 247, 242, 0.94);
  backdrop-filter: blur(14px);
}

.topbar__inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.brand--has-logo {
  width: min(240px, 30vw);
}

.brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
}

.brand__logo {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  mix-blend-mode: multiply;
}

.brand__name {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.brand__tagline {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 700;
}

.nav__button:hover,
.nav__button.is-active {
  background: var(--mint);
  color: var(--leaf-dark);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__actions form {
  margin: 0;
}

.top-user {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 900;
  overflow: hidden;
}

.top-user img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-user:hover,
.top-user:focus-visible {
  outline: 3px solid rgba(47, 122, 95, 0.28);
  outline-offset: 3px;
}

.icon-button,
.button,
.chip,
.tab,
.amount-button,
.lesson-row,
.admin-action {
  min-height: 40px;
}

.icon-button {
  display: inline-grid;
  width: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.notification-button {
  position: relative;
  text-decoration: none;
  color: var(--ink);
}

.notification-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.notification-button__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  background: var(--clay);
  color: #ffffff;
  padding: 0 5px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 800;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.button:hover,
.icon-button:hover,
.amount-button:hover,
.tab:hover,
.chip:hover,
.admin-action:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.button--small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.88rem;
}

.button--primary {
  background: var(--leaf);
  color: #ffffff;
}

.button--primary:hover {
  background: var(--leaf-dark);
}

.button--dark {
  background: var(--ink);
  color: var(--paper);
}

.button--ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.button--clay {
  background: var(--clay);
  color: #ffffff;
}

.button--full {
  width: 100%;
}

.content {
  min-height: calc(100vh - 69px);
}

.section {
  padding: 48px 24px;
}

.section--tight {
  padding-top: 28px;
}

.section--surface {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.section--mint {
  background: var(--mint);
}

.section__inner,
.hero__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.section-header--compact {
  margin-bottom: 8px;
}

.section-header h2,
.page-title h1,
.panel h2,
.panel h3,
.modal h2 {
  margin: 0;
}

.section-header p,
.page-title p,
.panel p,
.modal p {
  margin: 8px 0 0;
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero {
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.34)),
    var(--hero-image) center/cover;
  color: #ffffff;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: 40px;
  align-items: end;
  min-height: 520px;
  padding: 64px 24px 42px;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
}

.hero p {
  max-width: 660px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.08rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 12px;
}

.live-note {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 18px;
  backdrop-filter: blur(12px);
}

.live-note strong {
  display: block;
  margin-bottom: 8px;
}

.live-note span {
  color: rgba(255, 255, 255, 0.78);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}

.metric {
  background: var(--surface);
  padding: 22px 24px;
}

.metric strong {
  display: block;
  font-size: 1.8rem;
}

.metric span {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 18px;
}

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

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

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

.article-card,
.course-card,
.profile-card,
.post,
.tier,
.impact-item,
.stat-card,
.admin-lane,
.panel,
.reader,
.course-detail,
.lesson-row,
.contribution-box,
.empty-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.article-card,
.course-card,
.profile-card,
.post,
.tier,
.impact-item,
.stat-card,
.admin-lane,
.panel,
.reader,
.course-detail,
.contribution-box,
.empty-state {
  overflow: hidden;
}

.article-card__image,
.course-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sky);
}

.card-media-link {
  display: block;
  height: 100%;
}

.article-card__image img,
.course-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.article-card:hover .card-media-link img,
.course-card:hover .card-media-link img {
  transform: scale(1.025);
}

.card-media-link:focus-visible,
.card-title-link:focus-visible {
  outline: 3px solid rgba(47, 122, 95, 0.32);
  outline-offset: 4px;
  border-radius: 6px;
}

.card-title-link {
  transition: color 160ms ease;
}

.card-title-link:hover {
  color: var(--leaf);
}

.article-card__body,
.course-card__body,
.profile-card,
.post,
.tier,
.impact-item,
.stat-card,
.admin-lane,
.panel,
.reader,
.course-detail,
.contribution-box,
.empty-state {
  padding: 20px;
}

.article-card h3,
.course-card h3,
.profile-card h3,
.post h3,
.tier h3,
.impact-item h3 {
  margin: 0;
}

.article-card p,
.course-card p,
.profile-card p,
.post p,
.tier p,
.impact-item p {
  margin: 10px 0 0;
  color: var(--muted);
}

h1,
h2,
h3,
p,
strong,
span,
a,
button {
  overflow-wrap: anywhere;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--leaf-dark);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
}

.tag--clay {
  background: var(--clay-soft);
  color: #7c2f25;
}

.tag--gold {
  background: #f4ead8;
  color: #76571f;
}

.tag--sky {
  background: var(--sky);
  color: #2f6170;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab,
.chip,
.amount-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 14px;
  font-weight: 800;
}

.tab.is-active,
.chip.is-active,
.amount-button.is-active {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #ffffff;
}

.search {
  min-width: 260px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 14px;
}

.page-title {
  max-width: 820px;
  margin-bottom: 28px;
}

.page-title h1 {
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.7fr);
  gap: 24px;
  align-items: start;
}

.reader__hero {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--sky);
}

.reader__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reader__body {
  padding: 28px;
}

.reader h1 {
  margin: 8px 0 0;
  font-size: 2.8rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.reader article {
  margin-top: 24px;
}

.reader article p {
  color: #3f3a36;
  font-size: 1.06rem;
}

.callout {
  border-left: 4px solid var(--clay);
  background: var(--rose);
  padding: 16px 18px;
  margin: 22px 0;
}

.course-card__status,
.course-detail__status {
  margin-top: 16px;
}

.progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ebe7df;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--leaf);
}

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.course-detail__media {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--sky);
}

.course-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-detail__body {
  padding: 28px;
}

.course-detail h1 {
  margin: 8px 0 0;
  font-size: 2.8rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.course-access-note,
.lesson-access-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(47, 122, 95, 0.24);
  border-radius: 8px;
  background: var(--mint);
  padding: 12px 14px;
  margin-top: 16px;
}

.course-access-note strong,
.lesson-access-note strong {
  color: var(--leaf-dark);
}

.course-access-note span,
.lesson-access-note span {
  color: var(--muted);
  font-weight: 800;
}

.lesson-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.lesson-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.lesson-row--link {
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.lesson-row--link:hover,
.lesson-row--link:focus-visible {
  border-color: rgba(47, 122, 95, 0.42);
  box-shadow: 0 12px 30px rgba(5, 5, 5, 0.08);
  transform: translateY(-1px);
}

.lesson-row--complete {
  background: var(--mint);
}

.lesson-row--locked {
  background: #fbfaf7;
  color: var(--muted);
}

.lesson-row--locked .lesson-number {
  background: var(--line);
  color: var(--muted);
}

.lesson-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--mint);
  color: var(--leaf-dark);
  font-weight: 900;
}

.lesson-number--done {
  background: var(--leaf);
  color: var(--surface);
  font-size: 0.72rem;
}

.lesson-title {
  font-weight: 800;
}

.lesson-time {
  color: var(--muted);
}

.contribution-box {
  position: sticky;
  top: 94px;
  box-shadow: var(--shadow);
}

.contribution-box h2 {
  margin: 0;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.contribution-note {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
  color: var(--muted);
  font-size: 0.94rem;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tier {
  display: flex;
  min-height: 300px;
  flex-direction: column;
}

.tier__price {
  margin-top: 16px;
  font-size: 2.4rem;
  font-weight: 900;
}

.tier ul {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding-left: 18px;
  color: var(--muted);
}

.tier .button {
  margin-top: auto;
}

.impact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.profile-card {
  min-height: 240px;
}

.avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.2rem;
  font-weight: 900;
  overflow: hidden;
  text-decoration: none;
}

.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-link:hover,
.avatar-link:focus-visible {
  outline: 3px solid rgba(47, 122, 95, 0.28);
  outline-offset: 3px;
}

.avatar--large {
  width: 86px;
  height: 86px;
  font-size: 1.7rem;
}

.avatar--author {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}

.profile-card__top,
.post__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-card__link {
  transition: color 160ms ease;
}

.profile-card__link:hover,
.profile-link:hover {
  color: var(--leaf);
}

.post-form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.post-form textarea,
.field,
.select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
}

.post-form textarea {
  min-height: 110px;
  resize: vertical;
}

.custom-amount-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.feed {
  display: grid;
  gap: 14px;
}

.post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.post__actions form,
.profile-actions form,
.profile-card .card-actions form {
  margin: 0;
}

.like-count {
  color: var(--muted);
  font-weight: 800;
}

.post-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.comments-section {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.comments-header,
.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.comments-header h2,
.comments-header p {
  margin: 0;
}

.comments-list {
  display: grid;
  gap: 12px;
}

.comment-card,
.comment-form-panel,
.comment-login {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.comment-card p,
.comment-login p,
.comment-login h3 {
  margin: 0;
}

.comment-form {
  display: grid;
  gap: 12px;
}

.comment-form label:not(.comment-honeypot) {
  color: var(--ink);
  font-weight: 900;
}

.comment-form textarea {
  min-height: 132px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  resize: vertical;
}

.comment-form-footer span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.comment-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.profile-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.profile-hero-card {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 18px;
  padding: 24px;
}

.profile-identity {
  display: flex;
  gap: 16px;
  align-items: center;
}

.profile-identity h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

.profile-identity p {
  margin: 6px 0 0;
  color: var(--muted);
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-meta span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--muted);
  font-weight: 800;
}

.profile-bio {
  margin: 0;
  color: var(--muted);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-link {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.author-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  margin-top: 24px;
}

.author-box__body {
  display: grid;
  gap: 6px;
}

.author-box h2,
.author-box p {
  margin: 0;
}

.author-box__headline,
.author-box__bio {
  color: var(--muted);
}

.profile-actions,
.profile-feed-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.profile-stats div {
  display: grid;
  gap: 2px;
  padding: 12px;
  background: var(--surface);
}

.profile-stats div + div {
  border-left: 1px solid var(--line);
}

.profile-stats strong {
  font-size: 1.4rem;
}

.profile-stats span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-edit-form textarea {
  min-height: 160px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.admin-lane h3 {
  margin: 0 0 16px;
}

.admin-list {
  display: grid;
  gap: 12px;
}

.admin-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px 14px;
  text-align: left;
}

.admin-action strong {
  display: block;
}

.admin-action span {
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-row {
  gap: 16px;
}

.admin-row__main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dashboard-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.dashboard-card h3,
.dashboard-card p:not(.eyebrow) {
  margin: 0;
}

.dashboard-card p:not(.eyebrow) {
  color: var(--muted);
}

.contribution-admin-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.contribution-admin-list {
  display: grid;
  gap: 10px;
}

.contribution-amount-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 120px auto auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.contribution-amount-row--new {
  background: var(--mint);
}

.contribution-amount-row label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.contribution-active-check {
  align-self: center;
  color: var(--ink);
}

.launch-admin-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.launch-admin-list {
  display: grid;
  gap: 12px;
}

.launch-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 14px;
}

.launch-admin-row__main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.launch-admin-row__main h3,
.launch-admin-row__main p {
  margin: 0;
}

.launch-admin-row__main p {
  color: var(--muted);
}

.launch-admin-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
}

.launch-admin-counts span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  text-align: center;
}

.launch-admin-counts strong {
  font-size: 1.25rem;
}

.launch-admin-counts small {
  color: var(--muted);
  font-weight: 800;
}

.email-log-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.email-log-list {
  display: grid;
  gap: 12px;
}

.email-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: start;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 14px;
}

.email-log-row__main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.email-log-row__main h3,
.email-log-row__main p {
  margin: 0;
}

.email-log-row__main p {
  color: var(--muted);
}

.email-log-error {
  color: #873628 !important;
  font-weight: 800;
}

.settings-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.settings-preview > div {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.settings-preview .settings-preview__wide {
  grid-column: 1 / -1;
}

.settings-form,
.settings-fields,
.settings-media-grid,
.settings-upload-card {
  display: grid;
}

.settings-form {
  gap: 18px;
  padding: 20px;
}

.settings-fields {
  gap: 12px;
}

.settings-media-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.settings-upload-card {
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 14px;
}

.settings-upload-card--wide {
  grid-column: 1 / -1;
}

.settings-upload-card h2,
.settings-upload-card p {
  margin: 0;
}

.settings-upload-card h2 {
  margin-top: 8px;
  font-size: 1.1rem;
}

.settings-upload-card p {
  color: var(--muted);
  font-weight: 800;
}

.settings-upload-card__preview {
  display: grid;
  min-height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.settings-upload-card__preview--logo {
  justify-items: start;
}

.settings-upload-card__preview--favicon {
  min-height: 92px;
}

.settings-preview--summary {
  grid-template-columns: 1fr;
}

.settings-preview--summary span {
  color: var(--muted);
  font-weight: 800;
}

.settings-logo-preview {
  width: min(100%, 260px);
  height: 86px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  background: var(--paper);
  mix-blend-mode: multiply;
}

.settings-favicon-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  object-fit: contain;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
}

.settings-hero-preview {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.settings-hero-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(247, 247, 242, 0.94) 0%, rgba(247, 247, 242, 0.58) 22%, rgba(247, 247, 242, 0.08) 58%),
    linear-gradient(0deg, rgba(247, 247, 242, 0.18), rgba(247, 247, 242, 0.18));
  pointer-events: none;
}

.settings-hero-preview img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.settings-preview small,
.form-grid small {
  color: var(--muted);
  font-weight: 800;
}

.form-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 4px 0;
}

.email-log-row__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px;
}

.email-log-row__meta span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.email-log-row__meta strong {
  overflow-wrap: anywhere;
}

.email-log-row__meta small {
  color: var(--muted);
  font-weight: 800;
}

.comment-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.comment-admin-panel,
.comment-filter-panel {
  display: grid;
  gap: 18px;
}

.comment-admin-list,
.comment-filter-list {
  display: grid;
  gap: 12px;
}

.comment-admin-row,
.comment-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.notification-row--unread {
  border-color: rgba(47, 122, 95, 0.42);
  background: #f6fbf7;
}

.comment-admin-row__main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.comment-admin-row__main h3,
.comment-admin-row__main p {
  margin: 0;
}

.comment-admin-user {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.comment-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.comment-admin-actions form {
  margin: 0;
}

.review-note-action {
  width: min(260px, 100%);
}

.review-note-action summary {
  cursor: pointer;
  list-style: none;
}

.review-note-action summary::-webkit-details-marker {
  display: none;
}

.review-note-form {
  display: grid;
  gap: 10px;
  margin-top: 10px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 12px;
}

.review-note-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.review-note-form textarea {
  min-height: 92px;
  resize: vertical;
}

.comment-filter-row {
  grid-template-columns: minmax(180px, 1fr) 150px auto auto;
  align-items: center;
}

.comment-filter-new {
  display: grid;
  gap: 12px;
  padding-top: 6px;
}

.comment-filter-new h3 {
  margin: 0;
}

.user-admin-activity {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 8px;
}

.user-admin-activity span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 10px;
}

.user-admin-activity strong {
  font-size: 1.15rem;
}

.user-admin-activity small {
  color: var(--muted);
  font-weight: 800;
}

.user-admin-role-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 8px;
}

.user-admin-role-form .field {
  min-height: 34px;
  padding: 6px 10px;
}

.admin-row__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-row__actions form {
  margin: 0;
}

.category-manager {
  margin-top: 18px;
}

.category-admin-list {
  display: grid;
  gap: 12px;
}

.category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px;
}

.category-row label:not(.check-row) {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.category-row .tag,
.category-delete-check {
  align-self: center;
}

.category-delete-check {
  min-height: 42px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid .card-actions {
  grid-column: 1 / -1;
}

.admin-editor {
  display: grid;
  gap: 16px;
}

.editor-fieldset {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-fieldset[disabled] {
  opacity: 0.82;
}

.admin-editor + .admin-lane {
  margin-top: 18px;
}

.create-editor {
  margin-top: 18px;
  scroll-margin-top: 96px;
}

.admin-editor label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.file-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.admin-editor .field,
.admin-editor .select,
.admin-editor textarea,
.file-field .field {
  color: var(--ink);
  font-weight: 500;
}

.editor-textarea {
  min-height: 260px;
  resize: vertical;
}

.rich-text-field {
  display: grid;
  gap: 8px;
}

.rich-text-label {
  color: var(--muted);
  font-weight: 800;
}

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  padding: 10px;
}

.rich-text-button {
  font-weight: 900;
}

.rich-text-button.is-active {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #ffffff;
}

.rich-text-field .ql-link,
.rich-text-field [data-quill-format="link"] {
  display: none !important;
}

.rich-text-surface {
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 16px;
  outline: 0;
}

.rich-text-surface.ql-container {
  padding: 0;
}

.rich-text-toolbar + .rich-text-surface {
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.rich-text-field .ql-toolbar button {
  border-radius: 8px;
  color: var(--ink);
}

.rich-text-field .ql-toolbar button:hover,
.rich-text-field .ql-toolbar button:focus,
.rich-text-field .ql-toolbar button.ql-active {
  color: var(--leaf-dark);
}

.rich-text-field .ql-toolbar .ql-header {
  color: var(--ink);
  font-weight: 900;
}

.rich-text-field .ql-editor {
  min-height: 280px;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  padding: 16px;
}

.rich-text-surface:focus-visible {
  border-color: rgba(47, 122, 95, 0.5);
  box-shadow: 0 0 0 3px rgba(47, 122, 95, 0.16);
}

.rich-text-field .ql-container.ql-snow:focus-within {
  border-color: rgba(47, 122, 95, 0.5);
  box-shadow: 0 0 0 3px rgba(47, 122, 95, 0.16);
}

.rich-text-surface.is-invalid {
  border-color: #b44d3d;
  box-shadow: 0 0 0 3px rgba(180, 77, 61, 0.14);
}

.rich-text-surface p,
.rich-text-surface h2,
.rich-text-surface h3,
.rich-content p,
.rich-content h2,
.rich-content h3 {
  margin: 0 0 14px;
}

.rich-text-surface h2,
.rich-text-field .ql-editor h2,
.rich-content h2 {
  color: var(--ink);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.15;
}

.rich-text-surface h3,
.rich-text-field .ql-editor h3,
.rich-content h3 {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
}

.rich-text-surface ul,
.rich-content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.rich-text-surface li,
.rich-content li {
  margin: 6px 0;
}

.rich-text-input {
  display: none;
}

.rich-content {
  margin-top: 24px;
}

.rich-content--compact {
  margin-top: 12px;
}

.rich-content--compact p,
.rich-content--compact li {
  color: var(--muted);
}

.image-picker {
  display: grid;
  gap: 14px;
}

.field-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 800;
}

.field-note {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.current-image-preview {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.current-image-preview img {
  width: min(100%, 360px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.media-library {
  display: grid;
  gap: 10px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.media-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.media-option {
  position: relative;
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.media-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.media-option img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.media-option span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-option:hover img,
.media-option.is-selected img,
.media-option input:checked + img,
.media-option:has(input:checked) img {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(47, 122, 95, 0.14);
}

.media-status {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mint);
  color: var(--leaf-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.media-delete-button {
  width: 100%;
}

.empty-state--compact {
  padding: 16px;
}

.lms-builder {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.lms-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lms-summary-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.lms-summary-card strong {
  font-size: 2rem;
  line-height: 1;
}

.lms-summary-card span:not(.tag) {
  color: var(--muted);
  font-weight: 800;
}

.module-block {
  display: grid;
  gap: 18px;
}

.module-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.module-heading h3,
.module-heading p {
  margin: 0;
}

.module-meta-row,
.lesson-admin-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.order-actions form {
  margin: 0;
}

.editor-disclosure {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 0;
}

.editor-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.editor-disclosure summary::-webkit-details-marker {
  display: none;
}

.editor-disclosure summary > span:first-child {
  display: grid;
  gap: 2px;
}

.editor-disclosure summary strong {
  color: var(--ink);
}

.editor-disclosure summary span span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.editor-disclosure[open] summary {
  border-bottom: 1px solid var(--line);
}

.module-create-form,
.module-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.lesson-admin-list,
.lesson-create {
  display: grid;
  gap: 14px;
}

.lesson-admin-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
}

.lesson-admin-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.lesson-admin-card__title {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.lesson-admin-card__title strong {
  display: block;
  color: var(--ink);
}

.lesson-admin-card__meta {
  padding-left: 42px;
}

.lesson-edit,
.lesson-create {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.lesson-create h4 {
  margin: 0;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
}

.admin-editor .check-row {
  display: inline-flex;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.public-module {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.public-module h2 {
  margin: 0;
  font-size: 1.15rem;
}

.lesson-description {
  display: block;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}

.lesson-description:empty {
  display: none;
}

.lesson-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.lesson-player {
  overflow: hidden;
}

.lesson-header,
.lesson-copy,
.lesson-complete-actions,
.lesson-pagination {
  padding: 24px;
}

.lesson-header {
  display: grid;
  gap: 10px;
}

.lesson-header h1 {
  margin: 0;
  font-size: 2.3rem;
  line-height: 1.08;
}

.lesson-video {
  display: grid;
  min-height: 280px;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.lesson-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-video__empty {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  background: var(--mint);
}

.lesson-video__empty p {
  margin: 0;
  color: var(--muted);
}

.lesson-copy {
  border-top: 1px solid var(--line);
}

.lesson-copy h2 {
  margin: 0;
  font-size: 1.2rem;
}

.lesson-copy p {
  margin: 10px 0 0;
  color: var(--muted);
}

.lesson-complete-actions,
.lesson-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.lesson-complete-actions form {
  margin: 0;
}

.lesson-pagination {
  justify-content: space-between;
}

.status-pill {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 900;
}

.status-pill--success {
  border-color: rgba(47, 122, 95, 0.28);
  background: var(--mint);
  color: var(--leaf-dark);
}

.status-badge {
  display: inline-grid;
  min-height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-action .status-badge {
  color: inherit;
  font-size: 0.78rem;
}

.status-badge--published {
  border-color: rgba(47, 122, 95, 0.28);
  background: var(--mint);
  color: var(--leaf-dark);
}

.admin-action .status-badge--published {
  color: var(--leaf-dark);
}

.status-badge--draft {
  border-color: rgba(180, 77, 61, 0.24);
  background: var(--clay-soft);
  color: #873628;
}

.admin-action .status-badge--draft {
  color: #873628;
}

.status-badge--scheduled {
  border-color: rgba(182, 138, 60, 0.34);
  background: #f4ead8;
  color: #76571f;
}

.launch-notify-box {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.launch-notify-box h2,
.launch-notify-box p {
  margin: 0;
}

.launch-notify-box p:not(.eyebrow) {
  color: var(--muted);
}

.my-courses-list {
  display: grid;
  gap: 18px;
}

.my-learning-page .section__inner {
  display: grid;
  gap: 24px;
}

.learning-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 28px;
  align-items: end;
  padding: 28px;
}

.learning-hero__copy h1,
.learning-hero__copy p {
  margin: 0;
}

.learning-hero__copy h1 {
  margin-top: 4px;
  font-size: 3rem;
  line-height: 1.04;
}

.learning-hero__copy p:not(.eyebrow) {
  max-width: 640px;
  margin-top: 12px;
  color: var(--muted);
}

.learning-hero__copy .card-actions {
  margin-top: 18px;
}

.learning-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.learning-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 14px;
}

.learning-summary strong {
  font-size: 1.8rem;
  line-height: 1;
}

.learning-summary small {
  color: var(--muted);
  font-weight: 900;
}

.learning-next-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.learning-next-card__image {
  min-height: 320px;
  background: var(--sky);
}

.learning-next-card__image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.learning-next-card__body {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 28px;
}

.learning-next-card__body h2,
.learning-next-card__body p {
  margin: 0;
}

.learning-next-card__body h2 {
  max-width: 620px;
  font-size: 2rem;
  line-height: 1.08;
}

.learning-next-card__body p:not(.eyebrow) {
  color: var(--muted);
}

.learning-section {
  display: grid;
  gap: 18px;
}

.my-courses-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-course-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.my-course-card__image {
  display: block;
  min-height: 100%;
  background: var(--sky);
}

.my-course-card__image img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.my-course-card__body {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.my-course-card__body h2,
.my-course-card__body p {
  margin: 0;
}

.my-course-card__body p {
  color: var(--muted);
}

.editor-status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px;
}

.editor-status-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.editorial-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.editorial-status-card {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.editorial-status-card div {
  display: grid;
  gap: 2px;
}

.editorial-status-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.editorial-status-card span:not(.tag) {
  color: var(--muted);
  font-weight: 800;
}

.lesson-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 18px;
}

.lesson-progress-card,
.lesson-nav-panel {
  padding: 20px;
}

.lesson-progress-card h2,
.lesson-nav-panel h2 {
  margin: 0;
}

.lesson-progress-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.lesson-nav-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.lesson-nav-module {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-nav-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.lesson-nav-item span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--mint);
  color: var(--leaf-dark);
  font-size: 0.75rem;
  font-weight: 900;
}

.lesson-nav-item strong {
  font-size: 0.92rem;
}

.lesson-nav-item.is-active {
  border-color: rgba(47, 122, 95, 0.5);
  box-shadow: 0 10px 24px rgba(5, 5, 5, 0.08);
}

.lesson-nav-item.is-complete span {
  background: var(--leaf);
  color: var(--surface);
}

.lesson-nav-item.is-locked {
  color: var(--muted);
  background: #fbfaf7;
}

.lesson-nav-item.is-locked span {
  background: var(--line);
  color: var(--muted);
}

.faith-hero {
  height: 425px;
  min-height: 425px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(247, 247, 242, 1) 0%, rgba(247, 247, 242, 0.96) 42%, rgba(247, 247, 242, 0.22) 76%),
    #f7f7f2;
}

.faith-hero__inner {
  display: grid;
  grid-template-columns: minmax(330px, 0.64fr) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
  align-items: center;
}

.faith-hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 560px;
}

.faith-hero__copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: 2.72rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.faith-hero__copy p {
  max-width: 500px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
}

.faith-hero__copy .hero__actions {
  margin-top: 18px;
}

.faith-hero__media {
  position: relative;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
  background: transparent;
}

.faith-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(247, 247, 242, 1) 0%, rgba(247, 247, 242, 0.98) 10%, rgba(247, 247, 242, 0.78) 25%, rgba(247, 247, 242, 0.18) 48%, rgba(247, 247, 242, 0.02) 100%),
    linear-gradient(0deg, rgba(247, 247, 242, 0.12), rgba(247, 247, 242, 0.12));
  pointer-events: none;
}

.faith-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.74) 26%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.74) 26%, #000 44%);
}

.faith-hero-widget {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: min(230px, 46%);
  border: 1px solid rgba(221, 216, 207, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
  box-shadow: 0 12px 30px rgba(5, 5, 5, 0.12);
}

a.faith-hero-widget {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

a.faith-hero-widget:hover,
a.faith-hero-widget:focus-visible {
  border-color: rgba(47, 122, 95, 0.38);
  box-shadow: 0 16px 34px rgba(5, 5, 5, 0.16);
  transform: translateY(-1px);
}

.faith-hero-widget span,
.faith-hero-widget small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.faith-hero-widget strong {
  color: var(--ink);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.88rem;
  line-height: 1.25;
}

.faith-hero-widget--progress {
  top: 22px;
  right: 22px;
}

.faith-hero-widget--progress small {
  justify-self: end;
  max-width: 100%;
  text-align: right;
}

.faith-hero-widget--recommend {
  top: 124px;
  right: 22px;
}

.faith-hero-widget--conversation {
  right: 22px;
  bottom: 22px;
}

.faith-section .section-header h2 {
  font-size: 1.45rem;
}

.faith-topic-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.faith-topic-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(5, 5, 5, 0.05);
}

.faith-topic-card span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: 18px 18px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--orange);
  font-weight: 900;
}

.faith-topic-card strong {
  padding: 12px 18px 16px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.18;
}

.faith-topic-card img {
  width: 100%;
  height: 120px;
  align-self: end;
  object-fit: cover;
}

.faith-spotlight {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.faith-spotlight__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
  max-width: 1240px;
  min-height: 360px;
  margin: 0 auto;
}

.faith-spotlight__copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  padding: 48px 24px;
}

.faith-spotlight__copy h2 {
  max-width: 560px;
  margin: 0;
  font-size: 2.55rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.faith-spotlight__copy p {
  max-width: 560px;
  margin: 14px 0 0;
  color: rgba(247, 247, 242, 0.78);
}

.faith-spotlight__copy ul {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.faith-spotlight__copy li::before {
  content: "✓";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--orange);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
}

.faith-spotlight__copy .button {
  justify-self: start;
  margin-top: 24px;
}

.faith-spotlight__inner > img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  opacity: 0.78;
}

.faith-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.75fr));
  gap: 18px;
}

.faith-reading-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.faith-reading-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.faith-reading-card div {
  padding: 16px;
}

.faith-reading-card h3,
.faith-reading-card p {
  margin: 8px 0 0;
}

.faith-reading-card p {
  color: var(--muted);
}

.faith-reading-card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 800;
}

.faith-reading-card--featured {
  display: grid;
  grid-template-rows: 1fr auto;
}

.faith-reading-card--featured h3 {
  font-size: 1.35rem;
}

.faith-community {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr) 260px;
  gap: 24px;
  align-items: center;
}

.faith-community__intro h2,
.faith-community__intro p,
.faith-community__topics h3 {
  margin: 0;
}

.faith-community__intro p {
  margin-top: 12px;
  color: var(--muted);
}

.faith-community__intro .button {
  margin-top: 22px;
}

.faith-community__feed {
  display: grid;
  gap: 10px;
}

.faith-feed-row {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 12px;
}

.faith-feed-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.faith-feed-row span,
.faith-community__topics li {
  color: var(--muted);
}

.faith-community__topics ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 20px;
  padding-left: 18px;
}

.faith-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.faith-steps div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  border-right: 1px solid var(--line);
  padding-right: 24px;
}

.faith-steps div:last-child {
  border-right: 0;
}

.faith-steps span {
  display: grid;
  width: 60px;
  height: 60px;
  grid-row: span 2;
  place-items: center;
  border-radius: 999px;
  background: #eeece6;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 900;
}

.faith-steps strong {
  font-size: 1.15rem;
}

.faith-steps p {
  margin: 0;
  color: var(--muted);
}

.faith-membership .tier {
  min-height: 260px;
}

.faith-membership__featured {
  border-color: rgba(194, 119, 24, 0.5);
  box-shadow: 0 16px 42px rgba(194, 119, 24, 0.12);
}

.faith-vision {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  background: var(--ink);
  color: var(--paper);
}

.faith-vision img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.faith-vision div {
  display: grid;
  align-content: center;
  padding: 48px max(24px, calc((100vw - 1240px) / 2 + 24px)) 48px 48px;
}

.faith-vision h2,
.faith-vision p {
  max-width: 620px;
  margin: 0;
}

.faith-vision h2 {
  font-size: 2rem;
  line-height: 1.15;
}

.faith-vision p:not(.eyebrow) {
  margin-top: 16px;
  color: rgba(247, 247, 242, 0.76);
}

.faith-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.75fr);
  gap: 24px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(247, 247, 242, 0.18);
  padding: 34px max(24px, calc((100vw - 1240px) / 2 + 24px));
}

.faith-newsletter h2 {
  max-width: 560px;
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
}

.faith-newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.home-showcase {
  padding-bottom: 28px;
}

.home-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.82fr);
  gap: 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 34px;
  box-shadow: var(--shadow);
}

.home-hero-copy h1 {
  max-width: 620px;
  margin: 0;
  font-size: 3.6rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.home-hero-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 18px 0 0;
  color: rgba(247, 247, 242, 0.78);
  font-size: 1.06rem;
}

.home-hero-card .button--ghost {
  border-color: rgba(247, 247, 242, 0.45);
  background: transparent;
  color: var(--paper);
}

.home-hero-media {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(247, 247, 242, 0.14);
  border-radius: 8px;
  background: #000000;
}

.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-area-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-top: 18px;
}

.home-area-tile {
  display: grid;
  gap: 6px;
  min-height: 118px;
  border-right: 1px solid var(--line);
  padding: 18px;
}

.home-area-tile:last-child {
  border-right: 0;
}

.home-area-tile span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: var(--mint);
  color: var(--leaf-dark);
  font-weight: 900;
}

.home-area-tile strong {
  display: block;
  font-size: 0.92rem;
}

.home-area-tile small {
  color: var(--muted);
  font-weight: 700;
}

.home-area-tile:hover {
  background: #fbfaf7;
}

.home-section .section-header {
  margin-bottom: 22px;
}

.home-support-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 28px;
  align-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 28px;
}

.home-support-band h2,
.home-support-band p {
  margin: 0;
}

.home-support-band p:not(.eyebrow) {
  margin-top: 8px;
  color: rgba(247, 247, 242, 0.74);
}

.home-support-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 12px;
}

.home-support-stats span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(247, 247, 242, 0.14);
  border-radius: 8px;
  padding: 12px;
  color: rgba(247, 247, 242, 0.74);
  font-size: 0.86rem;
}

.home-support-stats strong {
  color: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
}

.blog-index__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.blog-sort {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.blog-sort .search {
  min-width: 0;
  width: 100%;
}

.blog-tabs {
  margin-bottom: 24px;
}

.blog-index__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.blog-index__main,
.blog-list,
.blog-sidebar,
.blog-popular-list,
.blog-sidebar-list {
  display: grid;
  gap: 14px;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.75fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.blog-featured-card__body {
  display: grid;
  align-content: center;
  padding: 28px;
}

.blog-featured-card h2 {
  max-width: 520px;
  margin: 12px 0 0;
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.blog-featured-card p {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--muted);
}

.blog-featured-card__image {
  display: block;
  min-height: 300px;
  background: var(--sky);
}

.blog-featured-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-list-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.blog-list-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sky);
}

.blog-list-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-list-card h3 {
  margin: 8px 0 0;
  font-size: 1.1rem;
}

.blog-list-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.blog-sidebar {
  position: sticky;
  top: 94px;
}

.blog-sidebar-card,
.blog-submit-card {
  padding: 18px;
}

.blog-sidebar-card h2,
.blog-submit-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.blog-sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  color: var(--muted);
  font-weight: 800;
}

.blog-sidebar-list a:last-child {
  border-bottom: 0;
}

.blog-sidebar-list strong {
  color: var(--ink);
}

.blog-popular-list a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.blog-popular-list img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.blog-popular-list strong,
.blog-popular-list small {
  display: block;
}

.blog-popular-list strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
}

.blog-popular-list small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.blog-submit-card {
  background: #fbfaf7;
}

.blog-submit-card p:not(.eyebrow) {
  color: var(--muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.breadcrumb a {
  color: var(--leaf-dark);
}

.course-public-page .course-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.course-detail--learning {
  overflow: hidden;
}

.course-detail--learning .course-detail__media {
  aspect-ratio: 16 / 7.2;
  border-bottom: 1px solid var(--line);
}

.course-detail--learning .course-detail__body {
  display: grid;
  gap: 18px;
  padding: 30px;
}

.course-detail--learning .course-detail__body > * {
  margin-top: 0;
}

.course-detail--learning h1 {
  max-width: 780px;
  margin: 0;
}

.course-detail--learning .rich-content {
  max-width: 760px;
}

.course-detail--learning .card-actions {
  margin-top: 0;
}

.course-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.course-section-heading h2,
.course-section-heading p {
  margin: 0;
}

.course-section-heading h2 {
  font-size: 1.7rem;
  line-height: 1.1;
}

.course-section-heading > span {
  color: var(--muted);
  font-weight: 900;
}

.lesson-list--public {
  margin-top: 0;
}

.lesson-list--public .public-module {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.lesson-list--public .public-module h2 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
  padding: 14px 16px;
  font-size: 1rem;
}

.lesson-list--public .lesson-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}

.lesson-list--public .lesson-row:last-child {
  border-bottom: 0;
}

.lesson-list--public .lesson-row--locked {
  background: #fbfaf7;
}

.course-sidebar {
  display: grid;
  gap: 18px;
}

.course-sidebar .contribution-box,
.course-sidebar .panel {
  border-radius: 8px;
}

.profile-layout--wide {
  grid-template-columns: minmax(0, 1fr);
}

.profile-layout--wide .profile-hero-card {
  position: static;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(221, 216, 207, 0.88);
}

.profile-layout--wide .profile-identity {
  align-items: center;
}

.profile-layout--wide .profile-bio,
.profile-layout--wide .social-links,
.profile-layout--wide .profile-actions {
  grid-column: 1;
}

.profile-layout--wide .profile-meta {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}

.profile-layout--wide .profile-stats {
  grid-column: 1 / -1;
}

.profile-main-panel {
  display: grid;
  gap: 18px;
}

.admin-dashboard-page {
  padding-bottom: 24px;
}

.admin-dashboard-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.admin-dashboard-title p {
  max-width: 620px;
}

.admin-dashboard-page .stat-card,
.admin-dashboard-page .dashboard-card,
.admin-dashboard-page .admin-lane {
  border-color: rgba(221, 216, 207, 0.86);
}

.admin-dashboard-page .stat-card h2 {
  color: var(--ink);
}

.admin-dashboard-page .dashboard-card .tag,
.admin-dashboard-page .stat-card .tag {
  width: fit-content;
}

.footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  padding: 32px 24px;
}

.footer__inner {
  display: flex;
  max-width: 1240px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer p {
  margin: 6px 0 0;
  color: rgba(247, 247, 242, 0.72);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 5, 0.68);
  padding: 20px;
}

.modal {
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal__head,
.modal__body,
.modal__foot {
  padding: 20px;
}

.modal__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.modal__body {
  display: grid;
  gap: 16px;
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.preview-modal {
  width: min(100%, 1240px);
}

.preview-modal .modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.preview-modal .modal__body {
  padding: 0;
  background: var(--paper);
}

.preview-close-button {
  flex: 0 0 auto;
  font-weight: 900;
}

.preview-public-section .contribution-box {
  position: static;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: 360px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.empty-state {
  padding: 28px;
  text-align: center;
}

.flash-wrap {
  position: fixed;
  top: 86px;
  right: 24px;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
}

.alert {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-weight: 800;
}

.alert--success {
  border-color: #badcc8;
  background: var(--mint);
  color: var(--leaf-dark);
}

.alert--error {
  border-color: #e8b6ad;
  background: var(--rose);
  color: #7c2f25;
}

.alert--warning {
  border-color: #ead4a5;
  background: #fff7e4;
  color: #76571f;
}

.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

.auth-card,
.admin-form,
.mini-form {
  display: grid;
  gap: 12px;
}

.admin-form textarea {
  min-height: 100px;
  resize: vertical;
}

.mini-form input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-form .tab,
.mini-form .amount-button {
  position: relative;
  justify-content: center;
}

.support-box {
  position: static;
  margin-bottom: 18px;
  box-shadow: none;
}

.text-link {
  color: var(--leaf-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-menu {
  display: none;
}

svg {
  flex: 0 0 auto;
}

@media (max-width: 1040px) {
  .topbar__inner {
    grid-template-columns: 1fr auto;
  }

  .brand--has-logo {
    width: min(210px, 42vw);
  }

  .brand__logo {
    height: 48px;
  }

  .nav {
    grid-column: 1 / -1;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .hero__inner,
  .faith-hero__inner,
  .faith-spotlight__inner,
  .faith-community,
  .faith-vision,
  .faith-newsletter,
  .home-hero-card,
  .blog-index__head,
  .blog-index__layout,
  .blog-featured-card,
  .split,
  .course-layout,
  .lesson-page-layout,
  .profile-layout,
  .auth-grid {
    grid-template-columns: 1fr;
  }

  .hero__side,
  .contribution-box,
  .lesson-sidebar,
  .profile-hero-card,
  .blog-sidebar {
    position: static;
  }

  .course-public-page .course-layout {
    grid-template-columns: 1fr;
  }

  .course-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--four,
  .impact,
  .lms-summary-grid,
  .faith-topic-grid,
  .faith-reading-grid,
  .home-area-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--three,
  .tiers,
  .admin-grid,
  .editorial-status-grid,
  .my-course-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-area-tile {
    border-bottom: 1px solid var(--line);
  }

  .home-area-tile:nth-child(2n) {
    border-right: 0;
  }

  .home-support-band {
    grid-template-columns: 1fr;
  }

  .faith-hero {
    height: auto;
    min-height: 0;
  }

  .faith-hero__inner {
    height: auto;
    padding-top: 36px;
  }

  .faith-hero__media {
    min-height: 360px;
    border-radius: 8px;
  }

  .faith-hero__media img {
    min-height: 360px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .faith-hero-widget {
    width: min(220px, 44%);
  }

  .faith-spotlight__copy {
    padding: 36px 24px;
  }

  .faith-vision div {
    padding: 36px 24px;
  }

  .faith-newsletter {
    grid-template-columns: 1fr;
  }

  .learning-hero,
  .learning-next-card,
  .my-courses-list--grid {
    grid-template-columns: 1fr;
  }

  .learning-next-card__image,
  .learning-next-card__image img {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  .topbar__inner {
    gap: 10px;
    padding: 12px 16px;
  }

  .brand--has-logo {
    width: min(170px, 44vw);
  }

  .brand__logo {
    height: 42px;
  }

  .topbar__actions {
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
  }

  .topbar__actions .button {
    min-width: 40px;
    padding: 0 10px;
  }

  .nav {
    margin-inline: -16px;
    overflow-x: auto;
    padding: 0 16px 6px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav__button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.88rem;
  }

  .brand__tagline {
    display: none;
  }

  .section {
    padding: 34px 16px;
  }

  .section--tight {
    padding-top: 22px;
  }

  .hero,
  .hero__inner {
    min-height: auto;
  }

  .hero__inner {
    padding: 48px 16px 32px;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .page-title h1,
  .reader h1,
  .course-detail h1,
  .lesson-header h1 {
    font-size: 2rem;
  }

  .section-header,
  .footer__inner,
  .module-heading,
  .lesson-admin-card__head,
  .editor-disclosure summary {
    align-items: start;
    flex-direction: column;
  }

  .comments-header,
  .comment-form-footer,
  .comment-admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-actions {
    justify-content: flex-start;
  }

  .metric-strip,
  .faith-hero__inner,
  .faith-topic-grid,
  .faith-spotlight__inner,
  .faith-reading-grid,
  .faith-community,
  .faith-steps,
  .faith-vision,
  .faith-newsletter__form,
  .home-area-strip,
  .home-support-stats,
  .blog-list-card,
  .grid--two,
  .grid--three,
  .grid--four,
  .tiers,
  .impact,
  .admin-grid,
  .media-grid,
  .lms-summary-grid,
  .editorial-status-grid,
  .editorial-status-card,
  .my-course-card,
  .launch-admin-row,
  .email-log-row,
  .comment-admin-row,
  .comment-filter-row,
  .user-admin-activity,
  .user-admin-role-form,
  .contribution-amount-row,
  .category-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-card {
    padding: 20px;
  }

  .faith-hero {
    height: auto;
    min-height: 0;
  }

  .faith-hero__inner {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 22px 16px 40px;
    align-items: start;
  }

  .faith-hero__copy {
    max-width: 340px;
    align-self: start;
    padding-top: 2px;
  }

  .faith-hero__copy h1 {
    max-width: 330px;
    font-size: 2.02rem;
    line-height: 1.03;
  }

  .faith-hero__copy p {
    margin-top: 10px;
    font-size: 0.98rem;
  }

  .faith-hero__copy .hero__actions {
    gap: 8px;
    margin-top: 12px;
  }

  .faith-hero__copy .button {
    min-height: 40px;
    padding: 0 14px;
  }

  .faith-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    border-radius: 0;
  }

  .faith-hero__media::before {
    display: block;
    background:
      linear-gradient(90deg, rgba(247, 247, 242, 0.98) 0%, rgba(247, 247, 242, 0.9) 38%, rgba(247, 247, 242, 0.58) 64%, rgba(247, 247, 242, 0.22) 100%),
      linear-gradient(0deg, rgba(247, 247, 242, 0.26), rgba(247, 247, 242, 0.26));
  }

  .faith-hero__media img {
    height: 100%;
    min-height: 0;
    object-position: center right;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .faith-hero-widget {
    display: none;
  }

  .faith-topic-card {
    min-height: 220px;
  }

  .faith-spotlight__copy h2,
  .faith-newsletter h2 {
    font-size: 1.8rem;
  }

  .faith-community__topics .button,
  .faith-newsletter__form .button {
    width: 100%;
  }

  .faith-steps div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 18px;
  }

  .faith-steps div:last-child {
    border-bottom: 0;
  }

  .faith-vision img {
    min-height: 220px;
  }

  .faith-spotlight__inner > img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    opacity: 1;
  }

  .home-hero-copy h1 {
    font-size: 2.5rem;
  }

  .home-hero-media {
    aspect-ratio: 16 / 11;
  }

  .learning-hero {
    padding: 22px;
  }

  .learning-hero__copy h1 {
    font-size: 2.25rem;
  }

  .learning-summary,
  .my-course-card {
    grid-template-columns: 1fr;
  }

  .my-course-card__image img {
    min-height: 210px;
  }

  .home-area-tile {
    min-height: auto;
    border-right: 0;
  }

  .blog-sort {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-featured-card__body {
    padding: 20px;
  }

  .blog-featured-card__image {
    min-height: 220px;
  }

  .blog-featured-card h2 {
    font-size: 1.55rem;
  }

  .course-detail--learning .course-detail__body {
    padding: 22px;
  }

  .reader__body,
  .course-detail__body {
    padding: 22px 18px;
  }

  .reader__hero,
  .course-detail__media,
  .course-detail--learning .course-detail__media {
    aspect-ratio: 16 / 9;
  }

  .course-section-heading {
    align-items: start;
    flex-direction: column;
  }

  .course-sidebar,
  .profile-layout--wide .profile-hero-card {
    grid-template-columns: 1fr;
  }

  .profile-layout--wide .profile-meta,
  .profile-layout--wide .profile-bio,
  .profile-layout--wide .social-links,
  .profile-layout--wide .profile-actions,
  .profile-layout--wide .profile-stats {
    grid-column: auto;
    grid-row: auto;
  }

  .admin-dashboard-title {
    align-items: start;
    flex-direction: column;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    min-width: 0;
    width: 100%;
  }

  .card-actions,
  .lesson-complete-actions,
  .post__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .card-actions .button,
  .card-actions form,
  .card-actions form .button,
  .lesson-complete-actions .button,
  .lesson-complete-actions form,
  .lesson-complete-actions form .button,
  .post__actions .button,
  .post__actions form,
  .post__actions form .button {
    width: 100%;
  }

  .lesson-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .lesson-time {
    grid-column: 2;
  }

  .lesson-admin-card__meta {
    padding-left: 0;
  }

  .lesson-header,
  .lesson-copy,
  .lesson-complete-actions,
  .lesson-pagination {
    padding: 20px;
  }

  .lesson-video {
    min-height: 220px;
  }

  .lesson-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .profile-identity,
  .profile-actions,
  .profile-feed-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }

  .profile-stats div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .admin-row,
  .admin-row__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-action {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .flash-wrap {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .brand--has-logo {
    width: min(140px, 38vw);
  }

  .brand__logo {
    height: 36px;
  }

  .icon-button,
  .top-user {
    width: 36px;
    height: 36px;
  }

  .topbar__actions .button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.82rem;
  }

  .page-title h1,
  .reader h1,
  .course-detail h1,
  .lesson-header h1 {
    font-size: 1.82rem;
  }
}