/* Final Design 22 contrast layer. Keep paper and reader surfaces explicit. */
html[data-et-design="22"] {
  --et-paper-ink:#171512;
  --et-paper-muted:#625d55;
  --et-paper-accent:#a72d1f;
  --et-paper-gold:#765900;
  --et-reader-ink:#f4efe6;
  --et-reader-muted:#cfc7bb;
  --et-reader-accent:#ff654f;
  --et-reader-gold:#f0c95a;
}

html[data-et-design="22"] .et2-home .et2-story-copy strong,
html[data-et-design="22"] .et2-home .et2-reader-desk strong {
  color:var(--et-paper-ink)!important;
}

html[data-et-design="22"] .et2-home .et2-story-copy em,
html[data-et-design="22"] .et2-home .et2-section-head p {
  color:var(--et-paper-muted)!important;
}

html[data-et-design="22"] .et2-home .et2-section-head > div > span,
html[data-et-design="22"] .et2-home .et2-story-copy small {
  color:var(--et-paper-gold)!important;
}

html[data-et-design="22"] .et2-home .et2-story-copy b {
  color:var(--et-paper-accent)!important;
}

html[data-et-design="22"] .et2-home :is(.et2-story-1,.et2-story-2,.et2-story-4) .et2-story-copy b span {
  color:var(--et-paper-ink)!important;
}

html[data-et-design="22"] .et2-home .et2-story-3 .et2-story-copy b span {
  color:var(--et-reader-ink)!important;
}

