/* Home page: a manga volume. The cover (with obi band), a contents page laid
   out as panels, the author's comment, and a next-volume teaser. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cover ──────────────────────────────────────────────────── */
.cover-vol { position: relative; overflow: clip; border-bottom: var(--panel-border) solid var(--rule); }
.cover-frame {
  position: relative; display: grid; gap: var(--sp-5) var(--sp-6);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "top spine" "logo spine" "bubble spine";
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.cover-art { position: absolute; inset: 0; pointer-events: none; }
.cover-art .speedlines { inset: -30%; }
.cover-sfx {
  position: absolute; right: 9%; top: 8%; margin: 0;
  font-family: var(--f-display); font-size: clamp(6rem, 3rem + 14vw, 16rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 14%, transparent);
  transform: rotate(-8deg);
}

.cover-top { grid-area: top; position: relative; display: flex; align-items: center; gap: var(--sp-4); }
.vol-badge {
  display: inline-grid; place-items: center; min-width: 4.2rem; padding: 0.35rem 0.6rem 0.45rem;
  background: var(--ink); color: var(--paper); font-family: var(--f-display); font-size: 2rem; line-height: 1;
}
.vol-badge span { display: block; font-family: var(--f-body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; }
.cover-kicker { font-weight: 600; color: var(--ink-2); }

.cover-logo {
  grid-area: logo; position: relative; margin: 0;
  font-size: clamp(3.6rem, 1rem + 11vw, 10.5rem); line-height: 0.88; letter-spacing: -0.03em; text-transform: uppercase;
}
.logo-line { display: block; width: fit-content; text-shadow: 0.06em 0.06em 0 var(--spot); }
.logo-line + .logo-line { margin-left: clamp(1rem, 6vw, 5.5rem); }

.cover-spine {
  grid-area: spine; position: relative; align-self: stretch; margin: 0;
  writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4) var(--sp-2); border-left: var(--panel-border) solid var(--rule);
  font-family: var(--f-display); font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); letter-spacing: 0.1em; color: var(--ink);
}
.cover-spine span { display: inline-block; }

/* A speech bubble with a tail pointing up at the logo */
.cover-bubble {
  grid-area: bubble; position: relative; justify-self: start; margin: 0 0 0 clamp(1rem, 8vw, 9rem);
  max-width: 26rem; padding: 1rem 1.4rem; background: var(--paper);
  border: var(--panel-border) solid var(--rule); border-radius: 999px / 70%;
  font-size: var(--step-1); font-weight: 600; color: var(--ink); line-height: 1.35; text-align: center;
}
.cover-bubble::before, .cover-bubble::after { content: ""; position: absolute; left: 22%; border-style: solid; }
.cover-bubble::before { top: -22px; border-width: 0 12px 22px 6px; border-color: transparent transparent var(--rule) transparent; }
.cover-bubble::after { top: -16px; left: calc(22% + 3px); border-width: 0 8px 17px 4px; border-color: transparent transparent var(--paper) transparent; }

/* Obi: the paper band wrapped round a Japanese volume, carrying the pitch */
.obi { position: relative; background: var(--c1); color: var(--on-c1); border-top: var(--panel-border) solid var(--rule); }
.obi-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding-block: var(--sp-5); }
.obi-copy { max-width: 44rem; font-size: var(--step-0); line-height: 1.55; }
.obi-copy strong { font-family: var(--f-display); font-weight: 400; margin-right: 0.35em; }
.obi-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.obi .btn { border-color: var(--on-c1); color: var(--on-c1); background: transparent; }
.obi .btn::before { background: var(--on-c1); }
.obi .btn:hover, .obi .btn:focus-visible { color: var(--c1); }
.obi .btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.obi .btn-solid::before { background: var(--paper); }
.obi .btn-solid:hover, .obi .btn-solid:focus-visible { color: var(--ink); }

@media (max-width: 720px) {
  .cover-frame { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "bubble"; }
  .cover-spine { display: none; }
  .cover-bubble { margin-left: 0; }
  .cover-logo { font-size: clamp(2.6rem, 0.4rem + 13vw, 4.4rem); }
  .logo-line + .logo-line { margin-left: 0.5rem; }
}

