/* Hero homepage animation concept "comic" (Comic Cuts): the hero illustration
 * gets a print treatment, is cut into comic panels, and every superpower plays
 * as a panel beat or a sticker. Every rule is scoped under .ha-v-comic; motion
 * and positions come from the seekable WAAPI timeline in v-comic.js. */

.ha-v-comic {
    --cc-shadow: rgba(14, 62, 68, 0.38);
    --cc-ink: var(--ha-navy);
}

/* Keep the comic inside the illustration box (a little bleed for shadows and
   camera shake); panels waiting off frame stay out of the headline column. */
.ha-stage.ha-v-comic {
    clip-path: inset(-2.8% -2.5%);
}

.ha-v-comic .hcomic-cam,
.ha-v-comic .hcomic-page,
.ha-v-comic .hcomic-pan,
.ha-v-comic .hcomic-pin,
.ha-v-comic .hcomic-fill {
    position: absolute;
    inset: 0;
}

.ha-v-comic .hcomic-cam {
    transform-origin: 50% 46%;
}

/* A page is one comic spread; its panel layer carries one hard drop shadow
   that lifts every panel off the hero. */
.ha-v-comic .hcomic-page {
    visibility: hidden;
}

.ha-v-comic .hcomic-pp {
    filter: drop-shadow(0.75cqw 0.85cqw 0 var(--cc-shadow));
}

.ha-v-comic .hcomic-page.hcomic-is-on {
    visibility: visible;
}

/* Halftone dissolve: the page root is a 330cqw strip masked opaque | graded
   dots | clear; the art sits in .hcomic-wipe-in at the box position. The
   timeline slides the strip and counter-slides the art (transforms only). */