html[data-et-design="22"] .et2-home .et2-text-link span {
  color:var(--et-paper-accent)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page :is(.back-link,.eyebrow),
html[data-et-design="22"] body.missexpansion-inner-page .legal-page .legal-panel a {
  color:var(--et-paper-accent)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .series-meta span {
  border-color:color-mix(in srgb,var(--et-paper-ink) 45%,transparent);
  background:#fffaf2;
  color:var(--et-paper-ink)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .series-cover-card > a {
  background:var(--et-primary);
  color:var(--et-paper-ink)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .release p,
html[data-et-design="22"] body.missexpansion-inner-page .archive-copy p:not(.release-label) {
  color:var(--et-paper-muted)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-card .archive-copy h2 {
  color:var(--et-reader-ink)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-card .archive-copy p:not(.release-label) {
  color:var(--et-reader-muted)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .unlock-status-card .eyebrow {
  color:var(--et-reader-accent)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .unlock-status-card .button-primary {
  color:var(--et-paper-ink)!important;
}

html[data-et-design="22"] body.missexpansion-inner-page .unlock-status-card .button-soft {
  color:var(--et-reader-ink)!important;
}

html[data-et-design="22"] body.missexpansion-reader-page main {
  width:100%;
  background:#080808;
  color:var(--et-reader-ink);
}

html[data-et-design="22"] body.missexpansion-reader-page .reader-main {
  background:#080808;
}

html[data-et-design="22"] body.missexpansion-reader-page .top-action {
  border-bottom:0;
}

html[data-et-design="22"] body.missexpansion-reader-page .reader-title h1 {
  max-width:100%;
  color:var(--et-reader-ink)!important;
  font-size:clamp(3.3rem,7vw,6.4rem);
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

html[data-et-design="22"] body.missexpansion-reader-page :is(.reader-title p,.reader-title .eyebrow,.comments-panel .eyebrow,.reader-progress > span) {
  color:var(--et-reader-muted)!important;
}

html[data-et-design="22"] body.missexpansion-reader-page :is(.back-link,.reader-finish-panel .eyebrow) {
  color:var(--et-reader-accent)!important;
}

html[data-et-design="22"] body.missexpansion-reader-page .reader-bottom-nav .reader-all-comics-link {
  border-color:color-mix(in srgb,var(--et-reader-gold) 70%,transparent);
  background:color-mix(in srgb,var(--et-reader-gold) 12%,#191919);
  color:var(--et-reader-gold)!important;
}

html[data-et-design="22"] .et-game-page .et-player-cover :is(.et-play-eyebrow,.et-player-flourish) {
  color:var(--et-reader-accent)!important;
}

/* Use one vertical poster system across the homepage and archive. */
html[data-et-design="22"] {
  --et-poster-ratio:2 / 3;
}

html[data-et-design="22"] .et2-home :is(.et2-lead-art,.et2-story-cover),
html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-cover {
  min-height:0!important;
  aspect-ratio:var(--et-poster-ratio)!important;
  background:var(--et-paper-ink);
}

html[data-et-design="22"] .et2-home :is(.et2-lead-art,.et2-story-cover) :is(img,video),
html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-cover :is(img,video) {
  object-fit:cover!important;
  object-position:center;
}

html[data-et-design="22"] .et2-home .et2-teaser-slide.et2-lead {
  grid-template-columns:minmax(280px,2fr) minmax(250px,1.35fr)!important;
  min-height:0!important;
  align-items:start;
}

html[data-et-design="22"] .et2-home .et2-teaser-slide .et2-lead-art {
  width:100%;
  height:auto!important;
  align-self:start;
}

html[data-et-design="22"] .et2-home .et2-story-card,
html[data-et-design="22"] .et2-home .et2-story-card:nth-child(n) {
  display:grid!important;
  grid-template-columns:minmax(150px,40%) minmax(0,60%)!important;
  min-height:0!important;
  align-items:start;
}

html[data-et-design="22"] .et2-home .et2-story-card .et2-story-cover,
html[data-et-design="22"] .et2-home .et2-story-card:nth-child(even) .et2-story-cover {
  width:100%;
  min-height:0!important;
  aspect-ratio:var(--et-poster-ratio)!important;
  align-self:start;
  border-right:4px solid var(--design-line);
  border-bottom:0;
}

html[data-et-design="22"] .et2-home .et2-story-card:hover :is(.et2-story-cover,.et2-lead-art) :is(img,video) {
  transform:none;
}

/* Let the comics archive lead with the artwork instead of oversized metadata. */
html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-grid {
  align-items:start;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-card {
  grid-template-rows:auto auto;
  min-height:0;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-cover {
  aspect-ratio:var(--et-poster-ratio);
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-cover::after {
  content:none;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "title title"
    "chapter action";
  gap:10px 14px;
  min-height:0;
  align-items:center;
  padding:16px 18px 18px;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-copy > :is(.release-label,.card-stats) {
  display:none;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-copy h2 {
  grid-area:title;
  margin:0;
  max-width:18ch;
  color:var(--et-reader-ink)!important;
  font-size:clamp(1.65rem,2.35vw,2.35rem);
  line-height:.9;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-copy > p:not(.release-label):not(.card-stats) {
  grid-area:chapter;
  margin:0;
  color:var(--et-reader-muted)!important;
  font-size:.82rem;
  line-height:1.25;
}

html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-button {
  grid-area:action;
  min-height:44px;
  align-self:center;
  margin:0;
  padding:0 15px;
}

@media (max-width:700px) {
  html[data-et-design="22"] .et2-home .et2-teaser-slide.et2-lead,
  html[data-et-design="22"] .et2-home .et2-story-card,
  html[data-et-design="22"] .et2-home .et2-story-card:nth-child(n) {
    grid-template-columns:minmax(0,1fr)!important;
  }

  html[data-et-design="22"] .et2-home .et2-story-card .et2-story-cover,
  html[data-et-design="22"] .et2-home .et2-story-card:nth-child(even) .et2-story-cover {
    border-right:0;
    border-bottom:4px solid var(--design-line);
  }

  html[data-et-design="22"] body.missexpansion-inner-page .archive-section .archive-copy h2 {
    max-width:22ch;
    font-size:clamp(1.7rem,9vw,2.3rem);
  }
}