/* Preserve the photo-series and channel-publishing scenes at each reader width. */
.aca-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 18px 48px 12px;
  background: #121c19;
  color: #f0f3e9;
  font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.aca-page *,
.aca-page *::before,
.aca-page *::after { box-sizing: border-box; }

.aca-page :where(h1, h2, h3, h4, p, figure, ol) { margin: 0; }
.aca-page :where(section, div, figure, li) { min-width: 0; }
.aca-page :where(ol) { padding: 0; list-style: none; }

.aca-page .aca-kicker {
  color: #c2b8ff;
  font-size: 11px;
  font-weight: 550;
  line-height: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.aca-page .aca-title {
  margin-top: 10px;
  font-size: 64px;
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -.06em;
}

.aca-page .aca-title-accent,
.aca-page .aca-photo-accent { color: #d0f5a5; }
.aca-page .aca-channel-accent { color: #c2b8ff; }
.aca-page .aca-benefits { margin-top: 22px; }

.aca-page .aca-benefit {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}

.aca-page .aca-intro { padding-top: 9px; }

.aca-page .aca-benefit-title {
  font-size: 29px;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.04em;
}

.aca-page .aca-copy {
  max-width: 34ch;
  margin-top: 12px;
  color: #d5dfd7;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -.01em;
}

.aca-page .aca-profile-label { display: flex; align-items: baseline; gap: 12px; }
.aca-page .aca-profile-name { font-size: 16px; font-weight: 550; line-height: 20px; }

.aca-page .aca-profile-detail {
  padding-left: 12px;
  border-left: 1px solid #35453d;
  color: #a2b0a8;
  font-size: 12px;
  line-height: 16px;
}

.aca-page .aca-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.aca-page .aca-photo {
  display: block;
  min-width: 0;
  border-radius: 10px;
  color: #f0f3e9;
  text-decoration: none;
  cursor: zoom-in;
}

.aca-page .aca-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: inherit;
}

.aca-page .aca-photo:hover { outline: 1px solid #d0f5a5; outline-offset: 3px; }
.aca-page .aca-photo:focus-visible { outline: 2px solid #d0f5a5; outline-offset: 4px; }
.aca-page .aca-photo-caption { margin-top: 8px; color: #a2b0a8; font-size: 11px; line-height: 16px; }

.aca-page .aca-benefit-channels {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #35453d;
}

.aca-page .aca-channel-output,
.aca-page .aca-channel-caption {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
  gap: 16px;
}

.aca-page .aca-owners,
.aca-page .aca-posts {
  padding: 14px 16px;
  border-radius: 12px;
  color: #121c19;
}

.aca-page .aca-owners { background: #f0f3e9; }
.aca-page .aca-posts { background: #e7e2f4; }
.aca-page .aca-output-title { color: #35453d; font-size: 12px; font-weight: 550; line-height: 17px; text-align: left; }

.aca-page .aca-channel-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.aca-page .aca-channel-table caption { padding-bottom: 8px; }
.aca-page .aca-channel-table th { text-align: left; }
.aca-page .aca-channel-table thead th { padding: 0 0 7px; color: #627167; font-size: 10px; font-weight: 400; line-height: 13px; }
.aca-page .aca-channel-table thead th:first-child { width: 34%; }
.aca-page .aca-channel-table thead th:last-child { padding-left: 30px; }

.aca-page .aca-channel-table tbody th,
.aca-page .aca-channel-table tbody td {
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
}

.aca-page .aca-channel-table tbody tr + tr { border-top: 1px solid #d5ddd0; }
.aca-page .aca-owner { display: flex; align-items: center; gap: 8px; }

.aca-page .aca-monogram {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 550;
  line-height: 16px;
}

.aca-page .aca-monogram-marina { background: #dce8cb; color: #425a32; }
.aca-page .aca-monogram-ilya { background: #e0dbf1; color: #655087; }
.aca-page .aca-monogram-anna { background: #e7dccd; color: #756048; }
.aca-page .aca-channel-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 8px; }
.aca-page .aca-link-arrow { display: block; width: 22px; height: 16px; color: #82917f; }
.aca-page .aca-selected { display: block; width: 18px; height: 18px; color: #d0f5a5; }

.aca-page .aca-post-list { display: grid; gap: 8px; margin-top: 10px; }

.aca-page .aca-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f5fc;
}

.aca-page .aca-post-title { font-size: 14px; font-weight: 550; line-height: 19px; letter-spacing: -.015em; }
.aca-page .aca-post-text { margin-top: 2px; color: #637067; font-size: 12px; line-height: 17px; }
.aca-page .aca-post-time { padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 550; line-height: 16px; white-space: nowrap; }
.aca-page .aca-post-now { background: #d0f5a5; color: #253a1c; }
.aca-page .aca-post-later { background: #dcd5f5; color: #55407c; }
.aca-page .aca-channel-caption { align-items: center; margin-top: 9px; }
.aca-page .aca-illustration { color: #a2b0a8; font-size: 11px; line-height: 18px; }
.aca-page .aca-schedule-condition { display: flex; align-items: center; gap: 7px; color: #d5dfd7; font-size: 12px; line-height: 18px; }
.aca-page .aca-clock { display: block; flex: none; width: 16px; height: 16px; color: #c2b8ff; }

.aca-page .aca-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid #43563b;
  border-radius: 10px;
  background: #1b2920;
  color: #f0f3e9;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.aca-page .aca-fields-label { color: #d0f5a5; font-weight: 650; white-space: nowrap; }
.aca-page .aca-fields-references { color: #c2b8ff; }

@container reader (max-width: 1200px) {
  .aca-page { padding: 18px 28px 12px; }
  .aca-page .aca-title { font-size: 54px; }
  .aca-page .aca-benefits { margin-top: 14px; }
  .aca-page .aca-benefit { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
  .aca-page .aca-benefit-title { font-size: 26px; }
  .aca-page .aca-channel-output, .aca-page .aca-channel-caption { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .aca-page .aca-owners, .aca-page .aca-posts { padding: 12px; }
  .aca-page .aca-channel-table thead th:first-child { width: 40%; }
  .aca-page .aca-channel-table thead th:last-child { padding-left: 18px; }
  .aca-page .aca-channel-link { grid-template-columns: 14px minmax(0, 1fr) 18px; gap: 4px; }
  .aca-page .aca-link-arrow { width: 14px; }
  .aca-page .aca-owner { gap: 6px; }
  .aca-page .aca-post { gap: 8px; padding: 8px 10px; }
  .aca-page .aca-post-time { justify-self: start; }
  .aca-page .aca-fields { gap: 4px 18px; }
}

@container reader (max-width: 850px) {
  .aca-page { padding: 26px 24px 32px; }
  .aca-page .aca-title { font-size: 48px; }
  .aca-page .aca-benefit { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aca-page .aca-benefit-title { font-size: 29px; }
  .aca-page .aca-intro { padding: 0; }
  .aca-page .aca-copy { max-width: 48ch; font-size: 17px; line-height: 1.5; }
  .aca-page .aca-benefit-channels { margin-top: 30px; padding-top: 24px; }
  .aca-page .aca-channel-output { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .aca-page .aca-channel-caption { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .aca-page .aca-owners, .aca-page .aca-posts { padding: 16px; }
  .aca-page .aca-output-title { font-size: 14px; line-height: 20px; }
  .aca-page .aca-channel-table thead th { font-size: 12px; line-height: 17px; }
  .aca-page .aca-channel-table tbody th, .aca-page .aca-channel-table tbody td { font-size: 15px; line-height: 22px; }
  .aca-page .aca-post { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 8px; }
  .aca-page .aca-post-title { font-size: 16px; line-height: 22px; }
  .aca-page .aca-post-text { font-size: 14px; line-height: 21px; }
  .aca-page .aca-post-time { font-size: 13px; line-height: 18px; }
  .aca-page .aca-photo-caption, .aca-page .aca-illustration { font-size: 13px; line-height: 20px; }
  .aca-page .aca-schedule-condition { font-size: 14px; line-height: 21px; }
  .aca-page .aca-fields { margin-top: 24px; padding: 14px 16px; font-size: 16px; line-height: 24px; }
}

@container reader (max-width: 500px) {
  .aca-page { padding-inline: 20px; }
  .aca-page .aca-title { font-size: 42px; }
  .aca-page .aca-title-accent { display: block; }
  .aca-page .aca-benefits { margin-top: 26px; }
  .aca-page .aca-photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aca-page .aca-fields { align-items: flex-start; gap: 8px; }
  .aca-page .aca-fields-label { flex-basis: 100%; }
}

@container reader (max-width: 360px) {
  .aca-page { padding-inline: 16px; }
  .aca-page .aca-title { font-size: 38px; }
  .aca-page .aca-benefit-title { font-size: 27px; }
  .aca-page .aca-owners, .aca-page .aca-posts { padding: 12px; }
  .aca-page .aca-channel-table thead th:first-child { width: 42%; }
}