.ha-v-comic .hcomic-page.hcomic-hw-r,
.ha-v-comic .hcomic-page.hcomic-hw-l {
    right: auto;
    width: 330cqw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.ha-v-comic .hcomic-page.hcomic-hw-r {
    left: -225cqw;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 88.84' preserveAspectRatio='none'%3E%3Crect x='-1' y='-2' width='111.5' height='92.84'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 3.2'%3E%3Cpath d='M110.8 -3.2V92.04' stroke-width='3.36'/%3E%3Cpath d='M112.4 -1.6V92.04' stroke-width='3.31'/%3E%3Cpath d='M114 -3.2V92.04' stroke-width='3.25'/%3E%3Cpath d='M115.6 -1.6V92.04' stroke-width='3.19'/%3E%3Cpath d='M117.2 -3.2V92.04' stroke-width='3.14'/%3E%3Cpath d='M118.8 -1.6V92.04' stroke-width='3.08'/%3E%3Cpath d='M120.4 -3.2V92.04' stroke-width='3.03'/%3E%3Cpath d='M122 -1.6V92.04' stroke-width='2.97'/%3E%3Cpath d='M123.6 -3.2V92.04' stroke-width='2.91'/%3E%3Cpath d='M125.2 -1.6V92.04' stroke-width='2.86'/%3E%3Cpath d='M126.8 -3.2V92.04' stroke-width='2.8'/%3E%3Cpath d='M128.4 -1.6V92.04' stroke-width='2.75'/%3E%3Cpath d='M130 -3.2V92.04' stroke-width='2.69'/%3E%3Cpath d='M131.6 -1.6V92.04' stroke-width='2.64'/%3E%3Cpath d='M133.2 -3.2V92.04' stroke-width='2.58'/%3E%3Cpath d='M134.8 -1.6V92.04' stroke-width='2.53'/%3E%3Cpath d='M136.4 -3.2V92.04' stroke-width='2.47'/%3E%3Cpath d='M138 -1.6V92.04' stroke-width='2.42'/%3E%3Cpath d='M139.6 -3.2V92.04' stroke-width='2.37'/%3E%3Cpath d='M141.2 -1.6V92.04' stroke-width='2.31'/%3E%3Cpath d='M142.8 -3.2V92.04' stroke-width='2.26'/%3E%3Cpath d='M144.4 -1.6V92.04' stroke-width='2.2'/%3E%3Cpath d='M146 -3.2V92.04' stroke-width='2.15'/%3E%3Cpath d='M147.6 -1.6V92.04' stroke-width='2.1'/%3E%3Cpath d='M149.2 -3.2V92.04' stroke-width='2.04'/%3E%3Cpath d='M150.8 -1.6V92.04' stroke-width='1.99'/%3E%3Cpath d='M152.4 -3.2V92.04' stroke-width='1.94'/%3E%3Cpath d='M154 -1.6V92.04' stroke-width='1.89'/%3E%3Cpath d='M155.6 -3.2V92.04' stroke-width='1.83'/%3E%3Cpath d='M157.2 -1.6V92.04' stroke-width='1.78'/%3E%3Cpath d='M158.8 -3.2V92.04' stroke-width='1.73'/%3E%3Cpath d='M160.4 -1.6V92.04' stroke-width='1.68'/%3E%3Cpath d='M162 -3.2V92.04' stroke-width='1.62'/%3E%3Cpath d='M163.6 -1.6V92.04' stroke-width='1.57'/%3E%3Cpath d='M165.2 -3.2V92.04' stroke-width='1.52'/%3E%3Cpath d='M166.8 -1.6V92.04' stroke-width='1.47'/%3E%3Cpath d='M168.4 -3.2V92.04' stroke-width='1.42'/%3E%3Cpath d='M170 -1.6V92.04' stroke-width='1.37'/%3E%3Cpath d='M171.6 -3.2V92.04' stroke-width='1.32'/%3E%3Cpath d='M173.2 -1.6V92.04' stroke-width='1.27'/%3E%3Cpath d='M174.8 -3.2V92.04' stroke-width='1.22'/%3E%3Cpath d='M176.4 -1.6V92.04' stroke-width='1.17'/%3E%3Cpath d='M178 -3.2V92.04' stroke-width='1.12'/%3E%3Cpath d='M179.6 -1.6V92.04' stroke-width='1.07'/%3E%3Cpath d='M181.2 -3.2V92.04' stroke-width='1.02'/%3E%3Cpath d='M182.8 -1.6V92.04' stroke-width='0.97'/%3E%3Cpath d='M184.4 -3.2V92.04' stroke-width='0.93'/%3E%3Cpath d='M186 -1.6V92.04' stroke-width='0.88'/%3E%3Cpath d='M187.6 -3.2V92.04' stroke-width='0.83'/%3E%3Cpath d='M189.2 -1.6V92.04' stroke-width='0.78'/%3E%3Cpath d='M190.8 -3.2V92.04' stroke-width='0.74'/%3E%3Cpath d='M192.4 -1.6V92.04' stroke-width='0.69'/%3E%3Cpath d='M194 -3.2V92.04' stroke-width='0.65'/%3E%3Cpath d='M195.6 -1.6V92.04' stroke-width='0.6'/%3E%3Cpath d='M197.2 -3.2V92.04' stroke-width='0.56'/%3E%3Cpath d='M198.8 -1.6V92.04' stroke-width='0.51'/%3E%3Cpath d='M200.4 -3.2V92.04' stroke-width='0.47'/%3E%3Cpath d='M202 -1.6V92.04' stroke-width='0.42'/%3E%3Cpath d='M203.6 -3.2V92.04' stroke-width='0.38'/%3E%3Cpath d='M205.2 -1.6V92.04' stroke-width='0.34'/%3E%3Cpath d='M206.8 -3.2V92.04' stroke-width='0.3'/%3E%3Cpath d='M208.4 -1.6V92.04' stroke-width='0.26'/%3E%3Cpath d='M210 -3.2V92.04' stroke-width='0.22'/%3E%3Cpath d='M211.6 -1.6V92.04' stroke-width='0.18'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 88.84' preserveAspectRatio='none'%3E%3Crect x='-1' y='-2' width='111.5' height='92.84'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 3.2'%3E%3Cpath d='M110.8 -3.2V92.04' stroke-width='3.36'/%3E%3Cpath d='M112.4 -1.6V92.04' stroke-width='3.31'/%3E%3Cpath d='M114 -3.2V92.04' stroke-width='3.25'/%3E%3Cpath d='M115.6 -1.6V92.04' stroke-width='3.19'/%3E%3Cpath d='M117.2 -3.2V92.04' stroke-width='3.14'/%3E%3Cpath d='M118.8 -1.6V92.04' stroke-width='3.08'/%3E%3Cpath d='M120.4 -3.2V92.04' stroke-width='3.03'/%3E%3Cpath d='M122 -1.6V92.04' stroke-width='2.97'/%3E%3Cpath d='M123.6 -3.2V92.04' stroke-width='2.91'/%3E%3Cpath d='M125.2 -1.6V92.04' stroke-width='2.86'/%3E%3Cpath d='M126.8 -3.2V92.04' stroke-width='2.8'/%3E%3Cpath d='M128.4 -1.6V92.04' stroke-width='2.75'/%3E%3Cpath d='M130 -3.2V92.04' stroke-width='2.69'/%3E%3Cpath d='M131.6 -1.6V92.04' stroke-width='2.64'/%3E%3Cpath d='M133.2 -3.2V92.04' stroke-width='2.58'/%3E%3Cpath d='M134.8 -1.6V92.04' stroke-width='2.53'/%3E%3Cpath d='M136.4 -3.2V92.04' stroke-width='2.47'/%3E%3Cpath d='M138 -1.6V92.04' stroke-width='2.42'/%3E%3Cpath d='M139.6 -3.2V92.04' stroke-width='2.37'/%3E%3Cpath d='M141.2 -1.6V92.04' stroke-width='2.31'/%3E%3Cpath d='M142.8 -3.2V92.04' stroke-width='2.26'/%3E%3Cpath d='M144.4 -1.6V92.04' stroke-width='2.2'/%3E%3Cpath d='M146 -3.2V92.04' stroke-width='2.15'/%3E%3Cpath d='M147.6 -1.6V92.04' stroke-width='2.1'/%3E%3Cpath d='M149.2 -3.2V92.04' stroke-width='2.04'/%3E%3Cpath d='M150.8 -1.6V92.04' stroke-width='1.99'/%3E%3Cpath d='M152.4 -3.2V92.04' stroke-width='1.94'/%3E%3Cpath d='M154 -1.6V92.04' stroke-width='1.89'/%3E%3Cpath d='M155.6 -3.2V92.04' stroke-width='1.83'/%3E%3Cpath d='M157.2 -1.6V92.04' stroke-width='1.78'/%3E%3Cpath d='M158.8 -3.2V92.04' stroke-width='1.73'/%3E%3Cpath d='M160.4 -1.6V92.04' stroke-width='1.68'/%3E%3Cpath d='M162 -3.2V92.04' stroke-width='1.62'/%3E%3Cpath d='M163.6 -1.6V92.04' stroke-width='1.57'/%3E%3Cpath d='M165.2 -3.2V92.04' stroke-width='1.52'/%3E%3Cpath d='M166.8 -1.6V92.04' stroke-width='1.47'/%3E%3Cpath d='M168.4 -3.2V92.04' stroke-width='1.42'/%3E%3Cpath d='M170 -1.6V92.04' stroke-width='1.37'/%3E%3Cpath d='M171.6 -3.2V92.04' stroke-width='1.32'/%3E%3Cpath d='M173.2 -1.6V92.04' stroke-width='1.27'/%3E%3Cpath d='M174.8 -3.2V92.04' stroke-width='1.22'/%3E%3Cpath d='M176.4 -1.6V92.04' stroke-width='1.17'/%3E%3Cpath d='M178 -3.2V92.04' stroke-width='1.12'/%3E%3Cpath d='M179.6 -1.6V92.04' stroke-width='1.07'/%3E%3Cpath d='M181.2 -3.2V92.04' stroke-width='1.02'/%3E%3Cpath d='M182.8 -1.6V92.04' stroke-width='0.97'/%3E%3Cpath d='M184.4 -3.2V92.04' stroke-width='0.93'/%3E%3Cpath d='M186 -1.6V92.04' stroke-width='0.88'/%3E%3Cpath d='M187.6 -3.2V92.04' stroke-width='0.83'/%3E%3Cpath d='M189.2 -1.6V92.04' stroke-width='0.78'/%3E%3Cpath d='M190.8 -3.2V92.04' stroke-width='0.74'/%3E%3Cpath d='M192.4 -1.6V92.04' stroke-width='0.69'/%3E%3Cpath d='M194 -3.2V92.04' stroke-width='0.65'/%3E%3Cpath d='M195.6 -1.6V92.04' stroke-width='0.6'/%3E%3Cpath d='M197.2 -3.2V92.04' stroke-width='0.56'/%3E%3Cpath d='M198.8 -1.6V92.04' stroke-width='0.51'/%3E%3Cpath d='M200.4 -3.2V92.04' stroke-width='0.47'/%3E%3Cpath d='M202 -1.6V92.04' stroke-width='0.42'/%3E%3Cpath d='M203.6 -3.2V92.04' stroke-width='0.38'/%3E%3Cpath d='M205.2 -1.6V92.04' stroke-width='0.34'/%3E%3Cpath d='M206.8 -3.2V92.04' stroke-width='0.3'/%3E%3Cpath d='M208.4 -1.6V92.04' stroke-width='0.26'/%3E%3Cpath d='M210 -3.2V92.04' stroke-width='0.22'/%3E%3Cpath d='M211.6 -1.6V92.04' stroke-width='0.18'/%3E%3C/g%3E%3C/svg%3E");
}

.ha-v-comic .hcomic-page.hcomic-hw-l {
    left: -5cqw;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 88.84' preserveAspectRatio='none'%3E%3Crect x='219.5' y='-2' width='111.5' height='92.84'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 3.2'%3E%3Cpath d='M219.2 -3.2V92.04' stroke-width='3.36'/%3E%3Cpath d='M217.6 -1.6V92.04' stroke-width='3.31'/%3E%3Cpath d='M216 -3.2V92.04' stroke-width='3.25'/%3E%3Cpath d='M214.4 -1.6V92.04' stroke-width='3.19'/%3E%3Cpath d='M212.8 -3.2V92.04' stroke-width='3.14'/%3E%3Cpath d='M211.2 -1.6V92.04' stroke-width='3.08'/%3E%3Cpath d='M209.6 -3.2V92.04' stroke-width='3.03'/%3E%3Cpath d='M208 -1.6V92.04' stroke-width='2.97'/%3E%3Cpath d='M206.4 -3.2V92.04' stroke-width='2.91'/%3E%3Cpath d='M204.8 -1.6V92.04' stroke-width='2.86'/%3E%3Cpath d='M203.2 -3.2V92.04' stroke-width='2.8'/%3E%3Cpath d='M201.6 -1.6V92.04' stroke-width='2.75'/%3E%3Cpath d='M200 -3.2V92.04' stroke-width='2.69'/%3E%3Cpath d='M198.4 -1.6V92.04' stroke-width='2.64'/%3E%3Cpath d='M196.8 -3.2V92.04' stroke-width='2.58'/%3E%3Cpath d='M195.2 -1.6V92.04' stroke-width='2.53'/%3E%3Cpath d='M193.6 -3.2V92.04' stroke-width='2.47'/%3E%3Cpath d='M192 -1.6V92.04' stroke-width='2.42'/%3E%3Cpath d='M190.4 -3.2V92.04' stroke-width='2.37'/%3E%3Cpath d='M188.8 -1.6V92.04' stroke-width='2.31'/%3E%3Cpath d='M187.2 -3.2V92.04' stroke-width='2.26'/%3E%3Cpath d='M185.6 -1.6V92.04' stroke-width='2.2'/%3E%3Cpath d='M184 -3.2V92.04' stroke-width='2.15'/%3E%3Cpath d='M182.4 -1.6V92.04' stroke-width='2.1'/%3E%3Cpath d='M180.8 -3.2V92.04' stroke-width='2.04'/%3E%3Cpath d='M179.2 -1.6V92.04' stroke-width='1.99'/%3E%3Cpath d='M177.6 -3.2V92.04' stroke-width='1.94'/%3E%3Cpath d='M176 -1.6V92.04' stroke-width='1.89'/%3E%3Cpath d='M174.4 -3.2V92.04' stroke-width='1.83'/%3E%3Cpath d='M172.8 -1.6V92.04' stroke-width='1.78'/%3E%3Cpath d='M171.2 -3.2V92.04' stroke-width='1.73'/%3E%3Cpath d='M169.6 -1.6V92.04' stroke-width='1.68'/%3E%3Cpath d='M168 -3.2V92.04' stroke-width='1.62'/%3E%3Cpath d='M166.4 -1.6V92.04' stroke-width='1.57'/%3E%3Cpath d='M164.8 -3.2V92.04' stroke-width='1.52'/%3E%3Cpath d='M163.2 -1.6V92.04' stroke-width='1.47'/%3E%3Cpath d='M161.6 -3.2V92.04' stroke-width='1.42'/%3E%3Cpath d='M160 -1.6V92.04' stroke-width='1.37'/%3E%3Cpath d='M158.4 -3.2V92.04' stroke-width='1.32'/%3E%3Cpath d='M156.8 -1.6V92.04' stroke-width='1.27'/%3E%3Cpath d='M155.2 -3.2V92.04' stroke-width='1.22'/%3E%3Cpath d='M153.6 -1.6V92.04' stroke-width='1.17'/%3E%3Cpath d='M152 -3.2V92.04' stroke-width='1.12'/%3E%3Cpath d='M150.4 -1.6V92.04' stroke-width='1.07'/%3E%3Cpath d='M148.8 -3.2V92.04' stroke-width='1.02'/%3E%3Cpath d='M147.2 -1.6V92.04' stroke-width='0.97'/%3E%3Cpath d='M145.6 -3.2V92.04' stroke-width='0.93'/%3E%3Cpath d='M144 -1.6V92.04' stroke-width='0.88'/%3E%3Cpath d='M142.4 -3.2V92.04' stroke-width='0.83'/%3E%3Cpath d='M140.8 -1.6V92.04' stroke-width='0.78'/%3E%3Cpath d='M139.2 -3.2V92.04' stroke-width='0.74'/%3E%3Cpath d='M137.6 -1.6V92.04' stroke-width='0.69'/%3E%3Cpath d='M136 -3.2V92.04' stroke-width='0.65'/%3E%3Cpath d='M134.4 -1.6V92.04' stroke-width='0.6'/%3E%3Cpath d='M132.8 -3.2V92.04' stroke-width='0.56'/%3E%3Cpath d='M131.2 -1.6V92.04' stroke-width='0.51'/%3E%3Cpath d='M129.6 -3.2V92.04' stroke-width='0.47'/%3E%3Cpath d='M128 -1.6V92.04' stroke-width='0.42'/%3E%3Cpath d='M126.4 -3.2V92.04' stroke-width='0.38'/%3E%3Cpath d='M124.8 -1.6V92.04' stroke-width='0.34'/%3E%3Cpath d='M123.2 -3.2V92.04' stroke-width='0.3'/%3E%3Cpath d='M121.6 -1.6V92.04' stroke-width='0.26'/%3E%3Cpath d='M120 -3.2V92.04' stroke-width='0.22'/%3E%3Cpath d='M118.4 -1.6V92.04' stroke-width='0.18'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 88.84' preserveAspectRatio='none'%3E%3Crect x='219.5' y='-2' width='111.5' height='92.84'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 3.2'%3E%3Cpath d='M219.2 -3.2V92.04' stroke-width='3.36'/%3E%3Cpath d='M217.6 -1.6V92.04' stroke-width='3.31'/%3E%3Cpath d='M216 -3.2V92.04' stroke-width='3.25'/%3E%3Cpath d='M214.4 -1.6V92.04' stroke-width='3.19'/%3E%3Cpath d='M212.8 -3.2V92.04' stroke-width='3.14'/%3E%3Cpath d='M211.2 -1.6V92.04' stroke-width='3.08'/%3E%3Cpath d='M209.6 -3.2V92.04' stroke-width='3.03'/%3E%3Cpath d='M208 -1.6V92.04' stroke-width='2.97'/%3E%3Cpath d='M206.4 -3.2V92.04' stroke-width='2.91'/%3E%3Cpath d='M204.8 -1.6V92.04' stroke-width='2.86'/%3E%3Cpath d='M203.2 -3.2V92.04' stroke-width='2.8'/%3E%3Cpath d='M201.6 -1.6V92.04' stroke-width='2.75'/%3E%3Cpath d='M200 -3.2V92.04' stroke-width='2.69'/%3E%3Cpath d='M198.4 -1.6V92.04' stroke-width='2.64'/%3E%3Cpath d='M196.8 -3.2V92.04' stroke-width='2.58'/%3E%3Cpath d='M195.2 -1.6V92.04' stroke-width='2.53'/%3E%3Cpath d='M193.6 -3.2V92.04' stroke-width='2.47'/%3E%3Cpath d='M192 -1.6V92.04' stroke-width='2.42'/%3E%3Cpath d='M190.4 -3.2V92.04' stroke-width='2.37'/%3E%3Cpath d='M188.8 -1.6V92.04' stroke-width='2.31'/%3E%3Cpath d='M187.2 -3.2V92.04' stroke-width='2.26'/%3E%3Cpath d='M185.6 -1.6V92.04' stroke-width='2.2'/%3E%3Cpath d='M184 -3.2V92.04' stroke-width='2.15'/%3E%3Cpath d='M182.4 -1.6V92.04' stroke-width='2.1'/%3E%3Cpath d='M180.8 -3.2V92.04' stroke-width='2.04'/%3E%3Cpath d='M179.2 -1.6V92.04' stroke-width='1.99'/%3E%3Cpath d='M177.6 -3.2V92.04' stroke-width='1.94'/%3E%3Cpath d='M176 -1.6V92.04' stroke-width='1.89'/%3E%3Cpath d='M174.4 -3.2V92.04' stroke-width='1.83'/%3E%3Cpath d='M172.8 -1.6V92.04' stroke-width='1.78'/%3E%3Cpath d='M171.2 -3.2V92.04' stroke-width='1.73'/%3E%3Cpath d='M169.6 -1.6V92.04' stroke-width='1.68'/%3E%3Cpath d='M168 -3.2V92.04' stroke-width='1.62'/%3E%3Cpath d='M166.4 -1.6V92.04' stroke-width='1.57'/%3E%3Cpath d='M164.8 -3.2V92.04' stroke-width='1.52'/%3E%3Cpath d='M163.2 -1.6V92.04' stroke-width='1.47'/%3E%3Cpath d='M161.6 -3.2V92.04' stroke-width='1.42'/%3E%3Cpath d='M160 -1.6V92.04' stroke-width='1.37'/%3E%3Cpath d='M158.4 -3.2V92.04' stroke-width='1.32'/%3E%3Cpath d='M156.8 -1.6V92.04' stroke-width='1.27'/%3E%3Cpath d='M155.2 -3.2V92.04' stroke-width='1.22'/%3E%3Cpath d='M153.6 -1.6V92.04' stroke-width='1.17'/%3E%3Cpath d='M152 -3.2V92.04' stroke-width='1.12'/%3E%3Cpath d='M150.4 -1.6V92.04' stroke-width='1.07'/%3E%3Cpath d='M148.8 -3.2V92.04' stroke-width='1.02'/%3E%3Cpath d='M147.2 -1.6V92.04' stroke-width='0.97'/%3E%3Cpath d='M145.6 -3.2V92.04' stroke-width='0.93'/%3E%3Cpath d='M144 -1.6V92.04' stroke-width='0.88'/%3E%3Cpath d='M142.4 -3.2V92.04' stroke-width='0.83'/%3E%3Cpath d='M140.8 -1.6V92.04' stroke-width='0.78'/%3E%3Cpath d='M139.2 -3.2V92.04' stroke-width='0.74'/%3E%3Cpath d='M137.6 -1.6V92.04' stroke-width='0.69'/%3E%3Cpath d='M136 -3.2V92.04' stroke-width='0.65'/%3E%3Cpath d='M134.4 -1.6V92.04' stroke-width='0.6'/%3E%3Cpath d='M132.8 -3.2V92.04' stroke-width='0.56'/%3E%3Cpath d='M131.2 -1.6V92.04' stroke-width='0.51'/%3E%3Cpath d='M129.6 -3.2V92.04' stroke-width='0.47'/%3E%3Cpath d='M128 -1.6V92.04' stroke-width='0.42'/%3E%3Cpath d='M126.4 -3.2V92.04' stroke-width='0.38'/%3E%3Cpath d='M124.8 -1.6V92.04' stroke-width='0.34'/%3E%3Cpath d='M123.2 -3.2V92.04' stroke-width='0.3'/%3E%3Cpath d='M121.6 -1.6V92.04' stroke-width='0.26'/%3E%3Cpath d='M120 -3.2V92.04' stroke-width='0.22'/%3E%3Cpath d='M118.4 -1.6V92.04' stroke-width='0.18'/%3E%3C/g%3E%3C/svg%3E");
}

.ha-v-comic .hcomic-wipe-in {
    position: absolute;
    top: 0;
    width: 100cqw;
    height: 100%;
}

.ha-v-comic .hcomic-backing {
    position: absolute;
    left: 3.4cqw;
    top: 7.4cqw;
    width: 93.6cqw;
    height: 69.8cqw;
    background: var(--ha-teal);
}

.ha-v-comic .hcomic-backing.hcomic-gone {
    visibility: hidden;
}

.ha-v-comic .hcomic-hw-r > .hcomic-wipe-in { left: 225cqw; }
.ha-v-comic .hcomic-hw-l > .hcomic-wipe-in { left: 5cqw; }

.ha-v-comic .hcomic-page.hcomic-is-top {
    z-index: 20;
}

/* The sticker board skips the filter: a painted shadow on a full-box layer
   (same pivot as the panel, so it follows the slam exactly). */
.ha-v-comic .hcomic-noshadow .hcomic-pp {
    filter: none;
}

.ha-v-comic .hcomic-board-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--cc-shadow), var(--cc-shadow)) 4.75cqw 8.85cqw / 92cqw 68cqw no-repeat;
}

