/* Appreciation-wide reading polish. Loaded last and scoped to registered appreciation pages. */
@font-face {
  font-family: "Jianshang Appreciation Serif";
  src: url("fonts/jianshang-serif-complete-v64.woff2?v=20260913-1") format("woff2");
  font-style: normal;
  font-weight: 250 900;
  font-display: block;
}

body[data-appreciation-page="true"] {
  /* Restore the original article face shown in the approved reference. Apple
     devices (including QQ's iOS WebView) use their complete native Song face;
     the bundled face remains the reliable fallback elsewhere. */
  --appreciation-serif: "Songti SC", "STSong", "Jianshang Appreciation Serif", "Jianshang Serif", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --appreciation-copy-width: 820px;
  --appreciation-title-width: 1180px;
  --appreciation-media-width: 900px;
  overflow-x: clip;
  font-family: var(--appreciation-serif);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* The default reading choice follows the restored appreciation face. Keep the
   other reader-selected Kai, sans and FangSong choices unchanged. */
html[data-reading-font="serif"] body[data-appreciation-page="true"] {
  --reading-cn: var(--appreciation-serif);
  --reading-weight: 400;
}

html body[data-appreciation-page="true"] :where(h1, h2, h3, h4, h5, h6, .appreciation-feature-title, .section-title, .section-heading-nav, .conclusion-title, .subsection-kicker, .sub-kicker, .section-label) {
  font-family: var(--appreciation-serif) !important;
  font-synthesis: none !important;
}

html body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > :where(p, blockquote, ul, ol, figcaption),
html body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > :where(p, blockquote, ul, ol, figcaption) :where(span, strong, em, a) {
  font-family: var(--reading-cn, var(--appreciation-serif)) !important;
  font-synthesis: none !important;
}

body[data-appreciation-page="true"] :where(.hero, .masthead) h1 {
  width: min(calc(100% - 48px), var(--appreciation-title-width)) !important;
  max-width: var(--appreciation-title-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  font-size: clamp(40px, 5.4vw, 78px) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: .005em !important;
  text-align: center;
  text-wrap: balance;
  white-space: normal !important;
  overflow-wrap: normal;
}

body[data-appreciation-page="true"] :where(.hero .meta, .masthead .subtitle, .masthead .meta) {
  width: min(calc(100% - 48px), 920px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  color: var(--muted, #81796f);
  font-size: clamp(15px, 1.45vw, 18px) !important;
  line-height: 1.75 !important;
  letter-spacing: .025em !important;
  text-align: center;
  font-family: var(--appreciation-serif) !important;
  font-synthesis: none !important;
}

body[data-appreciation-page="true"] .hero .meta-main {
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
}

body[data-appreciation-page="true"] .hero .meta-note {
  margin-top: 7px !important;
  font-size: .86em !important;
  line-height: 1.7 !important;
  letter-spacing: .035em !important;
}

body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > :where(p, blockquote, ul, ol) {
  width: min(calc(100% - 48px), var(--appreciation-copy-width)) !important;
  max-width: var(--appreciation-copy-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > p {
  margin-top: 0 !important;
  margin-bottom: 1.35em !important;
  font-size: clamp(18px, 1.6vw, 21px) !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  letter-spacing: .012em !important;
  text-align: justify;
  text-justify: inter-character;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
  orphans: 3;
  widows: 3;
}

body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > p.lead {
  margin-bottom: 1.35em !important;
}

body[data-appreciation-page="true"] :where(blockquote, .quote, .interview-answer) {
  box-sizing: border-box;
  padding: 18px 22px;
  border-left: 2px solid color-mix(in srgb, var(--accent, #9f6658) 58%, transparent);
  color: color-mix(in srgb, var(--ink, #2d2925) 88%, var(--muted, #81796f));
  line-height: 1.9;
}

/*
 * Heading hierarchy:
 * - one opening theme title per article uses the centered long-rule treatment;
 * - all later major and minor headings retain the previously confirmed scheme.
 */
html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) {
  counter-reset: appreciation-section;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title) {
  box-sizing: border-box !important;
  width: min(calc(100% - 48px), var(--appreciation-copy-width)) !important;
  max-width: var(--appreciation-copy-width) !important;
  display: block !important;
  margin: 62px auto 30px !important;
  padding: 0 !important;
  transform: none !important;
  color: var(--ink, #2d2925) !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal !important;
  counter-increment: appreciation-section;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title)::before {
  content: "SECTION 0" counter(appreciation-section) !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 13px !important;
  transform: none !important;
  background: none !important;
  color: var(--accent, #9f6658) !important;
  font-family: ui-serif, Georgia, serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .26em !important;
  opacity: .92 !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title)::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 1px !important;
  margin: 20px auto 0 !important;
  transform: none !important;
  background: var(--accent, #9f6658) !important;
  opacity: .72 !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title {
  box-sizing: border-box !important;
  width: min(calc(100% - 48px), var(--appreciation-copy-width)) !important;
  max-width: var(--appreciation-copy-width) !important;
  display: grid !important;
  grid-template-columns: minmax(52px, 1fr) auto minmax(52px, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 52px auto 29px !important;
  padding: 0 !important;
  transform: none !important;
  color: var(--feature-accent, var(--accent, #9f6658)) !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title::before,
html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1px !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--feature-accent, var(--accent, #9f6658)) 62%, transparent)) !important;
  opacity: 1 !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--feature-accent, var(--accent, #9f6658)) 62%, transparent), transparent) !important;
}

/* Match the foreword drop cap to the opening theme title, without changing its typography. */
html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > p.lead:first-letter {
  color: var(--feature-accent, var(--accent, #9f6658)) !important;
}

body.night[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title,
body.night[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > p.lead:first-letter {
  color: var(--feature-accent-night, var(--accent, #d6a096)) !important;
}

body.night[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--feature-accent-night, var(--accent, #d6a096)) 62%, transparent)) !important;
}

body.night[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--feature-accent-night, var(--accent, #d6a096)) 62%, transparent), transparent) !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h3, .sub-kicker, .section-label):not(.appreciation-feature-title) {
  box-sizing: border-box !important;
  width: min(calc(100% - 48px), var(--appreciation-copy-width)) !important;
  max-width: var(--appreciation-copy-width) !important;
  display: block !important;
  margin: 48px auto 26px !important;
  padding: 0 !important;
  transform: none !important;
  color: var(--ink, #2d2925) !important;
  font-size: clamp(21px, 2.2vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h3, .sub-kicker, .section-label):not(.appreciation-feature-title)::before {
  content: none !important;
  display: none !important;
}

html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h3, .sub-kicker, .section-label):not(.appreciation-feature-title)::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 1px !important;
  margin: 15px auto 0 !important;
  transform: none !important;
  background: color-mix(in srgb, var(--line, rgba(120, 80, 65, .22)) 88%, transparent) !important;
}

body[data-appreciation-page="true"] :where(.eyebrow, .inline-label) {
  max-width: min(calc(100% - 48px), 820px);
  margin-right: auto;
  margin-left: auto;
  line-height: 1.6;
  text-wrap: balance;
}

body[data-appreciation-page="true"] main :where(img, video) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  border: 0 !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] main :where(.photo, figure, .gallery-spread, .gallery, .portrait-stack, .full-bleed) {
  box-sizing: border-box;
  width: min(calc(100vw - 40px), var(--appreciation-media-width)) !important;
  max-width: var(--appreciation-media-width) !important;
  margin-right: 0 !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] main :where(.photo.portrait, figure.portrait, .portrait-stack) {
  width: min(calc(100vw - 64px), 700px) !important;
  max-width: 700px !important;
}

body[data-appreciation-page="true"] main :where(.photo.small, figure.small) {
  width: min(calc(100vw - 80px), 620px) !important;
  max-width: 620px !important;
}

body[data-appreciation-page="true"] main :where(.image-frame) {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] main :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border: 0 !important;
  border-radius: 14px;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] main > :where(.photo, figure, .image-frame, .portrait-stack, .full-bleed) > img,
body[data-appreciation-page="true"] main > :where(.photo, figure, .portrait-stack, .full-bleed) > .image-frame > img {
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep multi-image compositions intact: only their outer group receives the wide measure. */
body[data-appreciation-page="true"] main :where(.photo-pair, .opening-pair, .paired-figures, .model-pair, .reaction-sequence) {
  box-sizing: border-box !important;
  width: min(calc(100vw - 40px), var(--appreciation-media-width)) !important;
  max-width: var(--appreciation-media-width) !important;
  margin-right: 0 !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

body[data-appreciation-page="true"] main :where(.photo-pair, .opening-pair, .paired-figures, .model-pair, .reaction-sequence, .gallery-spread, .gallery) figure {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

body[data-appreciation-page="true"].motion-ready main.article > figure.reveal,
body[data-appreciation-page="true"].motion-ready main.article > figure.reveal.in-view {
  transform: translateX(-50%) !important;
}

/* No.10 uses `.info` for a prose contents note rather than source facts. */
body[data-appreciation-page="true"] main.issue-no10 > .info p {
  margin: 0 0 .72em !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

body[data-appreciation-page="true"] main.issue-no10 > .info p:last-child {
  margin-bottom: 0 !important;
}

body[data-appreciation-page="true"] main > :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
  margin-top: 38px !important;
  margin-bottom: 42px !important;
}

body[data-appreciation-page="true"] main > :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed)
+ :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
  margin-top: 56px !important;
}

body[data-appreciation-page="true"] main > p + :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
  margin-top: 30px !important;
}

body[data-appreciation-page="true"] main :where(figcaption, .caption) {
  max-width: 720px;
  margin: 11px auto 0;
  color: var(--muted, #81796f);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .03em;
  text-align: center;
}

/* No.11 keeps its original, lighter theme-title typography. */
html body[data-appreciation-issue="no11"] main:is(.article, .page) > .appreciation-feature-title {
  font-size: 34px !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
}

/* No.11 uses the same full media measure as No.52, including its opening portrait. */
html body[data-appreciation-issue="no11"] main:is(.article, .page) > :is(.photo.portrait, figure.portrait, .portrait-stack) {
  width: min(calc(100vw - 40px), var(--appreciation-media-width)) !important;
  max-width: var(--appreciation-media-width) !important;
}

/* One compact information-card standard for all article generations. */
body[data-appreciation-page="true"] :where(.info, .source-facts, .video-info-block) {
  box-sizing: border-box;
  width: min(calc(100% - 48px), 860px) !important;
  max-width: 860px !important;
  margin: 44px auto 52px !important;
  padding: 21px !important;
  transform: none !important;
  border: 1px solid color-mix(in srgb, var(--line, rgba(120, 80, 65, .22)) 80%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--paper, #f0eadd) 96%, var(--accent, #9f6658) 4%) !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] :where(.info-kicker, .facts-kicker, .video-info-label) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  color: color-mix(in srgb, var(--accent, #9f6658) 82%, var(--ink, #2d2925)) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  letter-spacing: .09em !important;
}

body[data-appreciation-page="true"] :where(.info-kicker, .facts-kicker, .video-info-label)::after {
  height: 1px !important;
  flex: 1 1 auto !important;
  background: color-mix(in srgb, var(--line, rgba(120, 80, 65, .22)) 82%, transparent) !important;
}

body[data-appreciation-page="true"] :where(.release-grid, .facts-grid, .info-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body[data-appreciation-page="true"] :where(.release, .fact, .info-cell, .info-foot > span) {
  box-sizing: border-box;
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
  border: 1px solid color-mix(in srgb, var(--line, rgba(120, 80, 65, .22)) 76%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--paper, #f0eadd) 98%, var(--ink, #2d2925) 2%) !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] :where(.fact.wide, .fact:first-child:last-child) {
  grid-column: 1 / -1 !important;
  min-height: 54px !important;
}

body[data-appreciation-page="true"] :where(.release small, .release span, .fact span, .info-cell span, .info-foot > span) {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--muted, #81796f) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  letter-spacing: .055em !important;
}

body[data-appreciation-page="true"] :where(.release strong, .release em, .fact strong, .info-cell strong, .info-foot b) {
  display: block !important;
  margin: 0 !important;
  color: var(--ink, #2d2925) !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: .005em !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}

body[data-appreciation-page="true"] .release strong {
  font-size: clamp(20px, 2.1vw, 27px) !important;
  line-height: 1.2 !important;
}

body[data-appreciation-page="true"] .release em {
  margin-top: 6px !important;
  font-size: 15px !important;
}

body[data-appreciation-page="true"] .source-title > span {
  margin: 0 !important;
  color: color-mix(in srgb, var(--ink, #2d2925) 84%, var(--muted, #81796f)) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body[data-appreciation-page="true"] .source-title > strong:empty {
  display: none !important;
}

body[data-appreciation-page="true"] .info-foot {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-appreciation-page="true"] .facts-with-profile:has(.facts-profile) {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

body[data-appreciation-page="true"] .facts-profile {
  width: 112px !important;
  max-width: 112px !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] .facts-body {
  min-width: 0;
}

body[data-appreciation-page="true"] .dual-source-cards {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(calc(100% - 48px), 960px);
  margin: 34px auto 40px;
}

body[data-appreciation-page="true"] main .dual-source-cards > :where(.video-info-block, .unified-source-card) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* theme.js upgrades legacy cards after load; keep the upgraded DOM on the same compact scale. */
body[data-appreciation-page="true"] .unified-source-card {
  box-sizing: border-box !important;
  width: min(calc(100% - 48px), 860px) !important;
  max-width: 860px !important;
  margin: 44px auto 52px !important;
  padding: 21px !important;
  transform: none !important;
  border: 1px solid color-mix(in srgb, var(--line, rgba(120, 80, 65, .22)) 80%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--paper, #f0eadd) 96%, var(--accent, #9f6658) 4%) !important;
  box-shadow: none !important;
}

body[data-appreciation-page="true"] .unified-source-card__head {
  gap: 12px !important;
  margin: 0 0 14px !important;
  color: color-mix(in srgb, var(--accent, #9f6658) 82%, var(--ink, #2d2925)) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  letter-spacing: .09em !important;
}

body[data-appreciation-page="true"] .unified-source-card__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body[data-appreciation-page="true"] .unified-source-card__fact {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--paper, #f0eadd) 98%, var(--ink, #2d2925) 2%) !important;
}

body[data-appreciation-page="true"] .unified-source-card__fact small {
  margin: 0 0 5px !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  letter-spacing: .055em !important;
}

body[data-appreciation-page="true"] .unified-source-card__fact strong,
body[data-appreciation-page="true"] :is(
  .unified-source-card__fact--number,
  .unified-source-card__fact--price
) strong {
  margin: 0 !important;
  color: var(--ink, #2d2925) !important;
  font-family: var(--appreciation-serif) !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .005em !important;
  overflow-wrap: anywhere;
}

body[data-appreciation-page="true"] .unified-source-card__value-line + .unified-source-card__value-line {
  margin-top: 3px !important;
}

body[data-appreciation-page="true"] main :where(table) {
  width: 100%;
  border-collapse: collapse;
}

body[data-appreciation-page="true"] main :where(a, button):focus-visible {
  outline: 2px solid var(--accent, #9f6658) !important;
  outline-offset: 3px;
}

body[data-appreciation-page="true"] main :where([id]) {
  scroll-margin-top: 132px;
}

@media (max-width: 920px) {
  html body[data-appreciation-issue="no11"] main:is(.article, .page) > .appreciation-feature-title {
    font-size: 26px !important;
  }
}

@media (max-width: 760px) {
  body[data-appreciation-page="true"] {
    --appreciation-copy-width: 100%;
    --appreciation-title-width: 100%;
    --appreciation-media-width: 100%;
  }

  body[data-appreciation-page="true"] .dual-source-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100vw - 28px);
    margin: 34px auto 40px;
  }

  body[data-appreciation-page="true"] :where(.hero, .masthead) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body[data-appreciation-page="true"] :where(.hero, .masthead) h1 {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    font-size: clamp(32px, 9.2vw, 46px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  body[data-appreciation-page="true"] :where(.hero .meta, .masthead .subtitle, .masthead .meta) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
    letter-spacing: .012em !important;
  }

  body[data-appreciation-page="true"] .hero .meta-note {
    margin-top: 7px !important;
    font-size: 12px !important;
  }

  body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > :where(p, blockquote, ul, ol) {
    box-sizing: border-box;
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }

  body[data-appreciation-page="true"] :where(main.article, main.page, main.imported-appreciation) > p {
    margin-bottom: 1.25em !important;
    font-size: clamp(16.5px, 4.45vw, 18.5px) !important;
    line-height: 1.9 !important;
    letter-spacing: .006em !important;
  }

  html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title) {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    margin-top: 48px !important;
    margin-bottom: 24px !important;
    font-size: clamp(26px, 7.2vw, 31px) !important;
  }

  html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title)::before {
    margin-bottom: 11px !important;
    font-size: 10px !important;
  }

  html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h2, .section-title, .section-heading-nav, .conclusion-title):not(.appreciation-feature-title)::after {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    margin-top: 16px !important;
  }

  html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > .appreciation-feature-title {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr) !important;
    gap: 13px !important;
    margin-top: 44px !important;
    margin-bottom: 24px !important;
    font-size: clamp(26px, 7.2vw, 31px) !important;
  }

  html body[data-appreciation-page="true"] main:is(.article, .page, .imported-appreciation) > :is(h3, .sub-kicker, .section-label):not(.appreciation-feature-title) {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    margin-top: 40px !important;
    margin-bottom: 22px !important;
    font-size: clamp(21px, 6.2vw, 27px) !important;
  }

  body[data-appreciation-page="true"] main :where(.photo, figure, .gallery-spread, .gallery, .portrait-stack, .full-bleed) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  body[data-appreciation-page="true"] main :where(.photo-pair, .opening-pair, .paired-figures, .model-pair, .reaction-sequence) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  body[data-appreciation-page="true"] main :where(.photo.portrait, figure.portrait, .portrait-stack) {
    width: min(calc(100vw - 32px), 680px) !important;
    max-width: min(calc(100vw - 32px), 680px) !important;
  }

  html body[data-appreciation-issue="no11"] main:is(.article, .page) > :is(.photo.portrait, figure.portrait, .portrait-stack) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  body[data-appreciation-page="true"] main :where(.photo.small, figure.small) {
    width: min(calc(100vw - 44px), 620px) !important;
    max-width: min(calc(100vw - 44px), 620px) !important;
  }

  html body[data-appreciation-issue="no11"] main:is(.article, .page) > .appreciation-feature-title {
    font-size: 26px !important;
  }

  body[data-appreciation-page="true"] main :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) img {
    border-radius: 12px;
  }

  body[data-appreciation-page="true"] main > :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
    margin-top: 28px !important;
    margin-bottom: 32px !important;
  }

  body[data-appreciation-page="true"] main > :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed)
  + :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
    margin-top: 40px !important;
  }

  body[data-appreciation-page="true"] main > p + :where(.photo, figure, .gallery-spread, .gallery, .image-frame, .portrait-stack, .full-bleed) {
    margin-top: 22px !important;
  }

  body[data-appreciation-page="true"] :where(blockquote, .quote, .interview-answer) {
    padding: 14px 16px;
  }

  body[data-appreciation-page="true"] main.issue-no10 > .info p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body[data-appreciation-page="true"] :where(.info, .source-facts, .video-info-block) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 34px auto 40px !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  body[data-appreciation-page="true"] :where(.info-kicker, .facts-kicker, .video-info-label) {
    gap: 9px !important;
    margin-bottom: 11px !important;
    font-size: 10.5px !important;
    letter-spacing: .065em !important;
  }

  body[data-appreciation-page="true"] :where(.release-grid, .facts-grid, .info-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-appreciation-page="true"] :where(.release, .fact, .info-cell, .info-foot > span) {
    min-height: 62px !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
  }

  body[data-appreciation-page="true"] :where(.release small, .release span, .fact span, .info-cell span, .info-foot > span) {
    margin-bottom: 3px !important;
    font-size: 9.5px !important;
    letter-spacing: .035em !important;
  }

  body[data-appreciation-page="true"] :where(.release strong, .release em, .fact strong, .info-cell strong, .info-foot b) {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
  }

  body[data-appreciation-page="true"] .release strong {
    font-size: 21px !important;
  }

  body[data-appreciation-page="true"] .release em {
    margin-top: 4px !important;
    font-size: 13px !important;
  }

  body[data-appreciation-page="true"] .info-foot {
    gap: 7px !important;
    margin-top: 7px !important;
  }

  body[data-appreciation-page="true"] .facts-with-profile:has(.facts-profile) {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  body[data-appreciation-page="true"] .facts-profile {
    width: 68px !important;
    max-width: 68px !important;
    border-radius: 10px !important;
  }

  body[data-appreciation-page="true"] .unified-source-card {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 34px auto 40px !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  body[data-appreciation-page="true"] .unified-source-card__head {
    gap: 9px !important;
    margin-bottom: 11px !important;
    font-size: 10.5px !important;
    letter-spacing: .065em !important;
  }

  body[data-appreciation-page="true"] .unified-source-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-appreciation-page="true"] .unified-source-card__fact {
    min-height: 62px !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
  }

  body[data-appreciation-page="true"] .unified-source-card__fact small {
    margin-bottom: 3px !important;
    font-size: 9.5px !important;
  }

  body[data-appreciation-page="true"] .unified-source-card__fact strong,
  body[data-appreciation-page="true"] :is(
    .unified-source-card__fact--number,
    .unified-source-card__fact--price
  ) strong {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 520px) {
  html body[data-appreciation-issue="no11"] main:is(.article, .page) > .appreciation-feature-title {
    font-size: 23px !important;
  }
}

@media (max-width: 380px) {
  body[data-appreciation-page="true"] :where(.hero, .masthead) h1 {
    font-size: clamp(29px, 8.9vw, 38px) !important;
  }

  body[data-appreciation-page="true"] :where(.hero .meta, .masthead .subtitle, .masthead .meta) {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-appreciation-page="true"] *,
  body[data-appreciation-page="true"] *::before,
  body[data-appreciation-page="true"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}