/* Approved DOOMRAT v2: original vector artwork, with its spacing intact. */
:root { --ink: #20201c; --red: #a13e36; --paper: #f5ebd5; }
.intro-portrait { position: absolute; top: 9svh; left: 50%; width: min(16svh,160px); aspect-ratio: 1; transform: translateX(-50%); opacity: var(--intro-opacity,1); pointer-events: none; }
.intro-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.masthead-mark { position: absolute; left: 12px; width: 76px; height: 76px; display: block; opacity: var(--nav-opacity,1); }
.masthead-mark img { display: block; width: 100%; height: 100%; }
.reader-page .reader-brand { width: 210px; }
.opening-brand { width: 116px; height: auto; align-self: center; }
.book-cover-masthead { gap: 5%; }
.book-cover-brand { display: block; width: 72%; height: auto; flex-shrink: 0; }
.book-cover-masthead > span { white-space: nowrap; }
@media (max-width: 1100px) {
  .reader-page .reader-brand { width: 180px; }
  .masthead-mark { left: 0; width: 60px; height: 60px; }
}
@media (max-width: 760px) {
  .reader-page .reader-brand { width: 140px; }
  .opening-brand { width: 100px; }
  .masthead-mark { width: 42px; height: 42px; left: 0; }
  .opening-header .wordmark { max-width: calc(100% - 100px); }
  .has-intro .opening-header .wordmark { max-width: none; }
  .has-intro .intro-portrait { top: 15svh; width: min(17svh,140px); }
}
@media (max-width: 390px) {
  .reader-page .reader-brand { width: 120px; }
}
@media (max-width: 350px) {
  .reader-page .reader-brand { width: 96px; }
  .reader-page .reader-masthead { gap: 8px; }
  .reader-masthead nav { font-size: 12px; }
}

/* Footer owns its layout: the old text-logo and mobile flex rules do not apply. */
.home-page .site-footer, .reader-page .site-footer {
  display: grid;
  grid-template-columns: minmax(160px,1fr) auto minmax(160px,1fr);
  align-items: center;
  gap: 24px;
  margin-block: 40px 0;
  padding: 28px 0 36px;
  border-top: 1px solid var(--ink);
  font: 15px/1.5 var(--text);
  letter-spacing: 0;
}
.site-footer .footer-logo {
  display: block;
  width: min(208px,100%);
  max-width: none;
  margin: 0;
  font: 700 20px/1.2 var(--text);
  letter-spacing: 0;
}
.site-footer .footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 340;
  object-fit: contain;
}
.site-footer .footer-meta { margin: 0; color: var(--muted); text-align: center; font-size: 14px; }
.site-footer .footer-meta span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .4px; }
.site-footer .footer-nav { display: flex; justify-self: end; align-items: center; gap: 28px; }
.site-footer .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (max-width: 760px) {
  .home-page .site-footer, .reader-page .site-footer {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 16px 24px;
    margin-top: 28px;
    padding-block: 24px 32px;
  }
  .site-footer .footer-logo { width: min(180px,100%); }
  .site-footer .footer-nav { flex-direction: column; align-items: flex-end; gap: 0; font-size: 14px; }
  .site-footer .footer-meta { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 13px; }
  .site-footer .footer-meta span { display: inline; margin: 0 0 0 12px; font-size: 12px; }
}
@media (max-width: 350px) {
  .home-page .site-footer, .reader-page .site-footer { column-gap: 16px; }
  .site-footer .footer-meta span { display: block; margin: 4px 0 0; }
}