.ha-v-comic .hcomic-hud {
    z-index: 30;
}

/* Slices rotate around their own middles when the frame splits. */
.ha-v-comic .hcomic-pan.hcomic-o-l { transform-origin: 22% 48%; }
.ha-v-comic .hcomic-pan.hcomic-o-c { transform-origin: 50% 48%; }
.ha-v-comic .hcomic-pan.hcomic-o-r { transform-origin: 80% 48%; }
.ha-v-comic .hcomic-pan.hcomic-o-inset { transform-origin: 74.25% 63.2%; }
.ha-v-comic .hcomic-board { transform-origin: 50% 46%; }

/* Panels: the outer layer is the ink border, the inner one the art board. */
.ha-v-comic .hcomic-pan {
    background: var(--ha-navy);
}

.ha-v-comic .hcomic-pan.hcomic-k-coral {
    background: var(--ha-coral);
}

.ha-v-comic .hcomic-pin {
    overflow: hidden;
    background: var(--ha-paper);
}

.ha-v-comic .hcomic-bg-navy { background: var(--ha-navy); }
.ha-v-comic .hcomic-bg-teal { background: var(--ha-teal); }
.ha-v-comic .hcomic-bg-light { background: var(--ha-teal-light); }
.ha-v-comic .hcomic-bg-ink { background: var(--ha-ink-dark); }
.ha-v-comic .hcomic-bg-coral { background: var(--ha-coral); }

