/* The homage: one grid (12 columns), one grotesk (Inter Tight, variable 100–900) set very large and
   very light, Shippori Mincho for the Japanese, tiny precise meta (11px, +.08em, caps), paper and ink
   and one colour, fire. Paper rises over the dark on a torn edge; the dark arrives as a charred edge.
   Hidden until the story has laid itself out (.is-live), so its pins are never measured early. */
.homage_wrap {
  --hm-paper: #ece4d4; --hm-ink: #111010; --hm-dim: rgba(17, 16, 16, .72); --hm-faint: rgba(17, 16, 16, .5); --hm-line: rgba(17, 16, 16, .16);
  --hm-light: #f4efe6; --hm-ldim: rgba(244, 239, 230, .82); --hm-lfaint: rgba(244, 239, 230, .56);
  --hm-fire: #e0461b; --hm-g: clamp(16px, 2.4vw, 40px); --hm-col: calc((100vw - 2 * var(--hm-g)) / 12);
  --hm-sans: 'HM Sans', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --hm-mincho: 'VC Mincho', 'Shippori Mincho B1', serif;
  --hm-slab: 'HM Slab', Georgia, serif;
  position: relative; z-index: 2; margin-top: -100vh; color: var(--hm-ink); font-family: var(--hm-sans); font-weight: 400;
  visibility: hidden;
}
.homage_wrap.is-live { visibility: visible; }
.homage_wrap .homage_lift { height: 25vh; pointer-events: none; }
.homage_wrap .homage_paper { position: relative; background: var(--hm-paper); }
.homage_wrap .homage_paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; z-index: 0;
  background-image: radial-gradient(rgba(120, 96, 60, .07) 1px, transparent 1.2px), radial-gradient(rgba(120, 96, 60, .045) 1px, transparent 1.4px);
  background-size: 7px 7px, 13px 13px; background-position: 0 0, 3px 5px;
}
.homage_wrap .homage_edge { position: absolute; left: 0; right: 0; top: -30px; height: 31px; background: var(--hm-paper); clip-path: var(--hm-tear, none); }
.homage_wrap .homage_shade { position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); pointer-events: none; }
.homage_wrap section { position: relative; z-index: 1; }
/* hand-offs: a fresh sheet rising over the dark (torn, shadowed); the dark arriving as a charred edge */
.homage_wrap .homage_rise { position: absolute; z-index: 3; left: 0; right: 0; top: -30px; height: 31px; background: var(--hm-paper); clip-path: var(--hm-tear, none); pointer-events: none; }
.homage_wrap .homage_rise::before { content: ''; position: absolute; inset: 0; }
.homage_wrap .homage_wanted::before, .homage_wrap .homage_bonds::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: -70px; height: 70px; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.homage_wrap .homage_char { position: absolute; z-index: 3; left: 0; right: 0; top: -26px; height: 28px; background: var(--hm-ink); clip-path: var(--hm-char, none); pointer-events: none;
  filter: drop-shadow(0 -2px 3px rgba(224, 70, 27, .8)) drop-shadow(0 -1px 1px rgba(255, 180, 90, .9)); }

.homage_wrap .homage_k { margin-right: 12px; font: 500 15px/1 var(--hm-mincho); letter-spacing: 0; color: var(--hm-ink); }
.homage_wrap .homage_label { position: absolute; z-index: 5; left: var(--hm-g); top: var(--hm-g); margin: 0; display: flex; align-items: baseline;
  font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-dim); }
.homage_wrap .is-light, .homage_wrap .is-light .homage_k { color: var(--hm-ldim); }
.homage_wrap .homage_label.is-light .homage_k { color: var(--hm-light); }
.homage_wrap .homage_credit { position: absolute; z-index: 5; left: var(--hm-g); bottom: var(--hm-g); margin: 0; font-size: 10px; letter-spacing: .04em; color: var(--hm-faint); }
.homage_wrap .homage_credit.is-light { color: var(--hm-lfaint); }
.homage_wrap .homage_cite { margin-left: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-faint); }

