/* Proposal C: original Fayvel typography with Dragalia-inspired UI accents.
   Shared page geometry and behavior come from world-sky.css and world.js. */
.world-comic {
  --comic-ink: #071630;
  --comic-cream: #fff0ce;
  --comic-gold: #ffe49e;
  --comic-line: #c3a164;
  --comic-blue: #234f91;
  --comic-body: 'Fayvel Avant Garde Condensed', 'Arial Narrow', Arial, sans-serif;
  --comic-serif: 'Cinzel', 'Noto Serif JP', Georgia, serif;
  --comic-prose: 'Cormorant Garamond', Georgia, serif;
  --comic-title-surface: linear-gradient(115deg, #2c5ba0, #1b3f79 70%, #142e5c);
  --comic-body-surface: linear-gradient(120deg, #fffdf4, #f3eddc);
  --comic-dots: url('assets/world/comic-halftone.svg');
  --world-label: var(--comic-body);
  font: 400 21px / 1.55 var(--comic-prose);
  color: #273d54;
  background: #f7f6ed;
  font-synthesis: none;
}
.world-comic :is(main, .world-footer, .proposal-switcher) :focus-visible {
  outline: 3px solid #a77717;
  outline-offset: 5px;
}
.world-comic .eyebrow { font: 700 10px / 1.5 var(--comic-body); letter-spacing: .13em; }
.world-comic .sky-journey { background: #f6f6ef; }

/* Approved Discover button. Keep its dimensions, colors, font and transforms. */
/* Fill the current viewport, including short landscape and tall displays.
   The fixed menu overlays the hero; normal page flow lets it scroll away. */
.world-comic .world-hero {
  margin-top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
}

.world-comic .hero-scroll {
  flex-direction: row;
  gap: 12px;
  min-width: 0;
  padding: 10px 16px;
  bottom: 22px;
  background: var(--comic-cream);
  color: #0b2b44;
  border: 3px solid var(--comic-ink);
  box-shadow: 3px 3px 0 #041626b3, inset 0 0 0 1px #fffef5;
  transform: translateX(-50%) skewX(-10deg);
  font-family: var(--comic-body);
}
.world-comic .hero-scroll span { font: 700 12px var(--comic-body); letter-spacing: .04em; }
.world-comic .hero-scroll svg { width: 12px; height: 18px; color: #163a72; }
.world-comic .hero-scroll :is(span, svg) { transform: skewX(10deg); }
.world-comic .hero-scroll:hover { background: #f5dc9d; }

/* Dragalia-style halftone fills the frame right to its keyline. The SVG's
   repeating rows cross the top/bottom edges; only the left side dissolves. */
.world-comic :where(.heading-number, .comic-feature-title, .world-welcome > .eyebrow, .film-card__title, .gallery-slide figcaption > div, .chapter-nav a, .text-link, .journey-end__link, .round-arrow) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.world-comic :where(.heading-number, .comic-feature-title, .world-welcome > .eyebrow, .film-card__title, .gallery-slide figcaption > div)::after,
.world-comic :where(.chapter-nav a, .text-link, .journey-end__link, .round-arrow)::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: min(88%, 300px);
  background-image: var(--comic-dots);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: right center;
  mask-image: linear-gradient(90deg, transparent, #000 10px);
  opacity: .36;
  pointer-events: none;
  z-index: -1;
}
.world-comic :where(.heading-number, .world-welcome > .eyebrow)::after {
  width: min(88%, 220px);
}
.world-comic :where(.chapter-nav a, .text-link, .journey-end__link, .round-arrow)::before {
  inset: 1px -12px;
  width: auto;
  transform: skewX(8deg);
}
.world-comic .round-arrow::before {
  background-image: url('assets/world/comic-halftone-compact.svg');
  transform: skewX(10deg);
  opacity: .3;
}

/* Storybook introduction: spacious serif copy, compact comic navigation. */
.world-comic .world-welcome { padding-top: 104px; padding-bottom: 112px; }
.world-comic .world-welcome > .eyebrow {
  display: inline-flex;
  padding: 10px 27px;
  max-width: 100%;
  color: #f6e5bc;
  background: var(--comic-title-surface);
  border: 2px solid var(--comic-ink);
  box-shadow: inset 0 0 0 1px #c6a265b3;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.world-comic .tiny-star { font-size: 14px; color: #f0cf8b; }
.world-comic .world-welcome h2 {
  margin: 27px 0 24px;
  font: 500 clamp(48px, 5.3vw, 78px) / 1.04 var(--comic-prose);
  letter-spacing: -.025em;
  color: #183c70;
}
.world-comic .world-welcome h2 em { font-weight: 400; font-style: italic; color: #a18144; }
.world-comic .welcome-copy { max-width: 610px; font: 400 23px / 1.6 var(--comic-prose); color: #52616a; }
.world-comic .chapter-nav { margin-top: 37px; gap: 18px; }
.world-comic .chapter-nav a {
  padding: 12px 21px;
  border: 2px solid #10254a;
  background: var(--comic-title-surface);
  color: #f6e5be;
  box-shadow: 3px 3px #07163040, inset 0 0 0 1px #d1af6c;
  transform: skewX(-8deg);
  font: 700 12px / 1.3 var(--comic-body);
  letter-spacing: .04em;
}
.world-comic .chapter-nav a::after { display: none; }
.world-comic .chapter-nav a span { color: #e2bf78; font: 700 12px var(--comic-body); }
.world-comic .chapter-nav a svg { color: #e2bf78; }
.world-comic .chapter-nav a:hover { background: #2e5b9b; }

/* Original Cinzel titles, with a contained blue chapter strip above them. */
.world-comic .section-heading { width: min(760px, calc(100% - 48px)); margin-inline: auto; text-align: center; }
.world-comic .heading-number {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 11px 28px;
  margin-bottom: 23px;
  border: 2px solid #10254a;
  color: #f0e0b9;
  background: var(--comic-title-surface);
  box-shadow: inset 0 0 0 1px #c2a0649e;
  clip-path: polygon(8px 0, calc(100% - 13px) 0, 100% 12px, calc(100% - 6px) 100%, 0 100%, 0 8px);
  font: 700 10px / 1.4 var(--comic-body);
  letter-spacing: .1em;
}
.world-comic .heading-number > span:first-child { color: #f4d38e; font: 700 15px / 1 var(--comic-body); }
.world-comic .heading-number i { width: 27px; background: #c5a46b; }
.world-comic .section-heading h2 { font: 500 clamp(30px, 3vw, 43px) / 1.18 var(--comic-serif); letter-spacing: -.025em; color: #193b6d; }
.world-comic .section-heading > p { font: italic 400 23px / 1.5 var(--comic-prose); color: #6d7065; margin-top: 14px; }

/* Film wheel: the scenic art stays broad, with blue and gold caption cutouts. */
.world-comic .film-card { border: 4px solid #091c3d; box-shadow: 7px 8px #07163055; }
.world-comic .film-card::after { inset: 4px; border-color: #e6ca8d9e; }
.world-comic .film-card__title {
  position: absolute;
  left: 24px;
  bottom: 22px;
  max-width: 76%;
  padding: 12px 28px 14px 17px;
  background: var(--comic-title-surface);
  border-left: 3px solid #d7b16a;
  box-shadow: inset 0 1px #c7a771;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
.world-comic .film-card__title .eyebrow { font: 700 9px var(--comic-body); color: #e8d6ae; letter-spacing: .09em; margin-bottom: 7px; }
.world-comic .film-card__title h3 { font: 500 clamp(25px, 2.5vw, 35px) / 1.1 var(--comic-serif); color: #fff0c8; letter-spacing: -.02em; text-shadow: 0 2px #07163066; }
.world-comic .film-play {
  width: 79px;
  height: 67px;
  border: 4px solid #071630;
  border-radius: 0;
  color: #173b75;
  background: linear-gradient(120deg, #f8e3ae, #d0a653);
  transform: translate(-50%, -50%) skewX(-11deg);
  box-shadow: 4px 5px #071630bf, inset 0 0 0 1px #fff0bb;
  backdrop-filter: none;
}
.world-comic .film-play::before { inset: 5px; border: 1px solid #fff0c3b3; border-radius: 0; }
.world-comic .film-play svg { width: 24px; height: 24px; transform: skewX(11deg); }
.world-comic .film-play:hover { background: #ffebb9; box-shadow: 5px 6px #071630bf; }
.world-comic .film-play:hover::before { inset: 5px; }
.world-comic .film-play:focus-visible { outline-color: #fff0c3; }
.world-comic .round-arrow {
  width: 48px;
  height: 42px;
  border: 3px solid #071630;
  border-radius: 0;
  background: var(--comic-title-surface);
  color: #ffe4a5;
  box-shadow: 3px 3px #07163066, inset 0 0 0 1px #d3b06c;
  transform: skewX(-10deg);
}
.world-comic .round-arrow svg { transform: skewX(10deg); stroke-width: 1.8; }
.world-comic .round-arrow:hover { background: #315f9f; border-color: #071630; }
.world-comic .round-arrow:active { box-shadow: 1px 1px #071630; }
.world-comic .carousel-navigation { gap: 22px; }
.world-comic .carousel-dots button span { width: 8px; height: 8px; border: 1px solid #183969; background: #f8f0dc; }
.world-comic .carousel-dots button.is-active span { background: #d5ae60; border-color: #183969; box-shadow: 0 0 0 3px #c3a46c26; }
.world-comic .artwork-note { font: 700 11px / 1.6 var(--comic-body); color: #626f78; letter-spacing: .025em; }

/* Five illustrated stories. Serif reading surfaces balance the compact UI. */
.world-comic .features-list { gap: 108px; }
.world-comic .feature-art { box-shadow: none; filter: drop-shadow(6px 7px #07163055); }
.world-comic .feature-art::before, .world-comic .feature-art::after { display: none; }
.world-comic .comic-art-frame { position: absolute; inset: 0; background: #071630; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.world-comic .feature-art img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.world-comic .comic-art-frame::before { content: ''; position: absolute; inset: 5px; z-index: 1; background: linear-gradient(0deg, #081c3d9e, transparent 35%); pointer-events: none; }
.world-comic .comic-art-frame::after { content: ''; position: absolute; inset: 9px; border: 1px solid #e2c68aab; z-index: 2; pointer-events: none; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.world-comic .feature-art__label { left: 18px; right: auto; bottom: 18px; max-width: calc(100% - 36px); padding: 8px 14px 8px 10px; border-left: 2px solid #d6b26e; background: #0c2853e8; color: #f6e5bf; font: 700 10px / 1.4 var(--comic-body); letter-spacing: .06em; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.world-comic .feature-copy { margin-left: -12px; padding: 0; background: none; border: 0; box-shadow: none; isolation: isolate; filter: drop-shadow(5px 6px #07163045); }
.world-comic .feature-row--reverse .feature-copy { margin: 0 -12px 0 0; padding: 0; }
.world-comic .feature-copy::before { display: none; }
.world-comic .comic-feature-title { padding: 24px 30px 25px; background: var(--comic-title-surface); border: 3px solid #071630; box-shadow: inset 0 0 0 1px #dcba78b3; clip-path: polygon(12px 0, calc(100% - 26px) 0, 100% 24px, 100% 100%, 0 100%, 0 12px); }
.world-comic .feature-number { margin-bottom: 15px; font: 700 10px / 1.4 var(--comic-body); letter-spacing: .1em; color: #e9d8b2; gap: 10px; }
.world-comic .feature-number span:first-child { padding: 3px 6px; min-width: 28px; font: 700 15px / 1 var(--comic-body); text-align: center; color: #193c70; background: #f1dfb3; transform: skewX(-8deg); }
.world-comic .feature-number i { width: 24px; background: #c9a86b; }
.world-comic .feature-copy h3 { font: 500 clamp(27px, 2.5vw, 35px) / 1.2 var(--comic-serif); letter-spacing: -.025em; color: #fff0c8; text-shadow: 0 2px #07163059; }
.world-comic .comic-feature-body { padding: 24px 30px 27px; background: var(--comic-body-surface); border: 3px solid #071630; border-top: 0; box-shadow: inset 0 0 0 1px #b4976099; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 20px) 100%, 0 100%); }
.world-comic .feature-rule { margin: 0 0 13px; width: 100%; color: #a18046; font-size: 11px; }
.world-comic .feature-rule::before { width: 23px; background: #b5965b; }
.world-comic .feature-rule::after { background: linear-gradient(90deg, #b5965b77, transparent); }
.world-comic .comic-feature-body > p { font: 400 22px / 1.5 var(--comic-prose); color: #405365; }
.world-comic .comic-feature-body > .feature-aside { margin-top: 15px; font: italic 400 20px / 1.5 var(--comic-prose); color: #98763a; }
.world-comic .text-link { margin-top: 20px; padding: 11px 16px; font: 700 12px / 1.3 var(--comic-body); letter-spacing: .055em; text-transform: uppercase; color: #f9e7bc; background: var(--comic-title-surface); border: 2px solid #071630; box-shadow: 3px 3px #07163040, inset 0 0 0 1px #caa96a; transform: skewX(-8deg); gap: 17px; }
.world-comic .text-link svg { width: 23px; height: 14px; }
.world-comic .text-link:hover { background: #315f9f; }
.world-comic .features-note { margin-top: 54px; }

/* Gallery caption plates use the same contained grid and serif title voice. */
.world-comic .gallery-stage { background: #112f60; border: 4px solid #071630; box-shadow: 7px 8px #07163055; }
.world-comic .gallery-stage::after { inset: 4px; border-color: #e5c98d9e; z-index: 3; }
.world-comic .gallery-slide figcaption { left: 24px; right: 24px; bottom: 22px; gap: 16px; align-items: end; }
.world-comic .gallery-slide figcaption > div { padding: 13px 28px 14px 17px; background: var(--comic-title-surface); border-left: 3px solid #d7b16a; box-shadow: inset 0 1px #c7a771; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.world-comic .gallery-slide figcaption .eyebrow { font: 700 9px / 1.5 var(--comic-body); color: #e8d6ae; letter-spacing: .09em; margin-bottom: 6px; }
.world-comic .gallery-slide h3 { font: 500 35px / 1.1 var(--comic-serif); color: #fff0c8; letter-spacing: -.01em; text-shadow: 0 2px #07163066; }
.world-comic .gallery-count { flex: none; padding: 10px 12px; background: #f1e1b7; border: 2px solid #071630; color: #193a6a; box-shadow: 2px 3px #07163066; font: 700 11px var(--comic-body); transform: skewX(-8deg); }
.world-comic .gallery-count i { color: #978361; }
.world-comic .gallery-enlarge { width: 38px; height: 35px; border: 2px solid #071630; color: #183b71; background: #f9e7ba; box-shadow: 3px 3px #07163066; transform: skewX(-8deg); backdrop-filter: none; }
.world-comic .gallery-enlarge svg { transform: skewX(8deg); }
.world-comic .gallery-image:hover .gallery-enlarge { background: #fff1c8; }
.world-comic .gallery-thumbnails button { padding: 4px; border: 2px solid #10264d; background: #f7f1df; box-shadow: 3px 3px #07163026; color: #294668; opacity: .7; }
.world-comic .gallery-thumbnails button span { font: 700 11px / 1.3 var(--comic-body); letter-spacing: .025em; }
.world-comic .gallery-thumbnails button.is-active { border-color: #10264d; background: #214b87; color: #f8e5b4; opacity: 1; box-shadow: 3px 3px #07163040, inset 0 0 0 1px #dbb979; }
.world-comic .gallery-thumbnails button.is-active::after { bottom: -9px; width: 6px; height: 6px; background: #d2aa5e; }
.world-comic .gallery-thumbnails button:hover { opacity: 1; }

.world-comic .journey-end__ornament { color: #b08d4e; }
.world-comic .journey-end__ornament span { background: linear-gradient(90deg, transparent, #b99c66); }
.world-comic .journey-end > p { font: italic 400 27px / 1.4 var(--comic-prose); color: #7b795f; }
.world-comic .journey-end__link { margin-top: 18px; padding: 17px 31px; color: #f9e7be; background: var(--comic-title-surface); border: 3px solid #071630; box-shadow: 4px 5px #07163040, inset 0 0 0 1px #d3ae6a; transform: skewX(-8deg); font: 500 clamp(25px, 2.6vw, 35px) / 1.2 var(--comic-serif); letter-spacing: -.025em; }
.world-comic .journey-end__link svg { color: #dec185; }
.world-comic .journey-end__link:hover { background: #315f9f; }
.world-comic .world-footer { color: #f1dfb8; background: linear-gradient(115deg, #1b3e73, #102a55); border-top: 3px solid #071630; box-shadow: inset 0 1px #ba9a5d; }
.world-comic .world-footer nav { font: 700 11px / 1.4 var(--comic-body); }
.world-comic .world-footer nav a:hover { color: #f8e9c9; }
.world-comic .world-footer > p { color: #bec8d7; font: 700 10px / 1.6 var(--comic-body); }
.world-comic .comic-edition-badge { grid-column: 1 / -1; color: #c8b58c; font: 700 9px / 1.5 var(--comic-body); letter-spacing: .1em; text-transform: uppercase; }
.world-comic .comic-edition-badge i { font-style: normal; color: #e4c687; margin: 0 7px; }
.world-comic .proposal-switcher { font: 700 10px / 1.2 var(--comic-body); color: #5c624f; border: 2px solid #071630; border-radius: 0; background: #faf5e9ee; box-shadow: 3px 3px #07163040; }
.world-comic .proposal-switcher a { border-radius: 0; }
.world-comic .proposal-switcher a[aria-current='page'] { background: #214b87; color: #fff0ce; }
.world-comic .toast { background: #143264; color: #f8e7bb; border-radius: 0; }
.world-comic.world-sky .world-dialog { background: #f8f1df; border: 3px solid #10254a; color: #213f65; box-shadow: 7px 8px #07163066, inset 0 0 0 1px #cfb077; }
.world-comic .world-dialog .world-dialog-copy h2 { font: 500 30px / 1.2 var(--comic-serif); color: #193b6d; letter-spacing: -.025em; }
.world-comic.world-sky .world-dialog .world-dialog-copy p { color: #63717a; font: 400 21px / 1.5 var(--comic-prose); letter-spacing: 0; }
.world-comic .world-dialog .world-dialog-close { border-radius: 0; background: #f7e5b7; border: 2px solid #10254a; color: #183c75; box-shadow: 2px 3px #07163066; transform: skewX(-8deg); }

@media (max-width: 1100px) and (min-width: 701px) {
  .world-comic .comic-feature-title { padding: 20px 23px 22px; }
  .world-comic .comic-feature-body { padding: 20px 23px 24px; }
  .world-comic .feature-copy h3 { font-size: 28px; }
  .world-comic .comic-feature-body > p { font-size: 21px; }
  .world-comic .comic-feature-body > .feature-aside { font-size: 19px; }
}
@media (max-width: 960px) {
  .world-comic .world-welcome { padding-top: 83px; padding-bottom: 95px; }
  .world-comic .features-list { gap: 88px; }
  .world-comic .feature-copy h3 { font-size: 25px; }
  .world-comic .feature-number { font-size: 9px; gap: 8px; }
  .world-comic .comic-feature-title { padding-inline: 20px; }
  .world-comic .comic-feature-body { padding-inline: 20px; }
}
@media (max-width: 700px) {
  .world-comic .hero-scroll { bottom: 67px; padding: 10px 15px; }
  .world-comic .world-welcome { padding-top: 67px; padding-bottom: 78px; }
  .world-comic .world-welcome > .eyebrow { font-size: 9px; padding: 9px 20px; }
  .world-comic .world-welcome h2 { font-size: clamp(44px, 10.5vw, 62px); margin: 24px 0 22px; }
  .world-comic .welcome-copy { font-size: 21px; line-height: 1.55; }
  .world-comic .chapter-nav { gap: 7px; margin-top: 30px; justify-content: center; }
  .world-comic .chapter-nav a { font-size: 10px; padding: 11px 9px; gap: 6px; letter-spacing: .015em; }
  .world-comic .chapter-nav a span { font-size: 10px; }
  .world-comic .section-heading { width: calc(100% - 48px); }
  .world-comic :is(.world-features, .world-gallery) .section-heading { width: 100%; }
  .world-comic .heading-number { padding: 10px 18px; font-size: 8px; gap: 9px; letter-spacing: .08em; margin-bottom: 19px; }
  .world-comic .heading-number > span:first-child { font-size: 13px; }
  .world-comic .heading-number i { width: 20px; }
  .world-comic .section-heading h2 { font-size: clamp(28px, 7.5vw, 37px); }
  .world-comic .section-heading > p { font-size: 21px; margin-top: 12px; }
  .world-comic .film-card { border-width: 3px; box-shadow: 4px 5px #07163055; }
  .world-comic .film-card::after { inset: 4px; }
  .world-comic .film-card__title { left: 15px; bottom: 15px; padding: 10px 20px 11px 12px; max-width: 80%; border-left-width: 2px; }
  .world-comic .film-card__title .eyebrow { font-size: 8px; margin-bottom: 5px; }
  .world-comic .film-card__title h3 { font-size: 24px; }
  .world-comic .film-play { width: 60px; height: 51px; border-width: 3px; box-shadow: 3px 4px #07163099, inset 0 0 0 1px #fff0bb; }
  .world-comic .film-play svg { width: 19px; height: 19px; }
  .world-comic .round-arrow { width: 43px; height: 40px; }
  .world-comic .carousel-navigation { gap: 18px; margin-top: 20px; }
  .world-comic .artwork-note { font-size: 10px; line-height: 1.6; }
  .world-comic .features-list { margin-top: 44px; gap: 56px; }
  .world-comic .feature-row { gap: 24px; }
  .world-comic .feature-art { filter: drop-shadow(4px 5px #07163045); }
  .world-comic .feature-art__label { left: 15px; bottom: 16px; max-width: calc(100% - 30px); padding: 7px 11px 7px 8px; font-size: 8px; letter-spacing: .03em; }
  .world-comic .feature-copy, .world-comic .feature-row--reverse .feature-copy { margin: 0; padding: 0; filter: drop-shadow(4px 5px #07163035); }
  .world-comic .comic-feature-title { padding: 21px 23px 24px; }
  .world-comic .feature-number { font-size: 9px; margin-bottom: 14px; gap: 9px; }
  .world-comic .feature-copy h3 { font-size: clamp(25px, 6.7vw, 32px); line-height: 1.2; }
  .world-comic .comic-feature-body { padding: 21px 23px 25px; }
  .world-comic .comic-feature-body > p { font-size: 21px; line-height: 1.5; }
  .world-comic .comic-feature-body > .feature-aside { font-size: 19px; }
  .world-comic .text-link { font-size: 11px; padding: 11px 15px; }
  .world-comic .features-note { margin-top: 36px; }
  .world-comic .gallery-stage { border-width: 3px; box-shadow: 4px 5px #07163055; }
  .world-comic .gallery-slide figcaption { left: 14px; right: 14px; bottom: 15px; gap: 9px; }
  .world-comic .gallery-slide figcaption > div { padding: 10px 19px 11px 12px; border-left-width: 2px; }
  .world-comic .gallery-slide figcaption .eyebrow { font-size: 7px; letter-spacing: .055em; margin-bottom: 5px; }
  .world-comic .gallery-slide h3 { font-size: 27px; }
  .world-comic .gallery-count { padding: 8px; font-size: 9px; }
  .world-comic .gallery-count i { margin-inline: 4px; }
  .world-comic .gallery-enlarge { top: 13px; right: 13px; width: 32px; height: 30px; }
  .world-comic .gallery-bottom { gap: 7px; margin-top: 23px; }
  .world-comic .gallery-bottom > .round-arrow { width: 32px; height: 37px; border: 2px solid #071630; background: var(--comic-title-surface); }
  .world-comic .gallery-bottom > .round-arrow svg { width: 16px; }
  .world-comic .gallery-thumbnails { gap: 6px; }
  .world-comic .gallery-thumbnails button { border-width: 2px; padding: 3px; }
  .world-comic .gallery-thumbnails button span { font-size: 8px; margin: 7px 0 4px; }
  .world-comic .journey-end > p { font-size: 23px; }
  .world-comic .journey-end__link { font-size: 26px; padding: 16px 22px; gap: 18px; }
  .world-comic .world-footer nav { font-size: 10px; }
  .world-comic .comic-edition-badge { font-size: 8px; letter-spacing: .07em; }
  .world-comic .proposal-switcher { left: 10px; bottom: 10px; max-width: calc(100vw - 20px); font-size: 9px; box-shadow: 2px 3px #07163040; }
  .world-comic .proposal-switcher a { padding: 10px 8px; }
  .world-comic .world-dialog .world-dialog-copy h2 { font-size: 25px; }
}
@media (max-width: 380px) {
  .world-comic .section-heading { width: calc(100% - 40px); }
  .world-comic .chapter-nav a { font-size: 9px; padding: 10px 8px; gap: 4px; }
  .world-comic .chapter-nav a span { font-size: 9px; }
  .world-comic .comic-feature-title, .world-comic .comic-feature-body { padding-inline: 20px; }
  .world-comic .feature-copy h3 { font-size: 24px; }
  .world-comic .gallery-slide h3 { font-size: 24px; }
  .world-comic .gallery-count { padding: 7px 6px; font-size: 8px; }
  .world-comic .proposal-switcher a { font-size: 8px; padding: 10px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-comic *, .world-comic *::before, .world-comic *::after { animation: none !important; transition: none !important; }
}