/* Impact frame: a panel flattens to one ink color for two frames. */
.ha-v-comic .hcomic-flat {
    position: absolute;
    inset: 0;
    background: var(--ha-navy);
    visibility: hidden;
}

.ha-v-comic .hcomic-flat.hcomic-is-on {
    visibility: visible;
}

.ha-v-comic .hcomic-flat.hcomic-k-coral { background: var(--ha-coral); }
.ha-v-comic .hcomic-flat.hcomic-k-paper { background: var(--ha-paper); }

/* Ben-Day dots: an even screen and a graded corner screen (SVG mask). */
.ha-v-comic .hcomic-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, var(--cc-dot, rgba(27, 137, 128, 0.16)) 0.24cqw, transparent 0.29cqw),
        radial-gradient(circle, var(--cc-dot, rgba(27, 137, 128, 0.16)) 0.24cqw, transparent 0.29cqw);
    background-size: 1.7cqw 1.7cqw;
    background-position: 0 0, 0.85cqw 0.85cqw;
}

.ha-v-comic .hcomic-bg-navy > .hcomic-dots { --cc-dot: rgba(76, 181, 174, 0.2); }
.ha-v-comic .hcomic-bg-teal > .hcomic-dots { --cc-dot: rgba(18, 124, 116, 0.32); }
.ha-v-comic .hcomic-bg-ink > .hcomic-dots { --cc-dot: rgba(76, 181, 174, 0.34); }
.ha-v-comic .hcomic-bg-coral > .hcomic-dots { --cc-dot: rgba(232, 93, 76, 0.28); }

.ha-v-comic .hcomic-ht {
    position: absolute;
    inset: 0;
    background: var(--ha-teal);
    opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 2.04'%3E%3Cpath d='M0 106.56L106.56 0' stroke-width='0.16'/%3E%3Cpath d='M0 109.44L109.44 0' stroke-width='0.21'/%3E%3Cpath d='M0 112.32L112.32 0' stroke-width='0.27'/%3E%3Cpath d='M0 115.2L115.2 0' stroke-width='0.33'/%3E%3Cpath d='M0 118.08L118.08 0' stroke-width='0.39'/%3E%3Cpath d='M0 120.96L120.96 0' stroke-width='0.46'/%3E%3Cpath d='M0 123.84L123.84 0' stroke-width='0.53'/%3E%3Cpath d='M0 126.72L126.72 0' stroke-width='0.6'/%3E%3Cpath d='M0 129.6L129.6 0' stroke-width='0.68'/%3E%3Cpath d='M0 132.48L132.48 0' stroke-width='0.75'/%3E%3Cpath d='M0 135.36L135.36 0' stroke-width='0.83'/%3E%3Cpath d='M0 138.24L138.24 0' stroke-width='0.9'/%3E%3Cpath d='M0 141.12L141.12 0' stroke-width='0.98'/%3E%3Cpath d='M0 144L144 0' stroke-width='1.06'/%3E%3Cpath d='M0 146.88L146.88 0' stroke-width='1.13'/%3E%3Cpath d='M0 149.76L149.76 0' stroke-width='1.21'/%3E%3Cpath d='M0 152.64L152.64 0' stroke-width='1.28'/%3E%3Cpath d='M0 155.52L155.52 0' stroke-width='1.35'/%3E%3Cpath d='M0 158.4L158.4 0' stroke-width='1.42'/%3E%3Cpath d='M0 161.28L161.28 0' stroke-width='1.49'/%3E%3Cpath d='M0 164.16L164.16 0' stroke-width='1.55'/%3E%3Cpath d='M0 167.04L167.04 0' stroke-width='1.61'/%3E%3Cpath d='M0 169.92L169.92 0' stroke-width='1.67'/%3E%3Cpath d='M0 172.8L172.8 0' stroke-width='1.73'/%3E%3Cpath d='M0 175.68L175.68 0' stroke-width='1.78'/%3E%3Cpath d='M0 178.56L178.56 0' stroke-width='1.82'/%3E%3Cpath d='M0 181.44L181.44 0' stroke-width='1.87'/%3E%3Cpath d='M0 184.32L184.32 0' stroke-width='1.9'/%3E%3Cpath d='M0 187.2L187.2 0' stroke-width='1.93'/%3E%3Cpath d='M0 190.08L190.08 0' stroke-width='1.96'/%3E%3Cpath d='M0 192.96L192.96 0' stroke-width='1.98'/%3E%3Cpath d='M0 195.84L195.84 0' stroke-width='1.99'/%3E%3Cpath d='M0 198.72L198.72 0' stroke-width='2'/%3E%3Cpath d='M0 201.6L201.6 0' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 2.04'%3E%3Cpath d='M0 106.56L106.56 0' stroke-width='0.16'/%3E%3Cpath d='M0 109.44L109.44 0' stroke-width='0.21'/%3E%3Cpath d='M0 112.32L112.32 0' stroke-width='0.27'/%3E%3Cpath d='M0 115.2L115.2 0' stroke-width='0.33'/%3E%3Cpath d='M0 118.08L118.08 0' stroke-width='0.39'/%3E%3Cpath d='M0 120.96L120.96 0' stroke-width='0.46'/%3E%3Cpath d='M0 123.84L123.84 0' stroke-width='0.53'/%3E%3Cpath d='M0 126.72L126.72 0' stroke-width='0.6'/%3E%3Cpath d='M0 129.6L129.6 0' stroke-width='0.68'/%3E%3Cpath d='M0 132.48L132.48 0' stroke-width='0.75'/%3E%3Cpath d='M0 135.36L135.36 0' stroke-width='0.83'/%3E%3Cpath d='M0 138.24L138.24 0' stroke-width='0.9'/%3E%3Cpath d='M0 141.12L141.12 0' stroke-width='0.98'/%3E%3Cpath d='M0 144L144 0' stroke-width='1.06'/%3E%3Cpath d='M0 146.88L146.88 0' stroke-width='1.13'/%3E%3Cpath d='M0 149.76L149.76 0' stroke-width='1.21'/%3E%3Cpath d='M0 152.64L152.64 0' stroke-width='1.28'/%3E%3Cpath d='M0 155.52L155.52 0' stroke-width='1.35'/%3E%3Cpath d='M0 158.4L158.4 0' stroke-width='1.42'/%3E%3Cpath d='M0 161.28L161.28 0' stroke-width='1.49'/%3E%3Cpath d='M0 164.16L164.16 0' stroke-width='1.55'/%3E%3Cpath d='M0 167.04L167.04 0' stroke-width='1.61'/%3E%3Cpath d='M0 169.92L169.92 0' stroke-width='1.67'/%3E%3Cpath d='M0 172.8L172.8 0' stroke-width='1.73'/%3E%3Cpath d='M0 175.68L175.68 0' stroke-width='1.78'/%3E%3Cpath d='M0 178.56L178.56 0' stroke-width='1.82'/%3E%3Cpath d='M0 181.44L181.44 0' stroke-width='1.87'/%3E%3Cpath d='M0 184.32L184.32 0' stroke-width='1.9'/%3E%3Cpath d='M0 187.2L187.2 0' stroke-width='1.93'/%3E%3Cpath d='M0 190.08L190.08 0' stroke-width='1.96'/%3E%3Cpath d='M0 192.96L192.96 0' stroke-width='1.98'/%3E%3Cpath d='M0 195.84L195.84 0' stroke-width='1.99'/%3E%3Cpath d='M0 198.72L198.72 0' stroke-width='2'/%3E%3Cpath d='M0 201.6L201.6 0' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 62cqw 62cqw;
    mask-size: 62cqw 62cqw;
    -webkit-mask-position: right 4cqw bottom 12.84cqw;
    mask-position: right 4cqw bottom 12.84cqw;
}