/* ---- 七 the title ---- */
.homage_wrap .homage_title_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.homage_wrap .homage_fire { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; pointer-events: none; }
.homage_wrap .homage_meta_row {
  position: absolute; left: var(--hm-g); right: var(--hm-g); top: var(--hm-g); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hm-g);
  font: 500 11px/1.45 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-dim);
}
.homage_wrap .homage_meta_row p { margin: 0; display: flex; align-items: baseline; }
.homage_wrap .homage_meta_row .homage_meta_r { justify-content: flex-end; text-align: right; }
.homage_wrap .homage_name {
  position: absolute; left: var(--hm-g); right: var(--hm-g); top: 50%; translate: 0 -54%; margin: 0; display: grid; gap: .04em;
  font: 300 clamp(64px, 13.6vw, 300px)/.86 var(--hm-sans); letter-spacing: -.055em;
}
.homage_wrap .homage_name_row { display: flex; align-items: center; gap: .14em; white-space: nowrap; }
.homage_wrap .homage_name_row.is-r { justify-content: flex-end; }
.homage_wrap .homage_w { display: inline-block; }
.homage_wrap .homage_slot { position: relative; display: inline-block; width: 1.7em; height: .72em; }
.homage_wrap .homage_jp { margin-right: auto; font: 500 .16em/1 var(--hm-mincho); letter-spacing: .3em; writing-mode: vertical-rl; color: var(--hm-fire); }
.homage_wrap .homage_title_lede {
  position: absolute; left: calc(var(--hm-g) + var(--hm-col) * 6); bottom: var(--hm-g); width: calc(var(--hm-col) * 3.4); margin: 0;
  font-size: 15px; line-height: 1.55; color: var(--hm-dim);
}
.homage_wrap .homage_frame_ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; color: var(--hm-light); }
.homage_wrap .homage_frame_cap { position: absolute; left: var(--hm-g); bottom: var(--hm-g); margin: 0; display: grid; gap: 8px; max-width: 30em; font-size: 17px; line-height: 1.4; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.homage_wrap .homage_frame_cap span { font: 500 11px/1 var(--hm-sans); letter-spacing: .1em; text-transform: uppercase; color: #ffb27c; }
.homage_wrap .homage_frame_hint { position: absolute; right: var(--hm-g); bottom: var(--hm-g); margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }

/* ---- 八 the burning stack ---- */
/* it comes up over the title's last, burnt screen, so the fire hands straight to the stack */
.homage_wrap .homage_gallery { margin-top: -125vh; }
/* a wheel step covers more of the page than a thumb: on wide screens the stack is up before the fire is out */
@media (min-aspect-ratio: 1/1) { .homage_wrap .homage_gallery { margin-top: -150vh; } }
.homage_wrap .homage_gallery_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--hm-ink); color: var(--hm-light); }
.homage_wrap .homage_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.homage_wrap .homage_fuse { position: absolute; left: var(--hm-g); top: 50%; translate: 0 -50%; z-index: 2; padding-left: 20px; }
.homage_wrap .homage_fuse::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--hm-lfaint); }
.homage_wrap .homage_fuse_ember {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: 3px 0 0 -3px; border-radius: 50%; background: #ffb070;
  box-shadow: 0 0 6px 2px rgba(255, 120, 40, .9), 0 0 22px 6px rgba(224, 70, 27, .55);
}
.homage_wrap .homage_index { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 12px/1.35 var(--hm-sans); letter-spacing: .02em; }
.homage_wrap .homage_index button { all: unset; cursor: pointer; display: flex; gap: 14px; color: var(--hm-lfaint); transition: color .4s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.homage_wrap .homage_index button span:first-child { width: 22px; font-variant-numeric: tabular-nums; }
.homage_wrap .homage_index button:hover, .homage_wrap .homage_index button:focus-visible { color: var(--hm-ldim); }
.homage_wrap .homage_index button:focus-visible { outline: 1px solid var(--hm-fire); outline-offset: 4px; }
.homage_wrap .homage_index button.is-on { color: var(--hm-light); transform: translateX(10px); }
.homage_wrap .homage_card { position: absolute; right: calc(var(--hm-g) + 10px); top: 50%; translate: 0 -50%; width: calc(var(--hm-col) * 2.6); z-index: 2; }
.homage_wrap .homage_card p { margin: 0; }
.homage_wrap .homage_card_n { font: 200 64px/1 var(--hm-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.homage_wrap .homage_card_n span { font-size: 14px; letter-spacing: .04em; color: var(--hm-lfaint); }
.homage_wrap .homage_card_ch { margin-top: 26px !important; font: 500 11px/1 var(--hm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-fire); }
.homage_wrap .homage_card_t { margin-top: 12px !important; font-size: 17px; line-height: 1.45; color: rgba(244, 239, 230, .86); min-height: 5em; }
.homage_wrap .homage_gallery_hint { position: absolute; right: var(--hm-g); bottom: var(--hm-g); margin: 0; font-size: 11px; letter-spacing: .06em; color: var(--hm-lfaint); }

/* ---- 九 dead or alive ---- */
.homage_wrap .homage_wanted_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; perspective: 1400px; }
.homage_wrap .homage_wanted_tag { position: absolute; z-index: 5; right: var(--hm-g); top: var(--hm-g); margin: 0; font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-dim); }
.homage_wrap .homage_leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.homage_wrap .homage_leaders path { fill: none; stroke: var(--hm-ink); stroke-width: 1; }
.homage_wrap .homage_leaders circle { fill: var(--hm-fire); }
.homage_wrap .homage_poster { --pw: min(400px, 28vw, 60vh); position: absolute; z-index: 1; left: calc(50% - var(--pw) / 2); top: calc(50% - var(--pw) / .7 / 2); width: var(--pw); aspect-ratio: .7; transform-style: preserve-3d; will-change: transform; }
.homage_wrap .homage_poster_paper {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 6% 7% 5%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #efe1c2 40%, #d9c39a 85%, #b89e72 100%); color: #2a1b10;
  box-shadow: 0 50px 80px -20px rgba(40, 24, 10, .35), 0 8px 18px rgba(40, 24, 10, .18), inset 0 0 40px rgba(110, 70, 30, .35); container-type: inline-size;
}
.homage_wrap .homage_poster_paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background: repeating-linear-gradient(8deg, rgba(90, 60, 30, .06) 0 2px, transparent 2px 6px), radial-gradient(rgba(90, 60, 30, .18) 1px, transparent 1.6px) 0 0/5px 5px;
}
.homage_wrap .homage_glare { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light; opacity: .9;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .7), transparent 38%); }
.homage_wrap .homage_poster_head { margin: 0; font: 400 21cqw/1 var(--hm-slab); letter-spacing: .02em; }
.homage_wrap .homage_poster_photo { width: 86%; aspect-ratio: 1.18; margin-top: 3%; border: 2.4cqw solid #2a1b10; overflow: hidden; background: #2a1b10; }
.homage_wrap .homage_poster_photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; filter: sepia(.5) contrast(1.08) saturate(.8); }
.homage_wrap .homage_poster_doa { margin: 3% 0 0; font: 400 7.6cqw/1 var(--hm-slab); letter-spacing: .04em; }
.homage_wrap .homage_poster_name { margin: 3% 0 0; font: 400 10cqw/1 var(--hm-slab); white-space: nowrap; }
.homage_wrap .homage_poster_bounty { margin: 2% 0 0; display: flex; align-items: center; gap: 1.5cqw; font: 400 11cqw/1 var(--hm-slab); }
.homage_wrap .homage_berry { position: relative; }
.homage_wrap .homage_berry::after { content: ''; position: absolute; left: 30%; top: -10%; bottom: -10%; width: .2em; border-left: .07em solid currentColor; border-right: .07em solid currentColor; }
.homage_wrap .homage_reels { display: inline-flex; }
.homage_wrap .homage_reel { display: inline-block; height: 1.18em; overflow: hidden; line-height: 1.18; }
.homage_wrap .homage_reel > span { display: block; }
.homage_wrap .homage_reel > span > span { display: block; height: 1.18em; line-height: 1.18; }
.homage_wrap .homage_poster_foot { margin: auto 0 0; font: 400 5cqw/1 var(--hm-slab); letter-spacing: .5em; }
.homage_wrap .homage_notes { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.homage_wrap .homage_notes li { position: absolute; width: max-content; max-width: calc(var(--hm-col) * 2.4); display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--hm-dim); }
.homage_wrap .homage_notes b { font: 500 10px/1 var(--hm-sans); letter-spacing: .1em; color: var(--hm-fire); }
.homage_wrap .homage_notes span { font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-ink); }
.homage_wrap .homage_notes li[data-note="0"] { left: calc(var(--hm-g) + var(--hm-col)); top: 22vh; }
.homage_wrap .homage_notes li[data-note="1"] { right: calc(var(--hm-g) + var(--hm-col)); top: 34vh; }
.homage_wrap .homage_notes li[data-note="2"] { left: calc(var(--hm-g) + var(--hm-col)); top: 58vh; }
.homage_wrap .homage_notes li[data-note="3"] { right: calc(var(--hm-g) + var(--hm-col)); top: 68vh; }