/* Compact masthead after the introductory cover; keep space for the actual comic. */
.home-page .opening-header { --dock-height: 76px; }
.home-page .masthead-mark { width: 44px; height: 44px; left: 0; }
.home-page .masthead-bottom { padding-block: 8px; gap: 16px; font-size: 12px; }
.home-page .masthead-bottom nav { font-size: 15px; gap: 28px; }
.home-page .masthead-bottom nav a { min-height: 30px; }
.home-page .site-footer, .reader-page .site-footer { margin-top: 16px; padding-block: 10px 12px; gap: 12px; grid-template-columns: minmax(120px,1fr) auto minmax(150px,1fr); font-size: 13px; }
.site-footer .footer-logo { width: 128px; }
.site-footer .footer-meta { font-size: 11px; line-height: 1.4; }
.site-footer .footer-meta span { display: inline; margin: 0 0 0 8px; font-size: 11px; letter-spacing: 0; }
.site-footer .footer-nav { gap: 18px; }
.site-footer .footer-nav a { min-height: 36px; }
@media (max-width: 760px) {
  .home-page .opening-header { --dock-height: 60px; }
  .home-page .masthead-mark { width: 32px; height: 32px; }
  .home-page .masthead-bottom { padding-block: 6px; }
  .home-page .masthead-bottom nav { width: 100%; justify-content: space-between; gap: 16px; font-size: 14px; }
  .home-page .masthead-bottom > span { display: none; }
  .home-page .site-footer, .reader-page .site-footer { grid-template-columns: minmax(0,1fr) auto; padding-block: 8px; row-gap: 4px; margin-top: 10px; }
  .site-footer .footer-logo { width: 110px; }
  .site-footer .footer-nav { flex-direction: row; gap: 14px; font-size: 12px; }
  .site-footer .footer-nav a { min-height: 40px; }
  .site-footer .footer-meta { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }
  .site-footer .footer-meta span { display: inline; margin-left: 8px; font-size: 10px; }
}

/* The color portrait reads as a real masthead mark, beside the lettering. */
.home-page .opening-header { --dock-height: 112px; }
.home-page .masthead-mark { width: 100px; height: 100px; left: auto; right: calc(50% + var(--brand-end-width,300px) / 2 + 20px); }
.home-page .intro-portrait { top: 6svh; width: min(16svh,180px); }
.home-page .home-cover { grid-template-columns: minmax(320px,.8fr) minmax(0,1.6fr); align-items: center; gap: clamp(24px,3vw,64px); padding: 44px 0 48px; }
.home-page .home-cover h1 { font-size: clamp(54px,5.2vw,92px); }
.home-hero-art { min-width: 0; width: 100%; margin: 0; }
.home-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 1000px) {
  .home-page .home-cover { grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 32px; }
  .home-page .home-cover-copy { max-width: 620px; }
  .home-page .home-cover h1 { font-size: clamp(54px,9vw,88px); }
}
@media (max-width: 760px) {
  .home-page .opening-header { --dock-height: 80px; }
  .home-page .masthead-mark { width: 64px; height: 64px; right: calc(50% + var(--brand-end-width,180px) / 2 + 8px); }
  .has-intro .home-page .intro-portrait { top: 9svh; width: min(16svh,140px); }
  .home-page .home-cover h1 { font-size: clamp(46px,11vw,76px); }
  .home-hero-art { width: calc(100% + 24px); max-width: calc(100vw - 12px); margin-inline: -12px; }
}
@media (max-width: 760px) {
  .home-page .home-cover { gap: 18px; }
  .home-page .home-cover-copy { display: contents; }
  .home-cover-copy > .eyebrow { order: 1; margin: 0; }
  .home-page .home-cover h1 { order: 2; margin: 0 0 6px; }
  .home-hero-art { order: 3; }
  .home-cover-copy > .home-lead { order: 4; margin: 0; }
  .home-cover-copy > .cover-description { order: 5; margin: 0; }
  .home-cover-copy > .read-button { order: 6; justify-self: start; }
}
/* Published artwork replaces the old market-story sprites. */
.shelf-cover { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.character-doom { background: url('assets/issues/001/cover.webp') center 40% / cover no-repeat; }
.character-mik { background: url('assets/issues/001/mik.webp') center 30% / cover no-repeat; }
.book-cover-art { overflow:hidden; }
.book-cover-art img { display:block; width:100%; height:100%; object-fit:cover; }
.shelf-card-copy p { white-space:pre-line; }
.shelf-card .shelf-art--illustrated { display: flex; align-items: center; justify-content: center; }
.shelf-art--illustrated .shelf-cover { height: auto; max-height: none; aspect-ratio: 2/3; object-fit: contain; }
@media(max-width:1200px) { .shelf-cover { aspect-ratio:1.5; height:auto; max-height:360px; } }
@media(max-width:680px) { .shelf-cover { aspect-ratio:1.3; } }
@media(max-width:400px) {
  .site-footer .footer-nav { flex-direction:column; align-items:flex-end; gap:0; }
  .site-footer .footer-nav a { min-height:32px; }
}