.ha-v-comic .hcomic-ht.hcomic-c-bl { scale: -1 1; }
.ha-v-comic .hcomic-ht.hcomic-c-tr { scale: 1 -1; }
.ha-v-comic .hcomic-ht.hcomic-c-tl { scale: -1 -1; }
.ha-v-comic .hcomic-bg-navy > .hcomic-ht { opacity: 0.42; }
.ha-v-comic .hcomic-bg-teal > .hcomic-ht { background: var(--ha-ink-dark); opacity: 0.55; }
.ha-v-comic .hcomic-bg-ink > .hcomic-ht { background: var(--ha-teal); opacity: 0.55; }
.ha-v-comic .hcomic-bg-coral > .hcomic-ht { background: var(--ha-red); opacity: 0.45; }
.ha-v-comic .hcomic-bg-light > .hcomic-ht { opacity: 0.6; }

/* Focus lines radiating from a point (manga emanata), boiled on twos. */
.ha-v-comic .hcomic-focus {
    position: absolute;
    left: 0;
    top: 0;
    width: 150cqw;
    height: 150cqw;
    background: repeating-conic-gradient(from 0deg, var(--cc-fl, rgba(26, 43, 60, 0.3)) 0deg 0.8deg, transparent 0.8deg 7.2deg),
        repeating-conic-gradient(from 3deg, var(--cc-fl, rgba(26, 43, 60, 0.3)) 0deg 0.45deg, transparent 0.45deg 11.3deg);
    -webkit-mask: radial-gradient(circle, transparent 17cqw, #000 30cqw);
    mask: radial-gradient(circle, transparent 17cqw, #000 30cqw);
    visibility: hidden;
}

.ha-v-comic .hcomic-focus.hcomic-is-on { visibility: visible; }
.ha-v-comic .hcomic-bg-navy .hcomic-focus,
.ha-v-comic .hcomic-bg-ink .hcomic-focus { --cc-fl: rgba(232, 246, 245, 0.22); }
.ha-v-comic .hcomic-bg-teal .hcomic-focus { --cc-fl: rgba(18, 90, 92, 0.34); }

/* Speed lines (tapered strokes, SVG mask). */
.ha-v-comic .hcomic-speed {
    position: absolute;
    left: 0;
    top: 0;
    width: 70cqw;
    height: 40cqw;
    background: var(--cc-sp, rgba(253, 254, 253, 0.42));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M38.6 3.68L100 3.35L100 4.02Z'/%3E%3Cpath d='M38.88 7.06L100 6.76L100 7.37Z'/%3E%3Cpath d='M57.79 12.89L100 12L100 13.78Z'/%3E%3Cpath d='M32.39 14.49L100 13.81L100 15.17Z'/%3E%3Cpath d='M29.15 17.96L100 17.63L100 18.3Z'/%3E%3Cpath d='M59.95 23.76L100 22.85L100 24.67Z'/%3E%3Cpath d='M34.11 27.01L100 26.6L100 27.41Z'/%3E%3Cpath d='M62.44 30.12L100 29.29L100 30.96Z'/%3E%3Cpath d='M49.5 34.47L100 34.15L100 34.79Z'/%3E%3Cpath d='M27.25 37.48L100 36.83L100 38.14Z'/%3E%3Cpath d='M66.6 40.52L100 40.2L100 40.85Z'/%3E%3Cpath d='M33.61 45.27L100 44.58L100 45.96Z'/%3E%3Cpath d='M63.88 49.01L100 48.31L100 49.72Z'/%3E%3Cpath d='M39.53 52.45L100 51.8L100 53.11Z'/%3E%3Cpath d='M26.39 55.35L100 54.75L100 55.94Z'/%3E%3Cpath d='M20.25 58.11L100 57.21L100 59.01Z'/%3E%3Cpath d='M32.58 60.98L100 60.23L100 61.73Z'/%3E%3Cpath d='M35.83 66.01L100 65.38L100 66.63Z'/%3E%3Cpath d='M39.47 70.96L100 70.55L100 71.37Z'/%3E%3Cpath d='M32.37 72.28L100 71.52L100 73.03Z'/%3E%3Cpath d='M34.67 76.34L100 75.49L100 77.18Z'/%3E%3Cpath d='M23.25 80.54L100 79.57L100 81.51Z'/%3E%3Cpath d='M57.79 82.72L100 82.28L100 83.15Z'/%3E%3Cpath d='M35.22 87.93L100 87.49L100 88.37Z'/%3E%3Cpath d='M20.23 90.28L100 89.67L100 90.9Z'/%3E%3Cpath d='M67.65 95.4L100 94.43L100 96.37Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M38.6 3.68L100 3.35L100 4.02Z'/%3E%3Cpath d='M38.88 7.06L100 6.76L100 7.37Z'/%3E%3Cpath d='M57.79 12.89L100 12L100 13.78Z'/%3E%3Cpath d='M32.39 14.49L100 13.81L100 15.17Z'/%3E%3Cpath d='M29.15 17.96L100 17.63L100 18.3Z'/%3E%3Cpath d='M59.95 23.76L100 22.85L100 24.67Z'/%3E%3Cpath d='M34.11 27.01L100 26.6L100 27.41Z'/%3E%3Cpath d='M62.44 30.12L100 29.29L100 30.96Z'/%3E%3Cpath d='M49.5 34.47L100 34.15L100 34.79Z'/%3E%3Cpath d='M27.25 37.48L100 36.83L100 38.14Z'/%3E%3Cpath d='M66.6 40.52L100 40.2L100 40.85Z'/%3E%3Cpath d='M33.61 45.27L100 44.58L100 45.96Z'/%3E%3Cpath d='M63.88 49.01L100 48.31L100 49.72Z'/%3E%3Cpath d='M39.53 52.45L100 51.8L100 53.11Z'/%3E%3Cpath d='M26.39 55.35L100 54.75L100 55.94Z'/%3E%3Cpath d='M20.25 58.11L100 57.21L100 59.01Z'/%3E%3Cpath d='M32.58 60.98L100 60.23L100 61.73Z'/%3E%3Cpath d='M35.83 66.01L100 65.38L100 66.63Z'/%3E%3Cpath d='M39.47 70.96L100 70.55L100 71.37Z'/%3E%3Cpath d='M32.37 72.28L100 71.52L100 73.03Z'/%3E%3Cpath d='M34.67 76.34L100 75.49L100 77.18Z'/%3E%3Cpath d='M23.25 80.54L100 79.57L100 81.51Z'/%3E%3Cpath d='M57.79 82.72L100 82.28L100 83.15Z'/%3E%3Cpath d='M35.22 87.93L100 87.49L100 88.37Z'/%3E%3Cpath d='M20.23 90.28L100 89.67L100 90.9Z'/%3E%3Cpath d='M67.65 95.4L100 94.43L100 96.37Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.ha-v-comic .hcomic-speed.hcomic-k-navy { --cc-sp: rgba(26, 43, 60, 0.3); }
.ha-v-comic .hcomic-speed.hcomic-k-teal { --cc-sp: rgba(76, 181, 174, 0.55); }

/* The illustration and its print layers (clones of the hero image). */
.ha-v-comic .hcomic-artw {
    position: absolute;
    left: 0;
    top: 0;
    width: 100cqw;
    height: 88.84cqw;
    transform-origin: 0 0;
}

.ha-v-comic .hcomic-art {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100cqw;
    height: auto;
}

/* Silhouettes reuse the illustration's alpha as a mask (twice, which squares
   the alpha and drops the faint speckle around the art). */
.ha-v-comic .hcomic-sil,
.ha-v-comic .hcomic-shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100cqw;
    height: 88.84cqw;
}

.ha-v-comic .hcomic-sil {
    -webkit-mask: url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("/frontpage-main.png") 0 0 / 100% 100% no-repeat;
    -webkit-mask-composite: source-in;
    mask: url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("/frontpage-main.png") 0 0 / 100% 100% no-repeat;
    mask-composite: intersect;
}

.ha-v-comic .hcomic-sil.hcomic-k-coral {
    background: var(--ha-coral);
    translate: 1.1cqw 0.9cqw;
}

.ha-v-comic .hcomic-sil.hcomic-k-navy {
    background: var(--ha-navy);
    visibility: hidden;
}

.ha-v-comic .hcomic-sil.hcomic-k-navy.hcomic-is-on {
    visibility: visible;
}

/* Halftone shading printed onto the art: graded dots, clipped to its alpha. */
.ha-v-comic .hcomic-shade {
    background: var(--ha-teal);
    opacity: 0.85;
    -webkit-mask: url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88.84' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 1.6'%3E%3Cpath d='M0.8 44H101' stroke-width='0.08'/%3E%3Cpath d='M0 44.8H101' stroke-width='0.1'/%3E%3Cpath d='M0.8 45.6H101' stroke-width='0.11'/%3E%3Cpath d='M0 46.4H101' stroke-width='0.13'/%3E%3Cpath d='M0.8 47.2H101' stroke-width='0.15'/%3E%3Cpath d='M0 48H101' stroke-width='0.17'/%3E%3Cpath d='M0.8 48.8H101' stroke-width='0.19'/%3E%3Cpath d='M0 49.6H101' stroke-width='0.21'/%3E%3Cpath d='M0.8 50.4H101' stroke-width='0.23'/%3E%3Cpath d='M0 51.2H101' stroke-width='0.25'/%3E%3Cpath d='M0.8 52H101' stroke-width='0.28'/%3E%3Cpath d='M0 52.8H101' stroke-width='0.3'/%3E%3Cpath d='M0.8 53.6H101' stroke-width='0.32'/%3E%3Cpath d='M0 54.4H101' stroke-width='0.34'/%3E%3Cpath d='M0.8 55.2H101' stroke-width='0.37'/%3E%3Cpath d='M0 56H101' stroke-width='0.39'/%3E%3Cpath d='M0.8 56.8H101' stroke-width='0.41'/%3E%3Cpath d='M0 57.6H101' stroke-width='0.43'/%3E%3Cpath d='M0.8 58.4H101' stroke-width='0.46'/%3E%3Cpath d='M0 59.2H101' stroke-width='0.48'/%3E%3Cpath d='M0.8 60H101' stroke-width='0.5'/%3E%3Cpath d='M0 60.8H101' stroke-width='0.52'/%3E%3Cpath d='M0.8 61.6H101' stroke-width='0.54'/%3E%3Cpath d='M0 62.4H101' stroke-width='0.56'/%3E%3Cpath d='M0.8 63.2H101' stroke-width='0.58'/%3E%3Cpath d='M0 64H101' stroke-width='0.6'/%3E%3Cpath d='M0.8 64.8H101' stroke-width='0.61'/%3E%3Cpath d='M0 65.6H101' stroke-width='0.63'/%3E%3Cpath d='M0.8 66.4H101' stroke-width='0.65'/%3E%3Cpath d='M0 67.2H101' stroke-width='0.66'/%3E%3Cpath d='M0.8 68H101' stroke-width='0.67'/%3E%3Cpath d='M0 68.8H101' stroke-width='0.68'/%3E%3Cpath d='M0.8 69.6H101' stroke-width='0.69'/%3E%3Cpath d='M0 70.4H101' stroke-width='0.7'/%3E%3Cpath d='M0.8 71.2H101' stroke-width='0.71'/%3E%3Cpath d='M0 72H101' stroke-width='0.71'/%3E%3Cpath d='M0.8 72.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 73.6H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 74.4H101' stroke-width='0.72'/%3E%3Cpath d='M0 75.2H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 76H101' stroke-width='0.72'/%3E%3Cpath d='M0 76.8H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 77.6H101' stroke-width='0.72'/%3E%3Cpath d='M0 78.4H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 79.2H101' stroke-width='0.72'/%3E%3Cpath d='M0 80H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 80.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 81.6H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 82.4H101' stroke-width='0.72'/%3E%3Cpath d='M0 83.2H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 84H101' stroke-width='0.72'/%3E%3Cpath d='M0 84.8H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 85.6H101' stroke-width='0.72'/%3E%3Cpath d='M0 86.4H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 87.2H101' stroke-width='0.72'/%3E%3Cpath d='M0 88H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 88.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 89.6H101' stroke-width='0.72'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    -webkit-mask-composite: source-in, source-in;
    mask: url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("/frontpage-main.png") 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88.84' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-dasharray='0 1.6'%3E%3Cpath d='M0.8 44H101' stroke-width='0.08'/%3E%3Cpath d='M0 44.8H101' stroke-width='0.1'/%3E%3Cpath d='M0.8 45.6H101' stroke-width='0.11'/%3E%3Cpath d='M0 46.4H101' stroke-width='0.13'/%3E%3Cpath d='M0.8 47.2H101' stroke-width='0.15'/%3E%3Cpath d='M0 48H101' stroke-width='0.17'/%3E%3Cpath d='M0.8 48.8H101' stroke-width='0.19'/%3E%3Cpath d='M0 49.6H101' stroke-width='0.21'/%3E%3Cpath d='M0.8 50.4H101' stroke-width='0.23'/%3E%3Cpath d='M0 51.2H101' stroke-width='0.25'/%3E%3Cpath d='M0.8 52H101' stroke-width='0.28'/%3E%3Cpath d='M0 52.8H101' stroke-width='0.3'/%3E%3Cpath d='M0.8 53.6H101' stroke-width='0.32'/%3E%3Cpath d='M0 54.4H101' stroke-width='0.34'/%3E%3Cpath d='M0.8 55.2H101' stroke-width='0.37'/%3E%3Cpath d='M0 56H101' stroke-width='0.39'/%3E%3Cpath d='M0.8 56.8H101' stroke-width='0.41'/%3E%3Cpath d='M0 57.6H101' stroke-width='0.43'/%3E%3Cpath d='M0.8 58.4H101' stroke-width='0.46'/%3E%3Cpath d='M0 59.2H101' stroke-width='0.48'/%3E%3Cpath d='M0.8 60H101' stroke-width='0.5'/%3E%3Cpath d='M0 60.8H101' stroke-width='0.52'/%3E%3Cpath d='M0.8 61.6H101' stroke-width='0.54'/%3E%3Cpath d='M0 62.4H101' stroke-width='0.56'/%3E%3Cpath d='M0.8 63.2H101' stroke-width='0.58'/%3E%3Cpath d='M0 64H101' stroke-width='0.6'/%3E%3Cpath d='M0.8 64.8H101' stroke-width='0.61'/%3E%3Cpath d='M0 65.6H101' stroke-width='0.63'/%3E%3Cpath d='M0.8 66.4H101' stroke-width='0.65'/%3E%3Cpath d='M0 67.2H101' stroke-width='0.66'/%3E%3Cpath d='M0.8 68H101' stroke-width='0.67'/%3E%3Cpath d='M0 68.8H101' stroke-width='0.68'/%3E%3Cpath d='M0.8 69.6H101' stroke-width='0.69'/%3E%3Cpath d='M0 70.4H101' stroke-width='0.7'/%3E%3Cpath d='M0.8 71.2H101' stroke-width='0.71'/%3E%3Cpath d='M0 72H101' stroke-width='0.71'/%3E%3Cpath d='M0.8 72.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 73.6H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 74.4H101' stroke-width='0.72'/%3E%3Cpath d='M0 75.2H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 76H101' stroke-width='0.72'/%3E%3Cpath d='M0 76.8H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 77.6H101' stroke-width='0.72'/%3E%3Cpath d='M0 78.4H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 79.2H101' stroke-width='0.72'/%3E%3Cpath d='M0 80H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 80.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 81.6H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 82.4H101' stroke-width='0.72'/%3E%3Cpath d='M0 83.2H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 84H101' stroke-width='0.72'/%3E%3Cpath d='M0 84.8H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 85.6H101' stroke-width='0.72'/%3E%3Cpath d='M0 86.4H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 87.2H101' stroke-width='0.72'/%3E%3Cpath d='M0 88H101' stroke-width='0.72'/%3E%3Cpath d='M0.8 88.8H101' stroke-width='0.72'/%3E%3Cpath d='M0 89.6H101' stroke-width='0.72'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask-composite: intersect, intersect;
}

/* Captions: Inter 700 caps in ink-bordered boxes. */
.ha-v-comic .hcomic-cap {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 1.1cqw;
    padding: 1.15cqw 1.75cqw 1.05cqw;
    border: 0.45cqw solid var(--ha-navy);
    background: var(--ha-paper);
    color: var(--ha-navy);
    font: 700 4.4cqw/1 var(--ha-sans);
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0.65cqw 0.65cqw 0 var(--ha-navy);
}

.ha-v-comic .hcomic-cap.hcomic-xl {
    padding: 1.3cqw 2cqw 1.2cqw;
    font-size: 5.6cqw;
    letter-spacing: 0.035em;
}

.ha-v-comic .hcomic-cap.hcomic-k-navy {
    background: var(--ha-navy);
    color: var(--ha-paper);
    box-shadow: 0.65cqw 0.65cqw 0 var(--ha-coral);
}

.ha-v-comic .hcomic-cap.hcomic-k-red {
    background: var(--ha-red);
    color: #fff;
}

.ha-v-comic .hcomic-cap.hcomic-k-ink {
    background: var(--ha-ink-dark);
    color: #fff;
}

.ha-v-comic .hcomic-cap.hcomic-k-coral {
    background: var(--ha-coral);
    color: var(--ha-navy);
}

.ha-v-comic .hcomic-cap .ha-icon {
    flex: none;
    font-size: 1.05em;
    stroke-width: 3;
}

.ha-v-comic .hcomic-cap.hcomic-k-ink .ha-icon,
.ha-v-comic .hcomic-cap.hcomic-k-navy .ha-icon {
    color: var(--ha-teal);
}

.ha-v-comic .hcomic-cap.hcomic-k-paper .ha-icon {
    color: var(--ha-ink);
}

.ha-v-comic .hcomic-cap.hcomic-al {
    transform-origin: 0 50%;
}

/* A pointer wedge for captions that speak for the doctor. */
.ha-v-comic .hcomic-cap.hcomic-tail::after {
    content: "";
    position: absolute;
    right: 2.4cqw;
    top: -2.9cqw;
    width: 3.4cqw;
    height: 2.6cqw;
    background: var(--ha-navy);
    clip-path: polygon(0 100%, 100% 0, 58% 100%);
}

/* Narration kicker (sits where each page's title plate will land). */
.ha-v-comic .hcomic-kicker {
    font-size: 4cqw;
    letter-spacing: 0.12em;
}

/* Title plate: issue number plus the feature title in DM Serif Display. */
.ha-v-comic .hcomic-plate {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: stretch;
    transform-origin: 0 50%;
    filter: drop-shadow(0.6cqw 0.6cqw 0 var(--ha-navy));
}

.ha-v-comic .hcomic-num {
    display: flex;
    align-items: center;
    padding: 0 1.3cqw;
    background: var(--ha-navy);
    color: var(--ha-coral);
    font: 700 3.4cqw/1 var(--ha-sans);
    letter-spacing: 0.06em;
}

.ha-v-comic .hcomic-ttl {
    padding: 1cqw 1.9cqw 1.25cqw 1.6cqw;
    border: 0.45cqw solid var(--ha-navy);
    border-left: 0;
    background: var(--ha-paper);
    color: var(--ha-navy);
    font: 400 5.6cqw/1 var(--ha-serif);
    letter-spacing: 0.005em;
    white-space: nowrap;
}

/* Sound effects: DM Serif Display with an ink stroke and a coral offset. */
.ha-v-comic .hcomic-sfx {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ha-paper);
    font: 400 13cqw/0.9 var(--ha-serif);
    letter-spacing: 0.01em;
    white-space: nowrap;
    -webkit-text-stroke: 0.42cqw var(--ha-navy);
    paint-order: stroke fill;
    text-shadow: 0.85cqw 0.85cqw 0 var(--ha-coral);
}

.ha-v-comic .hcomic-sfx.hcomic-md {
    font-size: 9cqw;
    -webkit-text-stroke-width: 0.34cqw;
    text-shadow: 0.65cqw 0.65cqw 0 var(--ha-coral);
}

.ha-v-comic .hcomic-bg-navy .hcomic-sfx,
.ha-v-comic .hcomic-sfx.hcomic-on-dark {
    -webkit-text-stroke-color: transparent;
}

.ha-v-comic .hcomic-sfx.hcomic-ink {
    color: var(--ha-navy);
    -webkit-text-stroke-color: transparent;
}

/* Rubber stamps. */
.ha-v-comic .hcomic-stamp {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1cqw 2.2cqw 0.8cqw;
    border: 0.65cqw solid currentColor;
    border-radius: 1.3cqw;
    color: var(--ha-red);
    background: rgba(253, 254, 253, 0.6);
    box-shadow: inset 0 0 0 0.45cqw rgba(253, 254, 253, 0.9), inset 0 0 0 0.8cqw currentColor;
    font: 700 8cqw/1 var(--ha-sans);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ha-v-comic .hcomic-stamp.hcomic-xl {
    padding: 1.1cqw 2.6cqw 0.9cqw;
    font-size: 10.5cqw;
}

.ha-v-comic .hcomic-strike {
    position: absolute;
    left: 0;
    top: 0;
    width: 46cqw;
    height: 1.1cqw;
    border-radius: 1cqw;
    background: var(--ha-navy);
    transform-origin: 0 50%;
}

/* Big line icons drawn onto the panels. */
.ha-v-comic .hcomic-ico {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ha-ink);
}

.ha-v-comic .hcomic-ico.hcomic-z5 { font-size: 5cqw; }
.ha-v-comic .hcomic-ico.hcomic-z8 { font-size: 8cqw; }
.ha-v-comic .hcomic-ico.hcomic-z12 { font-size: 12cqw; }
.ha-v-comic .hcomic-ico.hcomic-z16 { font-size: 16cqw; }
.ha-v-comic .hcomic-ico.hcomic-z20 { font-size: 20cqw; }
.ha-v-comic .hcomic-ico.hcomic-z24 { font-size: 24cqw; }
.ha-v-comic .hcomic-ico.hcomic-z28 { font-size: 28cqw; }
.ha-v-comic .hcomic-ico.hcomic-z32 { font-size: 32cqw; }
.ha-v-comic .hcomic-ico.hcomic-k-light { color: var(--ha-teal-light); }
.ha-v-comic .hcomic-ico.hcomic-k-teal { color: var(--ha-teal); }
.ha-v-comic .hcomic-ico.hcomic-k-navy { color: var(--ha-navy); }
.ha-v-comic .hcomic-ico.hcomic-k-coral { color: var(--ha-coral); }
.ha-v-comic .hcomic-ico.hcomic-k-paper { color: var(--ha-paper); }
.ha-v-comic .hcomic-ico.hcomic-k-red { color: var(--ha-red); }

.ha-v-comic .hcomic-wave path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* Little props. */
.ha-v-comic .hcomic-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 13cqw;
    height: 8.6cqw;
    padding: 1.5cqw 1.6cqw;
    border: 0.45cqw solid var(--ha-navy);
    border-radius: 0.9cqw;
    background: var(--ha-paper);
}