/* ---- 十 the names ---- */
.homage_wrap .homage_names_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--hm-ink); color: var(--hm-light); }
.homage_wrap .homage_names_n { position: absolute; z-index: 5; right: var(--hm-g); top: var(--hm-g); margin: 0; font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; color: var(--hm-lfaint); font-variant-numeric: tabular-nums; }
.homage_wrap .homage_namecard { position: absolute; inset: 0; }
.homage_wrap .homage_big { position: absolute; left: calc(var(--hm-g) - .04em); top: 22vh; margin: 0; white-space: nowrap; font: 200 clamp(64px, 15vw, 320px)/.86 var(--hm-sans); letter-spacing: -.05em; }
.homage_wrap .homage_big em { font-style: normal; color: var(--hm-fire); }
.homage_wrap .homage_big.is-tattoo { display: flex; gap: .06em; font-size: clamp(90px, 24vw, 480px); letter-spacing: 0; top: 14vh; }
.homage_wrap .homage_strike { position: relative; display: inline-block; }
.homage_wrap .homage_strike svg { position: absolute; left: -5%; top: 26%; width: 110%; height: 46%; overflow: visible; }
.homage_wrap .is-tattoo .homage_strike svg { top: 0; height: 100%; }
.homage_wrap .homage_strike path { fill: none; stroke: var(--hm-fire); stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.homage_wrap .is-tattoo .homage_strike path { stroke-width: 5; }
.homage_wrap .homage_names_t { position: absolute; left: calc(var(--hm-g) + var(--hm-col) * 7); bottom: calc(var(--hm-g) + 30px); width: calc(var(--hm-col) * 4); margin: 0; font-size: 17px; line-height: 1.55; color: var(--hm-ldim); }
.homage_wrap .homage_names_k { display: block; margin-bottom: 14px; font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-fire); }
.homage_wrap .homage_names_hint { position: absolute; left: var(--hm-g); bottom: var(--hm-g); margin: 0; font-size: 11px; letter-spacing: .06em; }

