/* v0.7 reading, archive and about modes. */
html[data-experience="reading"] #aside-content,
html[data-experience="archive"] #aside-content {
  display: none !important;
}

html[data-experience="reading"] #content-inner.layout {
  max-width: 1120px;
  padding: 12px 22px 0;
}

html[data-experience="reading"] #post,
html[data-experience="reading"] #content-inner.layout > #post {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-experience="reading"] #post #article-container {
  max-width: var(--ds-reading);
  margin: 0 auto;
  padding: clamp(28px,4vw,54px) clamp(22px,5vw,62px);
  border: 1px solid var(--skin-border);
  border-radius: 26px;
  background: color-mix(in srgb,var(--skin-card) 84%,transparent);
  box-shadow: 0 18px 54px rgba(41,58,49,.105);
  backdrop-filter: blur(calc(var(--skin-blur) * .72));
  -webkit-backdrop-filter: blur(calc(var(--skin-blur) * .72));
}

html[data-experience="reading"] #article-container p {
  color: var(--skin-text);
  font-size: 1.02rem;
  line-height: 2;
}

html[data-experience="reading"] #article-container h1,
html[data-experience="reading"] #article-container h2,
html[data-experience="reading"] #article-container h3 {
  color: var(--skin-text);
  letter-spacing: .025em;
}

html[data-experience="reading"] #article-container img {
  margin: 1.6rem auto;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(29,43,35,.12);
}

html[data-experience="reading"] #post .tag_share,
html[data-experience="reading"] #post .post-reward,
html[data-experience="reading"] #post #pagination,
html[data-experience="reading"] #post .relatedPosts {
  max-width: var(--ds-reading);
  margin-left: auto;
  margin-right: auto;
}

html[data-experience="archive"] #content-inner.layout {
  max-width: 1080px;
  padding: 12px 22px 0;
}

html[data-experience="archive"] #archive,
html[data-experience="archive"] #category,
html[data-experience="archive"] #tag,
html[data-experience="archive"] #content-inner.layout > #archive,
html[data-experience="archive"] #content-inner.layout > #category,
html[data-experience="archive"] #content-inner.layout > #tag {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-experience="archive"] .article-sort-title {
  margin: 0 0 .7rem !important;
  padding: 0;
  color: var(--skin-text);
  font-size: clamp(1.45rem,2.5vw,2.1rem);
}

html[data-experience="archive"] .article-sort-title::before,
html[data-experience="archive"] .article-sort-title::after {
  display: none !important;
}

html[data-experience="archive"] .article-sort {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

html[data-experience="archive"] .article-sort-item {
  gap: 18px;
  min-height: 112px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--skin-border);
  border-radius: 20px;
  background: color-mix(in srgb,var(--skin-card) 72%,transparent);
  box-shadow: var(--skin-shadow-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-experience="archive"] .article-sort-item::before {
  display: none !important;
}

html[data-experience="archive"] .article-sort-item.year {
  min-height: 0;
  padding: 1.2rem 0 .4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--skin-accent);
  font-size: 1.35rem;
  font-weight: 800;
}

html[data-experience="archive"] .article-sort-item-img {
  flex: 0 0 150px;
  width: 150px;
  height: 96px;
  border-radius: 15px;
}

html[data-experience="archive"] .article-sort-item-info {
  padding: 0;
}

html[data-experience="archive"] .article-sort-item-title {
  margin-top: .35rem;
  color: var(--skin-text);
  font-size: 1.12rem;
  font-weight: 650;
}

html[data-experience="archive"] .article-sort-item-time {
  color: var(--skin-muted);
}

html[data-experience="about"] #aside-content {
  display: none !important;
}

html[data-experience="about"] #content-inner.layout {
  max-width: 1180px;
  padding: 12px 22px 0;
}

html[data-experience="about"] #page,
html[data-experience="about"] #content-inner.layout > #page {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.about-shell {
  display: grid;
  gap: 1.3rem;
}

.about-hero {
  max-width: 820px;
  margin: 0 auto .55rem;
  padding: 0 10px;
  text-align: center;
}

.about-hero h2 {
  margin: .1rem 0 .35rem;
  color: var(--skin-text);
  font-size: clamp(1.45rem,2.25vw,2rem);
}

.about-hero p {
  margin: 0;
  color: var(--skin-muted);
  line-height: 1.65;
}

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

.about-card,
.about-note {
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb,var(--skin-card) 76%,transparent);
  box-shadow: var(--skin-shadow);
  backdrop-filter: blur(var(--skin-blur));
  -webkit-backdrop-filter: blur(var(--skin-blur));
}

.about-card {
  min-height: 190px;
  padding: 1.6rem;
  border-radius: 22px;
}

.about-card i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: color-mix(in srgb,var(--skin-accent) 13%,transparent);
  color: var(--skin-accent);
}

.about-card h3 {
  margin: 0 0 .55rem;
  color: var(--skin-text);
}

.about-card p {
  margin: 0;
  color: var(--skin-muted);
  line-height: 1.8;
}

.about-note {
  padding: 1.4rem 1.55rem;
  border-radius: 20px;
}

.about-note strong {
  color: var(--skin-text);
}

.about-note p {
  margin: .4rem 0 0;
  color: var(--skin-muted);
  line-height: 1.8;
}