.ha-v-comic .hcomic-card::before,
.ha-v-comic .hcomic-card::after {
    content: "";
    display: block;
    height: 0.9cqw;
    border-radius: 1cqw;
    background: var(--ha-teal);
}

.ha-v-comic .hcomic-card::after {
    width: 62%;
    margin-top: 1.3cqw;
    background: rgba(26, 43, 60, 0.25);
}

.ha-v-comic .hcomic-row {
    position: absolute;
    left: 0;
    top: 0;
    width: 38cqw;
    height: 6cqw;
    border: 0.4cqw solid var(--ha-navy);
    border-radius: 1cqw;
    background: var(--ha-paper);
}

.ha-v-comic .hcomic-row::before {
    content: "";
    position: absolute;
    left: 2cqw;
    top: 50%;
    width: 18cqw;
    height: 1cqw;
    margin-top: -0.5cqw;
    border-radius: 1cqw;
    background: rgba(26, 43, 60, 0.22);
}

.ha-v-comic .hcomic-bubble {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15cqw;
    height: 11cqw;
    border-radius: 2.4cqw 2.4cqw 0.6cqw 2.4cqw;
    background: var(--ha-teal);
    color: #fff;
}

.ha-v-comic .hcomic-bubble .ha-icon {
    font-size: 6.4cqw;
}