/* ---- 十一 his people ---- */
.homage_wrap .homage_bonds_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.homage_wrap .homage_bonds_side { position: absolute; z-index: 2; left: var(--hm-g); top: 16vh; bottom: var(--hm-g); width: calc(var(--hm-col) * 3.6); display: flex; flex-direction: column; }
.homage_wrap .homage_bonds_h { margin: 0; font: 300 clamp(40px, 4.4vw, 84px)/.95 var(--hm-sans); letter-spacing: -.045em; }
.homage_wrap .homage_legend { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-dim); }
.homage_wrap .homage_legend li { display: flex; align-items: center; gap: 10px; }
.homage_wrap .homage_legend i { width: 18px; height: 0; border-top: 1.5px solid var(--hm-ink); }
.homage_wrap .homage_legend li[data-g="brothers"] i { border-color: var(--hm-fire); }
.homage_wrap .homage_legend li[data-g="crew"] i { border-top-style: dotted; border-top-width: 2px; }
.homage_wrap .homage_legend li[data-g="foes"] i { border-top-style: dashed; }
.homage_wrap .homage_person { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hm-line); min-height: 15em; }
.homage_wrap .homage_person p { margin: 0; }
.homage_wrap .homage_person_jp { font: 500 13px/1 var(--hm-mincho); letter-spacing: .2em; color: var(--hm-fire); }
.homage_wrap .homage_person_n { margin-top: 12px !important; font: 300 clamp(28px, 2.6vw, 46px)/1 var(--hm-sans); letter-spacing: -.03em; }
.homage_wrap .homage_person_r { margin-top: 10px !important; font: 500 11px/1 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-dim); }
.homage_wrap .homage_person_t { margin-top: 14px !important; font-size: 15px; line-height: 1.55; color: var(--hm-dim); max-width: 26em; }
.homage_wrap .homage_graph { position: absolute; right: var(--hm-g); top: 50%; translate: 0 -50%; width: calc(var(--hm-col) * 7.6); height: auto; max-height: 92vh; overflow: visible; }
.homage_wrap .homage_graph .e { fill: none; stroke: var(--hm-ink); stroke-width: 1; opacity: .5; transition: opacity .4s, stroke .4s; }
.homage_wrap .homage_graph .e.brothers { stroke: var(--hm-fire); stroke-width: 1.4; opacity: .9; }
.homage_wrap .homage_graph .e.crew { stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.6; }
.homage_wrap .homage_graph .e.foes { stroke-dasharray: 7 6; }
.homage_wrap .homage_graph .e.dim { opacity: .1; }
.homage_wrap .homage_graph .e.hot { opacity: 1; stroke: var(--hm-fire); }
.homage_wrap .homage_graph .n { cursor: pointer; outline: none; }
.homage_wrap .homage_graph .n circle:not(.hit) { fill: var(--hm-paper); stroke: var(--hm-ink); stroke-width: 1.2; transition: r .4s, fill .4s; }
.homage_wrap .homage_graph .n text { font: 400 15px var(--hm-sans); fill: var(--hm-ink); letter-spacing: -.01em; transition: opacity .4s; }
.homage_wrap .homage_graph .n text.jp { font: 500 11px var(--hm-mincho); fill: var(--hm-dim); letter-spacing: .12em; }
.homage_wrap .homage_graph .n.dim text { opacity: .25; }
.homage_wrap .homage_graph .n .hit { fill: transparent; stroke: none; }
.homage_wrap .homage_graph .n.on circle:not(.hit), .homage_wrap .homage_graph .n:focus-visible circle:not(.hit) { fill: var(--hm-fire); stroke: var(--hm-fire); r: 7; }
.homage_wrap .homage_graph .ace circle { fill: var(--hm-fire); stroke: none; }
.homage_wrap .homage_graph .ace .ring { fill: none; stroke: var(--hm-fire); stroke-width: 1; opacity: .4; }
.homage_wrap .homage_graph .ace text { font: 300 30px var(--hm-sans); letter-spacing: -.03em; }
.homage_wrap .homage_bonds_hint { position: absolute; right: var(--hm-g); bottom: var(--hm-g); margin: 0; font-size: 11px; letter-spacing: .06em; color: var(--hm-faint); }