/* Cover load: lines burst, the logo slams in line by line, the bubble pops, the obi slides on */
@media (prefers-reduced-motion: no-preference) {
  .js .cover-art .speedlines { animation: burst 1.1s var(--ease-out) both; }
  .js .cover-sfx { animation: sfx-in 1s var(--ease-out) 0.2s both; }
  .js .logo-line { animation: slam 0.7s var(--ease-out) both; }
  .js .logo-line:nth-child(2) { animation-delay: 0.12s; }
  .js .cover-top { animation: rise 0.6s var(--ease-out) 0.3s both; }
  .js .cover-spine span { animation: stamp 0.5s var(--ease-out) both; animation-delay: calc(0.45s + var(--i, 0) * 60ms); }
  .js .cover-bubble { animation: pop 0.55s cubic-bezier(.34, 1.56, .64, 1) 0.65s both; transform-origin: 22% 0; }
  .js .obi { animation: obi-in 0.8s var(--ease-out) 0.5s both; }
  @keyframes slam { from { opacity: 0; transform: translateX(-0.4em) skewX(-8deg); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
  @keyframes obi-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sfx-in { from { opacity: 0; transform: rotate(-8deg) scale(1.3); } to { opacity: 1; transform: rotate(-8deg); } }
}

/* ── Contents: a manga page of panels ───────────────────────── */
/* Reading order follows the Z path: 1 is the big establishing panel, 2 and 3
   stack beside it, and 4 and 5 share a diagonal cut along the bottom tier. */
.page {
  --gutter: 12px; --cut: 48px;
  list-style: none; margin: 0; padding: var(--gutter); border: var(--panel-border) solid var(--rule); background: var(--paper);
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(14rem, 20vw, 17rem) clamp(14rem, 20vw, 17rem) clamp(17rem, 26vw, 22rem);
}
.p1 { grid-column: 1 / 8; grid-row: 1 / 3; }
.p2 { grid-column: 8 / 13; grid-row: 1; }
.p3 { grid-column: 8 / 13; grid-row: 2; }
.p4 { grid-column: 1 / 6; grid-row: 3; }
.p5 { grid-column: 6 / 13; grid-row: 3; margin-left: calc(-1 * var(--cut)); }

.p > a {
  position: relative; display: block; height: 100%; text-decoration: none; color: var(--ink);
  border: var(--panel-border) solid var(--rule); background: var(--paper-2);
  transition: transform var(--dur-2) var(--ease-out);
}
.p > a:hover, .p > a:focus-visible { transform: translateY(-3px); }
.p > a:focus-visible { outline: 3px solid var(--c1); outline-offset: 4px; }

/* The art: screenshots printed like manga ink, which turn to full colour on hover */
.p-art { position: absolute; inset: 0; overflow: hidden; }
.p-art img { width: 100%; height: 100%; object-fit: cover; object-position: top left; filter: grayscale(1) contrast(1.12); transition: filter var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.p-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(var(--tone) 1.1px, transparent 1.4px) 0 0 / 6px 6px;
  transition: opacity var(--dur-3) var(--ease-out);
}
.p > a:hover .p-art img, .p > a:focus-visible .p-art img { filter: none; transform: scale(1.03); }
.p > a:hover .p-art::after, .p > a:focus-visible .p-art::after { opacity: 0; }

/* Chapter number box, top left */
.p-no { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: baseline; gap: 0.45rem; padding: 0.3rem 0.7rem 0.4rem; background: var(--ink); color: var(--paper); font-size: var(--step--1); }
.p-no b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.p > a:hover .p-no, .p > a:focus-visible .p-no { background: var(--c1); color: var(--on-c1); }

/* Narration box: title, one line, and a tag */
.p-caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: min(24rem, calc(100% - 28px));
  display: grid; gap: 0.25rem; padding: 0.75rem 0.95rem 0.8rem;
  background: var(--paper); border: var(--panel-border) solid var(--rule);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.p > a:hover .p-caption, .p > a:focus-visible .p-caption { box-shadow: 6px 6px 0 var(--c1); }
.p-title { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; }
.p1 .p-title { font-size: var(--step-2); }
.p-desc { font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); }
.p-tag { justify-self: start; margin-top: 0.2rem; padding: 0 0.5rem; border: 1px solid var(--rule); font-size: 0.78rem; font-weight: 600; }

/* The diagonal cut between panels 4 and 5. Clip each panel, then redraw the
   slanted border with a masked line so both edges keep an ink rule. */
.p4 > a { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.p5 > a { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); }
.p4 > a::after, .p5 > a::after {
  content: ""; position: absolute; top: calc(-1 * var(--panel-border)); bottom: calc(-1 * var(--panel-border)); z-index: 3; width: calc(var(--cut) + 4px);
  background: var(--rule); pointer-events: none;
  -webkit-mask: var(--edge) no-repeat 0 0 / 100% 100%; mask: var(--edge) no-repeat 0 0 / 100% 100%;
}
.p4 > a::after { right: calc(-1 * var(--panel-border)); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 100' preserveAspectRatio='none'%3E%3Cline x1='50.5' y1='0' x2='2.5' y2='100' stroke='black' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.p5 > a::after { left: calc(-1 * var(--panel-border)); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 100' preserveAspectRatio='none'%3E%3Cline x1='49.5' y1='0' x2='1.5' y2='100' stroke='black' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.p5 .p-no { left: var(--cut); }
.p5 .p-caption { left: 14px; }

/* A sound effect breaking out of panel 3's frame */
.p-sfx {
  position: absolute; top: -0.55em; right: 0.3em; z-index: 4; pointer-events: none;
  font-family: var(--f-display); font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); line-height: 1;
  color: var(--paper); -webkit-text-stroke: 2px var(--rule); paint-order: stroke fill;
  transform: rotate(-10deg); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.p3 > a:hover .p-sfx, .p3 > a:focus-visible .p-sfx { color: var(--c2); transform: rotate(-10deg) scale(1.12); }

/* A speech bubble in panel 5 */
.p-speech {
  position: absolute; top: 18px; right: 18px; z-index: 2; padding: 0.55rem 1rem; background: var(--paper);
  border: var(--panel-border) solid var(--rule); border-radius: 999px / 70%;
  font-weight: 700; font-size: var(--step--1);
  transition: transform var(--dur-2) cubic-bezier(.34, 1.56, .64, 1);
}
.p-speech::after { content: ""; position: absolute; bottom: -14px; right: 26%; border-style: solid; border-width: 14px 4px 0 10px; border-color: var(--rule) transparent transparent transparent; }
.p5 > a:hover .p-speech, .p5 > a:focus-visible .p-speech { transform: scale(1.08) rotate(-2deg); }

@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; grid-template-rows: none; }
  .p1, .p2, .p3, .p4, .p5 { grid-column: auto; grid-row: auto; margin: 0; }
  /* On phones the caption sits under the art so the screenshot stays visible */
  .p > a { height: auto; display: flex; flex-direction: column; }
  .p-art { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .p-caption { position: static; max-width: none; border: 0; border-top: var(--panel-border) solid var(--rule); }
  .p > a:hover .p-caption, .p > a:focus-visible .p-caption { box-shadow: none; }
  .p-speech { top: 10px; right: 10px; }
  .p4 > a, .p5 > a { clip-path: none; }
  .p4 > a::after, .p5 > a::after { display: none; }
  .p5 .p-no { left: 0; }
  .p-sfx { top: -0.35em; }
}

/* Panels land one after another as the page scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js .page .p { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(var(--n, 0) * 90ms); }
  .js .page.is-in .p { opacity: 1; transform: none; }
}
.p1 { --n: 0; } .p2 { --n: 1; } .p3 { --n: 2; } .p4 { --n: 3; } .p5 { --n: 4; }

/* ── Author's comment ───────────────────────────────────────── */
.author { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.author-panel { position: relative; margin: 0; }
/* A real upright photo proportion (5:8), sized so the photo and the copy start and end together */
.author .portrait {
  position: relative; aspect-ratio: 5 / 8; padding: 0; overflow: hidden; display: block;
  border: var(--panel-border) solid var(--rule);
  background: radial-gradient(var(--tone) 1.1px, transparent 1.4px) 0 0 / 7px 7px, var(--paper-2);
}
.author .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter var(--dur-3) var(--ease-out); }
.author .portrait:hover img { filter: none; }
.portrait-silhouette { position: absolute; left: 50%; bottom: 0; width: 72%; transform: translateX(-50%); fill: var(--ink-3); opacity: 0.35; }
.portrait-label { position: absolute; left: 0; top: 0; padding: 0.3rem 0.7rem 0.4rem; background: var(--ink); color: var(--paper); font-size: var(--step--1); }
.author-bubble {
  position: absolute; right: -1.5rem; bottom: -1.2rem; max-width: 15rem; padding: 0.8rem 1.1rem;
  background: var(--paper); border: var(--panel-border) solid var(--rule); border-radius: 999px / 70%;
  font-weight: 700; font-size: var(--step--1); text-align: center; line-height: 1.35;
}
.author-bubble::after { content: ""; position: absolute; top: -14px; left: 30%; border-style: solid; border-width: 0 4px 14px 10px; border-color: transparent transparent var(--rule) transparent; }
.author-label, .teaser-label { display: inline-flex; gap: 0.6rem; align-items: baseline; margin-bottom: var(--sp-4); padding: 0.2rem 0.7rem; background: var(--ink); color: var(--paper); font-size: var(--step--1); font-weight: 600; }
.author-copy h2 { font-size: var(--step-3); margin-bottom: var(--sp-5); }
.author-copy p + p { margin-top: var(--sp-4); }
@media (max-width: 860px) { .author { grid-template-columns: 1fr; gap: var(--sp-8); } .author-panel { max-width: 20rem; } .author-bubble { right: -0.5rem; } }

/* ── Next volume teaser ─────────────────────────────────────── */
.teaser { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem); border: 4px solid var(--rule); box-shadow: 10px 10px 0 var(--spot); background: var(--paper); }
.teaser h2 { font-size: var(--step-4); max-width: 16ch; }
.teaser-copy { margin-top: var(--sp-4); font-size: var(--step-1); max-width: 34rem; }
.teaser-end::before { content: "つづく"; }
.teaser-end { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(0.8rem, 3vw, 2rem); margin: 0; font-family: var(--f-display); font-size: var(--step-2); color: var(--spot); transform: rotate(-6deg); }
@media (max-width: 600px) { .teaser-end { position: static; margin-top: var(--sp-5); } }