.ha-v-comic .hcomic-scan {
    position: absolute;
    left: 0;
    top: 0;
    width: 21cqw;
    height: 0.8cqw;
    border-radius: 1cqw;
    background: var(--ha-coral);
    box-shadow: 0 0 1.6cqw 0.3cqw rgba(242, 160, 154, 0.55);
}

/* Screens the first sticker layer back so the second one reads on top. */
.ha-v-comic .hcomic-dim {
    position: absolute;
    inset: -4cqw;
    background-color: rgba(26, 43, 60, 0.3);
    background-image:
        radial-gradient(circle, rgba(26, 43, 60, 0.55) 0.32cqw, transparent 0.36cqw),
        radial-gradient(circle, rgba(26, 43, 60, 0.55) 0.32cqw, transparent 0.36cqw);
    background-size: 1.2cqw 1.2cqw;
    background-position: 0 0, 0.6cqw 0.6cqw;
}

/* Emanata ticks and routing lines (full-box SVG in page units). */
.ha-v-comic .hcomic-lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 100cqw;
    height: 88.84cqw;
    overflow: visible;
    fill: none;
    stroke: var(--ha-navy);
    stroke-width: 0.65;
    stroke-linecap: round;
}

.ha-v-comic .hcomic-lines path {
    stroke-dasharray: 1 2;
}