/* ---- 十二 the work ---- */
.homage_wrap .homage_work_pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--hm-ink); color: var(--hm-light); }
.homage_wrap .homage_covers { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.homage_wrap .homage_work_lede { position: absolute; z-index: 2; right: var(--hm-g); top: var(--hm-g); margin: 0; max-width: 22em; text-align: right; font-size: 14px; line-height: 1.5; }
.homage_wrap .homage_vol { position: absolute; z-index: 2; left: var(--hm-g); bottom: calc(var(--hm-g) + 26px); }
.homage_wrap .homage_vol p { margin: 0; }
.homage_wrap .homage_vol_n { display: flex; align-items: baseline; gap: 14px; }
.homage_wrap .homage_vol_n span { font: 500 11px/1 var(--hm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ldim); }
.homage_wrap .homage_vol_n b { font: 200 clamp(80px, 11vw, 200px)/.82 var(--hm-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.homage_wrap .homage_vol_t { margin-top: 14px !important; font: 500 16px/1.3 var(--hm-mincho); letter-spacing: .1em; color: #ffb27c; min-height: 1.3em; }
.homage_wrap .homage_vol_e { margin-top: 6px !important; font-size: 13px; color: var(--hm-ldim); min-height: 1.3em; }
.homage_wrap .homage_thanks { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--hm-g); pointer-events: none; }
.homage_wrap .homage_sign { width: min(560px, 46vw); color: var(--hm-light); }
.homage_wrap .homage_sign svg { width: 100%; height: auto; display: block; overflow: visible; }
.homage_wrap .homage_sign svg * { fill: transparent; stroke: currentColor; stroke-width: 1.4; }
.homage_wrap .homage_thanks_h { margin: 5vh 0 0; font: 300 clamp(40px, 5.6vw, 110px)/.95 var(--hm-sans); letter-spacing: -.05em; }
.homage_wrap .homage_thanks_h span { display: inline-block; white-space: nowrap; }
.homage_wrap .homage_thanks_h span:last-child { color: var(--hm-fire); }
.homage_wrap .homage_thanks_jp { margin: 18px 0 0; font: 500 17px/1 var(--hm-mincho); letter-spacing: .3em; color: var(--hm-ldim); }
.homage_wrap .homage_facts { margin: 5vh 0 0; max-width: 64em; font: 500 11px/1.8 var(--hm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-lfaint); }
.homage_wrap .homage_end { height: 100vh; }

/* ---- portrait: designed for the phone, not shrunk ---- */
@media (max-aspect-ratio: 1/1) {
  .homage_wrap .homage_meta_row { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .homage_wrap .homage_name { font-size: 19vw; translate: 0 -58%; }
  .homage_wrap .homage_title_lede { left: var(--hm-g); width: calc(100% - 2 * var(--hm-g)); }
  .homage_wrap .homage_frame_cap { right: var(--hm-g); bottom: calc(var(--hm-g) + 30px); font-size: 15px; }
  .homage_wrap .homage_frame_hint { left: var(--hm-g); right: auto; }
  .homage_wrap .homage_fuse { display: none; }
  .homage_wrap .homage_card { left: var(--hm-g); right: var(--hm-g); top: auto; bottom: calc(var(--hm-g) + 30px); translate: none; width: auto; }
  .homage_wrap .homage_card_n { font-size: 40px; }
  .homage_wrap .homage_card_t { font-size: 15px; min-height: 0; }
  .homage_wrap .homage_gallery_hint { display: none; }
  .homage_wrap .homage_wanted_tag { display: none; }
  .homage_wrap .homage_poster { --pw: 58vw; top: calc(42% - var(--pw) / .7 / 2); }
  .homage_wrap .homage_leaders { display: none; }
  .homage_wrap .homage_notes li { position: static; width: auto; max-width: none; font-size: 13px; }
  .homage_wrap .homage_notes { inset: auto var(--hm-g) var(--hm-g); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .homage_wrap .homage_big { font-size: 15vw; top: 20vh; }
  .homage_wrap .homage_big.is-tattoo { font-size: 27vw; }
  .homage_wrap .homage_names_t { left: var(--hm-g); right: var(--hm-g); width: auto; bottom: calc(var(--hm-g) + 34px); font-size: 15px; }
  .homage_wrap .homage_bonds_side { top: 9vh; width: auto; right: var(--hm-g); bottom: var(--hm-g); pointer-events: none; }
  .homage_wrap .homage_bonds_h { font-size: 10vw; }
  .homage_wrap .homage_legend { display: none; }
  .homage_wrap .homage_person { min-height: 0; padding-top: 14px; }
  .homage_wrap .homage_person_t { font-size: 14px; }
  .homage_wrap .homage_graph { left: 50%; right: auto; translate: -50% -50%; top: 49%; width: 100vw; max-height: 62vh; }
  .homage_wrap .homage_graph .n text { font-size: 28px; }
  .homage_wrap .homage_graph .ace text { font-size: 40px; }
  .homage_wrap .homage_graph .n text.jp { display: none; }
  .homage_wrap .homage_bonds_hint { display: none; }
  .homage_wrap .homage_vol { bottom: calc(var(--hm-g) + 22px); }
  .homage_wrap .homage_work_lede { left: var(--hm-g); text-align: left; top: calc(var(--hm-g) + 26px); }
  .homage_wrap .homage_sign { width: 86vw; }
  .homage_wrap .homage_thanks_h { font-size: 12vw; }
}

/* the editor's canvas (scene/canvas.js): each chapter as a labelled still of the live page, sized in px */
.homage_wrap.is-canvas { position: relative !important; height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; visibility: visible !important; background: #0d0b0a; }
.homage_wrap.is-canvas .homage_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; visibility: visible !important; }
.homage_wrap.is-canvas > :not(.homage_contain), .homage_wrap.is-canvas .homage_contain > :not(.homage_still) { display: none !important; }
.homage_wrap .homage_still { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(239, 233, 223, 0.14); }
.homage_wrap .homage_still figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #efe9df; background: rgba(13, 11, 10, 0.78); }
@media (max-width: 767px) { .homage_wrap .homage_still { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }

/* ---- 十一 the cards: One Piece card game proportions (63 x 88), printed, framed in the bond's colour ---- */
.homage_wrap .homage_person_btn { all: unset; box-sizing: border-box; margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px 11px 18px; border: 1px solid var(--hm-ink); border-radius: 999px; cursor: pointer; pointer-events: auto;
  font: 500 11px/1 var(--hm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink); transition: background .3s, color .3s; }
.homage_wrap .homage_person_btn i { width: 14px; height: 18px; border: 1px solid currentColor; border-radius: 2px; transform: rotate(8deg); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.homage_wrap .homage_person_btn:hover, .homage_wrap .homage_person_btn:focus-visible { background: var(--hm-ink); color: var(--hm-paper); }
.homage_wrap .homage_person_btn:hover i, .homage_wrap .homage_person_btn:focus-visible i { transform: rotate(-6deg) translateY(-2px); }
.homage_wrap .homage_person_btn:focus-visible { outline: 2px solid var(--hm-fire); outline-offset: 3px; }
.homage_wrap .homage_tcg { --w: min(380px, 86vw, calc((100svh - 160px) * 63 / 88)); position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--hm-light); perspective: 1400px; }
.homage_wrap .homage_tcg[open] { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; }
.homage_wrap .homage_tcg::backdrop { background: radial-gradient(ellipse at 50% 45%, rgba(40, 18, 8, .9), rgba(8, 7, 7, .96)); }
.homage_wrap .homage_tcg_stage { align-self: center; transform-style: preserve-3d; touch-action: none; }
.homage_wrap .homage_tcg_card { --c: #1b1716; --c2: #8a6a3a; position: relative; width: var(--w); aspect-ratio: 63 / 88; transform-style: preserve-3d; font-family: var(--hm-sans); }
.homage_wrap .homage_tcg_card[data-g="ace"], .homage_wrap .homage_tcg_card[data-g="brothers"] { --c: #c63a1c; --c2: #f0b24a; }
.homage_wrap .homage_tcg_card[data-g="family"] { --c: #b88a2a; --c2: #f4dc93; }
.homage_wrap .homage_tcg_card[data-g="crew"] { --c: #2c5a9a; --c2: #a9c7ee; }
.homage_wrap .homage_tcg_card[data-g="foes"] { --c: #2a2230; --c2: #9f8bb5; }
.homage_wrap .homage_tcg_face, .homage_wrap .homage_tcg_back { position: absolute; inset: 0; border-radius: 4.2% / 3%; backface-visibility: hidden; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }
.homage_wrap .homage_tcg_face { background: var(--c); padding: 4.6%; display: grid; grid-template-rows: 1fr auto auto; }
.homage_wrap .homage_tcg_art { position: absolute; left: 4.6%; right: 4.6%; top: 4.6%; height: 62%; width: 91%; border-radius: 2px; background: #120f0e; }
.homage_wrap .homage_tcg_gem { position: absolute; left: 7%; top: 6.4%; width: 15%; aspect-ratio: 1; margin: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c2), var(--c) 70%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .4);
  font: 500 calc(var(--w) * .07)/1 var(--hm-mincho); color: #fff; }
.homage_wrap .homage_tcg_jp { position: absolute; right: 7%; top: 7%; margin: 0; writing-mode: vertical-rl; padding: 8px 5px; background: rgba(12, 10, 10, .72);
  font: 500 calc(var(--w) * .034)/1 var(--hm-mincho); letter-spacing: .14em; color: var(--hm-light); }
.homage_wrap .homage_tcg_band { grid-row: 2; position: relative; margin: 0 -4.6%; padding: 3.4% 6% 3%; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 70%), var(--c);
  border-top: 2px solid var(--c2); }
.homage_wrap .homage_tcg_band p { margin: 0; }
.homage_wrap .homage_tcg_role { font: 600 calc(var(--w) * .026)/1 var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c2); }
.homage_wrap .homage_tcg_name { margin: 6px 0 0; font: 300 calc(var(--w) * .078)/1 var(--hm-sans); letter-spacing: -.035em; color: #fff; }
.homage_wrap .homage_tcg_aff { margin-top: 6px !important; font: 500 calc(var(--w) * .026)/1.3 var(--hm-sans); letter-spacing: .06em; color: rgba(255, 255, 255, .72); }
.homage_wrap .homage_tcg_body { grid-row: 3; margin: 0 -4.6% -4.6%; padding: 4% 6% 10%; background: #f2ebdd; color: #1b1716; }
.homage_wrap .homage_tcg_text { margin: 0; font: 400 calc(var(--w) * .036)/1.4 var(--hm-sans); }
.homage_wrap .homage_tcg_fruit { margin: 3% 0 0; display: flex; gap: 8px; align-items: baseline; padding-top: 3%; border-top: 1px solid rgba(27, 23, 22, .18); font: 500 calc(var(--w) * .028)/1.3 var(--hm-sans); }
.homage_wrap .homage_tcg_fruit span { letter-spacing: .12em; text-transform: uppercase; color: rgba(27, 23, 22, .55); }
.homage_wrap .homage_tcg_no { position: absolute; left: 6%; bottom: 2.6%; margin: 0; font: 500 calc(var(--w) * .022)/1 var(--hm-sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(27, 23, 22, .5); }
.homage_wrap .homage_tcg_back { transform: rotateY(180deg); display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(circle at 50% 42%, #2b1610, #0e0b0a 70%); border: 6px solid #efe9df; }
.homage_wrap .homage_tcg_back span { font: 500 calc(var(--w) * .1)/1 var(--hm-mincho); writing-mode: vertical-rl; letter-spacing: .2em; color: #efe9df; }
.homage_wrap .homage_tcg_back b { font: 500 calc(var(--w) * .03)/1 var(--hm-sans); letter-spacing: .3em; text-transform: uppercase; color: #e0461b; }
.homage_wrap .homage_tcg_ui { display: flex; align-items: center; gap: 14px; padding: 18px var(--hm-g) 8px; }
.homage_wrap .homage_tcg_btn, .homage_wrap .homage_tcg_close { all: unset; box-sizing: border-box; cursor: pointer; height: 44px; display: grid; place-items: center; border: 1px solid rgba(244, 239, 230, .35); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.homage_wrap .homage_tcg_btn { width: 44px; }
.homage_wrap .homage_tcg_btn i { width: 10px; height: 10px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(2px) rotate(45deg); }
.homage_wrap .homage_tcg_btn.is-next i { transform: translateX(-2px) rotate(-135deg); }
.homage_wrap .homage_tcg_close { padding: 0 20px; font: 500 11px/1 var(--hm-sans); letter-spacing: .12em; text-transform: uppercase; margin-left: 8px; }
.homage_wrap .homage_tcg_btn:hover, .homage_wrap .homage_tcg_close:hover, .homage_wrap .homage_tcg_btn:focus-visible, .homage_wrap .homage_tcg_close:focus-visible { background: var(--hm-light); color: var(--hm-ink); border-color: var(--hm-light); }
.homage_wrap .homage_tcg :focus-visible { outline: 2px solid var(--hm-fire); outline-offset: 3px; }
.homage_wrap .homage_tcg_count { margin: 0; min-width: 5em; text-align: center; font: 500 11px/1 var(--hm-sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--hm-ldim); }
.homage_wrap .homage_tcg_hint, .homage_wrap .homage_tcg_credit { margin: 0; padding: 0 var(--hm-g) 6px; font-size: 10px; letter-spacing: .06em; color: var(--hm-lfaint); text-align: center; }
.homage_wrap .homage_tcg_credit { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* ---- 十二 Eiichiro Oda, in halftone beside his hand ---- */
.homage_wrap .homage_oda { position: absolute; z-index: 3; left: calc(var(--hm-g) + var(--hm-col)); top: 50%; translate: 0 -50%; width: calc(var(--hm-col) * 2.4); margin: 0; pointer-events: none; }
.homage_wrap .homage_thanks { padding-left: calc(var(--hm-g) + var(--hm-col) * 3.4); }
.homage_wrap .homage_oda_print { display: block; width: 100%; aspect-ratio: 225 / 350; }
.homage_wrap .homage_oda_cap { margin-top: 14px; display: grid; gap: 6px; font: 500 11px/1 var(--hm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ldim); }
.homage_wrap .homage_oda_cap span { font: 500 13px/1 var(--hm-mincho); letter-spacing: .3em; color: #ffb27c; }

@media (max-aspect-ratio: 1/1) {
  /* the names on a phone: the word and its story read as one block, high on the screen */
  .homage_wrap .homage_big { top: 18vh; }
  .homage_wrap .homage_big.is-tattoo { top: 16vh; font-size: 30vw; }
  .homage_wrap .homage_names_t { top: calc(18vh + 15vw * .86 + 9vh); bottom: auto; }
  .homage_wrap .homage_namecard[data-namecard="1"] .homage_names_t { top: calc(16vh + 30vw * .86 + 9vh); }
  .homage_wrap .homage_names_hint { bottom: calc(var(--hm-g) + env(safe-area-inset-bottom)); }
  .homage_wrap .homage_person { pointer-events: auto; }
  .homage_wrap .homage_oda { left: 50%; top: 9vh; translate: -50% 0; width: 44vw; }
  .homage_wrap .homage_oda_cap { justify-items: center; }
  .homage_wrap .homage_thanks { padding: 37vh var(--hm-g) 0; }
  .homage_wrap .homage_thanks_h { font-size: 10.5vw; }
  .homage_wrap .homage_facts { margin-top: 3.5vh; }
  .homage_wrap .homage_sign { width: 72vw; }
}