/* ── Bonus chapter: a single wide strip under the page ───────── */
.bonus {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--sp-5);
  border: var(--panel-border) solid var(--rule); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.bonus:hover, .bonus:focus-visible { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--c1); }
.bonus:focus-visible { outline: 3px solid var(--c1); outline-offset: 4px; }
.bonus-copy { display: grid; align-content: center; justify-items: start; gap: 0.35rem; padding: var(--sp-5) var(--sp-6); }
.bonus-no { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.2rem 0.7rem 0.3rem; background: var(--ink); color: var(--paper); font-size: var(--step--1); transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.bonus-no b { font-family: var(--f-display); font-weight: 400; }
.bonus:hover .bonus-no, .bonus:focus-visible .bonus-no { background: var(--c1); color: var(--on-c1); }
.bonus-title { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.1; margin-top: var(--sp-2); }
.bonus-art { position: relative; overflow: hidden; border-left: var(--panel-border) solid var(--rule); min-height: 13rem; }
.bonus-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1) contrast(1.12); transition: filter var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.bonus-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(var(--tone) 1.1px, transparent 1.4px) 0 0 / 6px 6px; transition: opacity var(--dur-3) var(--ease-out); }
.bonus:hover .bonus-art img, .bonus:focus-visible .bonus-art img { filter: none; transform: scale(1.03); }
.bonus:hover .bonus-art::after, .bonus:focus-visible .bonus-art::after { opacity: 0; }
@media (max-width: 860px) {
  .bonus { grid-template-columns: 1fr; }
  .bonus-art { order: -1; border-left: 0; border-bottom: var(--panel-border) solid var(--rule); min-height: 0; aspect-ratio: 16 / 10; }
}