.ha-v-comic .hcomic-lines.hcomic-k-red { stroke: var(--ha-red); }
.ha-v-comic .hcomic-lines.hcomic-k-coral { stroke: var(--ha-coral); }
.ha-v-comic .hcomic-lines.hcomic-k-paper { stroke: var(--ha-paper); }

.ha-v-comic .hcomic-lines.hcomic-k-route {
    stroke: var(--ha-teal);
    stroke-width: 0.7;
}

.ha-v-comic .hcomic-sig {
    position: absolute;
    left: 0;
    top: 0;
    width: 100cqw;
    height: 88.84cqw;
    overflow: visible;
    fill: none;
    stroke: var(--ha-navy);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ha-v-comic .hcomic-sig path {
    stroke-dasharray: 1 2;
}

.ha-v-comic .hcomic-sig-line {
    stroke: rgba(26, 43, 60, 0.35);
    stroke-width: 0.35;
}

.ha-v-comic .hcomic-sig-ink {
    stroke-width: 0.8;
}

/* Phone frame for the native apps beat. */
.ha-v-comic .hcomic-phone {
    position: absolute;
    left: 0;
    top: 0;
    width: 31cqw;
    height: 55cqw;
    overflow: hidden;
    border: 0.9cqw solid var(--ha-navy);
    border-radius: 4.2cqw;
    background: var(--ha-teal);
}

.ha-v-comic .hcomic-phone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.4cqw;
    width: 8cqw;
    height: 1.6cqw;
    margin-left: -4cqw;
    border-radius: 2cqw;
    background: var(--ha-navy);
}

.ha-v-comic .hcomic-phone .hcomic-art {
    left: -1.6cqw;
    top: 4cqw;
    width: 31cqw;
}

.ha-v-comic .hcomic-phone-bar {
    position: absolute;
    left: 2.2cqw;
    right: 2.2cqw;
    height: 5.6cqw;
    border-radius: 1.4cqw;
    background: var(--ha-paper);
}

.ha-v-comic .hcomic-phone-bar::after {
    content: "";
    position: absolute;
    left: 1.6cqw;
    top: 2.3cqw;
    width: 55%;
    height: 1cqw;
    border-radius: 1cqw;
    background: rgba(26, 43, 60, 0.24);
}

.ha-v-comic .hcomic-phone-bar.hcomic-r1 { top: 33cqw; }
.ha-v-comic .hcomic-phone-bar.hcomic-r2 { top: 40cqw; }
.ha-v-comic .hcomic-phone-bar.hcomic-r3 { top: 47cqw; }

/* Footnote for the RCM asterisk, styled as a comic footnote caption. */
.ha-v-comic .hcomic-foot {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    max-width: 70cqw;
    text-wrap: balance;
    padding: 0.85cqw 1.3cqw 0.9cqw;
    border: 0.3cqw solid var(--ha-navy);
    background: var(--ha-paper);
    color: var(--ha-navy);
    font: 500 2.85cqw/1.28 var(--ha-sans);
    box-shadow: 0.5cqw 0.5cqw 0 rgba(26, 43, 60, 0.85);
}

/* Flurry stickers: icon plus title, die-cut white edge. */
.ha-v-comic .hcomic-stk {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    max-width: 33cqw;
    padding: 1.15cqw 1.8cqw 1.15cqw 1.4cqw;
    border-radius: 1.5cqw;
    background: var(--ha-paper);
    color: var(--ha-navy);
    font: 700 3.5cqw/1.08 var(--ha-sans);
    letter-spacing: -0.005em;
    box-shadow: 0 0 0 0.55cqw #fff, 0.75cqw 0.95cqw 0 0.55cqw rgba(8, 22, 30, 0.38);
}

.ha-v-comic .hcomic-stk .ha-icon {
    flex: none;
    font-size: 4.6cqw;
    color: var(--ha-ink);
}

.ha-v-comic .hcomic-stk.hcomic-s-navy { background: var(--ha-navy); color: #fff; }
.ha-v-comic .hcomic-stk.hcomic-s-navy .ha-icon { color: var(--ha-teal); }
.ha-v-comic .hcomic-stk.hcomic-s-ink { background: var(--ha-ink-dark); color: #fff; }
.ha-v-comic .hcomic-stk.hcomic-s-ink .ha-icon { color: var(--ha-teal-light); }
.ha-v-comic .hcomic-stk.hcomic-s-coral { background: var(--ha-coral); color: var(--ha-navy); }
.ha-v-comic .hcomic-stk.hcomic-s-coral .ha-icon { color: var(--ha-navy); }
.ha-v-comic .hcomic-stk.hcomic-s-light { background: var(--ha-teal-light); }

/* Outro. */
.ha-v-comic .hcomic-outro-a {
    font-size: 4.6cqw;
    letter-spacing: 0.14em;
}

.ha-v-comic .hcomic-outro-b {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1.6cqw 3cqw 2.2cqw;
    border: 0.55cqw solid var(--ha-navy);
    background: var(--ha-paper);
    color: var(--ha-navy);
    font: 400 12.5cqw/1 var(--ha-serif);
    white-space: nowrap;
    box-shadow: 1cqw 1cqw 0 var(--ha-coral);
}
