/* The volume. Paper and ink alternate; Bodoni Moda Black for display, Zen Old Mincho for Japanese,
   Plex Condensed for everything small; mauve is the star's colour only. One gutter, hairlines,
   masks; no shadows, no tilted stickers. Every value that moves is a custom property set from the
   scroll (homage.js). */
.homage_wrap {
  --ink: #0c090b; --paper: #f4f1ec; --mauve: #c48fb4; --g: clamp(20px, 3.6vw, 60px);
  --display: 'JJ Bodoni', 'Bodoni Moda', serif; --mincho: 'JJ Mincho', 'Zen Old Mincho', serif; --sans: 'JJ Cond', 'IBM Plex Sans Condensed', sans-serif;
  position: relative; z-index: 2; margin-top: -100vh; font-family: var(--sans);
}
/* one screen until homage.js mounts and sets the real height (taller CSS would grow the editor canvas's frame,
   which sizes itself from the page) */
.homage_wrap .homage_contain { position: relative; height: 100vh; }
.homage_wrap .homage_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transform: translate3d(0, var(--hold, 0px), 0); }
.homage_wrap .homage_part { position: absolute; inset: 0; overflow: hidden; visibility: hidden; transform-origin: var(--tox, 50%) var(--toy, 50%); }
.homage_wrap .homage_part.is-on { visibility: visible; }
.homage_wrap .homage_part::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; z-index: 40; }
.homage_wrap .is-title, .homage_wrap .is-blood { background: var(--paper); color: var(--ink); }
.homage_wrap .is-stands, .homage_wrap .is-araki { background: var(--ink); color: var(--paper); }
.homage_wrap .homage_mask { display: block; overflow: hidden; }
.homage_wrap .homage_rise { display: block; transform: translate3d(0, var(--y, 105%), 0); }
.homage_wrap .homage_meta { position: absolute; top: clamp(18px, 4vh, 40px); margin: 0; font-size: 14px; font-weight: 500; line-height: 1.2; z-index: 30; }
.homage_wrap .homage_meta span[lang="ja"] { margin-left: 10px; font-family: var(--mincho); font-weight: 900; font-size: 13px; opacity: 0.7; }
.homage_wrap .homage_meta[lang="ja"] { font-family: var(--mincho); font-weight: 900; font-size: 15px; letter-spacing: 0.08em; }
.homage_wrap .homage_meta.is-tl { left: var(--g); }
.homage_wrap .homage_meta.is-tr { right: var(--g); text-align: right; }
.homage_wrap .homage_credit { position: absolute; left: var(--g); bottom: clamp(16px, 3.4vh, 32px); margin: 0; font-size: 12px; opacity: 0.62; z-index: 30; }
.homage_wrap .homage_credit.is-light { color: var(--paper); opacity: var(--co, 0); }

/* ---- I · the title: a poster cut by three slits ---- */
.homage_wrap .homage_open { position: absolute; inset: 0; z-index: 1; clip-path: var(--slits, inset(0 50% 0 50%)); background: #1c1418; }
.homage_wrap .homage_open_img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; transform: scale(var(--os, 1.2)); transform-origin: 50% 70%; }
.homage_wrap .is-title .homage_meta { color: var(--ink); mix-blend-mode: normal; opacity: var(--mo, 1); }
.homage_wrap .homage_title { position: absolute; left: var(--g); top: 12vh; margin: 0; z-index: 3; color: #fff; mix-blend-mode: difference; font-family: var(--display); font-weight: 900; font-size: min(18.4vw, 26vh); line-height: 0.84; letter-spacing: -0.05em; white-space: nowrap; opacity: var(--to, 1); }
.homage_wrap .homage_row { display: block; transform: translate3d(var(--rx, 0px), 0, 0); }
.homage_wrap .homage_row[data-row="1"] { margin-left: 0.62em; }
.homage_wrap .homage_row .homage_mask { padding-bottom: 0.06em; margin-bottom: -0.06em; }
.homage_wrap .homage_intro { position: absolute; left: 75vw; top: 12vh; width: min(21vw, 330px); margin: 0; padding: 12px 14px 13px; background: var(--paper); box-sizing: border-box; z-index: 4; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; opacity: var(--o, 0); transform: translate3d(0, var(--iy, 0px), 0); }
.homage_wrap .homage_who { position: absolute; left: 0; right: 0; top: calc(clamp(18px, 4vh, 40px) + 34px); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); z-index: 5; pointer-events: none; }
.homage_wrap .homage_who_i { margin: 0 0 0 var(--g); justify-self: start; display: inline-flex; gap: 10px; align-items: baseline; padding: 7px 11px 8px; background: var(--paper); color: var(--ink); opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * -10px), 0); }
.homage_wrap .homage_who_n { font-family: var(--display); font-weight: 900; font-size: 17px; }
.homage_wrap .homage_who_p { font-size: 12px; opacity: 0.6; }
.homage_wrap .homage_line { position: absolute; left: var(--g); bottom: calc(clamp(16px, 3.4vh, 32px) + 34px); margin: 0; z-index: 5; color: var(--paper); font-family: var(--display); font-weight: 900; font-size: min(7.2vw, 12vh); line-height: 0.9; letter-spacing: -0.04em; text-shadow: 0 2px 40px rgba(12, 9, 11, 0.35); }
.homage_wrap .homage_line .homage_mask { padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* ---- II · Stand Parameters ---- */
.homage_wrap .homage_of { margin-left: 8px; opacity: 0.55; }
.homage_wrap .homage_odo { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: top; }
.homage_wrap .homage_odo_col { display: block; transform: translate3d(0, var(--oy, 0), 0); }
.homage_wrap .homage_odo_col span { display: block; height: 1.2em; }
.homage_wrap .homage_list { position: absolute; left: var(--g); top: 50%; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); z-index: 10; opacity: var(--lo, 0); }
.homage_wrap .homage_li { margin: 0; }
.homage_wrap .homage_li_b { all: unset; cursor: pointer; display: flex; gap: 14px; align-items: baseline; padding: 7px 0; font-size: 15px; font-weight: 500; opacity: calc(0.45 + var(--a, 0) * 0.55); transform: translate3d(calc(var(--a, 0) * 10px), 0, 0); }
.homage_wrap .homage_li_b:hover, .homage_wrap .homage_li_b:focus-visible { opacity: 1; }
.homage_wrap .homage_li_b:focus-visible { outline: 1px solid var(--mauve); outline-offset: 4px; }
.homage_wrap .homage_li_n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.7; }
.homage_wrap .homage_shape { --sz: min(48vw, 70vh); position: absolute; left: 46%; top: 47%; width: var(--sz); height: var(--sz); transform: translate(-50%, -50%) scale(var(--ss, 1)); z-index: 5; opacity: var(--so, 0); }
.homage_wrap .homage_shape_clip { position: absolute; inset: -30%; clip-path: var(--poly, polygon(50% 50%, 50% 50%, 50% 50%)); background: radial-gradient(circle at 50% 50%, #3a2436 0, #1a1219 34%, rgba(12, 9, 11, 0) 62%); }
.homage_wrap .homage_shape_img { position: absolute; left: var(--il, 18.75%); top: var(--it, 18.75%); width: var(--iw, 62.5%); height: auto; max-width: none; opacity: var(--io, 0); transform: scale(var(--is, 1)); transform-origin: var(--fo, 50% 30%); }
.homage_wrap .homage_hex { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.homage_wrap .homage_hex_ring { fill: none; stroke: rgba(244, 241, 236, 0.14); stroke-width: 0.2; }
.homage_wrap .homage_hex_area { fill: none; stroke: var(--mauve); stroke-width: 0.35; stroke-linejoin: round; }
.homage_wrap .homage_hex_hot { fill: none; stroke: var(--paper); stroke-width: 0.5; opacity: var(--ho, 0); }
.homage_wrap .homage_read { position: absolute; right: var(--g); top: 20vh; width: min(23vw, 350px); z-index: 10; opacity: var(--ro, 0); }
.homage_wrap .homage_names_mask { --nf: min(3.5vw, 6.2vh); height: calc(var(--nf) * 0.92 * 3); overflow: hidden; }
.homage_wrap .homage_names_track { transform: translate3d(0, calc(var(--n, 0) * var(--nf) * -2.76), 0); }
.homage_wrap .homage_name { margin: 0; height: calc(var(--nf) * 0.92 * 3); overflow: hidden; display: flex; align-items: flex-end; font-family: var(--display); font-weight: 900; font-size: var(--nf); line-height: 0.92; letter-spacing: -0.035em; }
.homage_wrap .homage_about { position: relative; height: 10em; margin-top: 18px; }
.homage_wrap .homage_ab { position: absolute; left: 0; right: 0; top: 0; opacity: var(--o, 0); transform: translate3d(0, var(--ay, 0px), 0); }
.homage_wrap .homage_ab_jp { margin: 0 0 10px; font-family: var(--mincho); font-weight: 900; font-size: 15px; color: var(--mauve); }
.homage_wrap .homage_ab_user { margin: 0 0 8px; font-size: 14px; font-weight: 500; opacity: 0.75; }
.homage_wrap .homage_ab_note { margin: 0; font-size: 15px; line-height: 1.5; }
.homage_wrap .homage_stats { position: absolute; left: 50%; bottom: calc(clamp(16px, 3.4vh, 32px) + 44px); width: min(56vw, 860px); margin: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(244, 241, 236, 0.25); z-index: 10; opacity: var(--ro, 0); }
.homage_wrap .homage_stat { margin: 0; padding: 12px 10px 0 0; cursor: default; }
.homage_wrap .homage_stat_k { font-size: 12px; opacity: 0.7; white-space: nowrap; }
.homage_wrap .homage_stat_k span { display: block; margin-top: 3px; font-family: var(--mincho); font-weight: 900; font-size: 11px; }
.homage_wrap .homage_stat_v { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-size: min(2.6vw, 4.4vh); line-height: 1; }
/* a grade that is a word (Requiem's None) is set smaller, so six of them fit a phone's width */
.homage_wrap .homage_stat.is-word .homage_stat_v { font-size: min(1.9vw, 3.2vh); }
.homage_wrap .homage_stat.is-hot .homage_stat_v, .homage_wrap .homage_stat.is-hot .homage_stat_k { color: var(--mauve); opacity: 1; }

/* ---- III · the bloodline ---- */
.homage_wrap .homage_rows { position: absolute; left: var(--g); width: 55vw; top: 12vh; margin: 0; padding: 0; list-style: none; z-index: 5; }
.homage_wrap .homage_bl { position: relative; display: grid; grid-template-columns: 6vw 1fr 7vw; align-items: center; height: 7.6vh; border-top: 1px solid rgba(12, 9, 11, 0.16); opacity: var(--ri, 0); transform: translate3d(0, calc((1 - var(--ri, 0)) * 20px), 0); }
.homage_wrap .homage_bl:last-child { border-bottom: 1px solid rgba(12, 9, 11, 0.16); }
.homage_wrap .homage_bl.is-new { border-top: 1px solid rgba(12, 9, 11, 0.6); }
.homage_wrap .homage_bl.is-new::before { content: 'A new universe'; position: absolute; right: 0; top: -0.75em; padding-left: 8px; background: var(--paper); font-size: 11px; opacity: 0.7; }
.homage_wrap .homage_bl_n { font-size: 13px; opacity: 0.62; }
.homage_wrap .homage_bl_name { display: flex; align-items: center; font-family: var(--display); font-weight: 900; font-size: min(3.1vw, 5vh); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: rgba(12, 9, 11, calc(0.22 + var(--a, 0) * 0.78)); }
.homage_wrap .homage_bl_star { flex: 0 0 auto; width: calc(0.7em * var(--a, 0)); height: 0.7em; margin-right: calc(var(--a, 0) * 0.24em); fill: var(--mauve); overflow: visible; opacity: min(1, calc(var(--a, 0) * 2)); transform: translate3d(0, calc((1 - var(--a, 0)) * -1.6em), 0) rotate(calc((1 - var(--a, 0)) * -144deg)); }
.homage_wrap .homage_bl::after { content: ''; position: absolute; left: 6vw; right: 0; bottom: -1px; height: 2px; background: var(--mauve); transform: scaleX(var(--a, 0)); transform-origin: 0 50%; }
.homage_wrap .homage_bl_y { justify-self: end; font-family: var(--display); font-weight: 900; font-size: min(1.6vw, 2.8vh); font-variant-numeric: tabular-nums; color: rgba(12, 9, 11, calc(0.4 + var(--a, 0) * 0.6)); }
.homage_wrap .homage_plate { position: absolute; left: 63vw; right: var(--g); top: 13vh; bottom: 9vh; margin: 0; display: flex; flex-direction: column; z-index: 6; opacity: var(--pk, 0); }
.homage_wrap .homage_plate_win { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #e6dfd5; clip-path: inset(calc((1 - var(--pk, 0)) * 100%) 0 0 0); }
.homage_wrap .homage_plate_img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 4%; clip-path: inset(var(--pi, 100%) 0 0 0); transform: scale(var(--ps, 1.1)); transform-origin: 50% 0; }
.homage_wrap .homage_plate_cap { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; min-height: 4.4em; }
.homage_wrap .homage_plate_jp { font-family: var(--mincho); font-weight: 900; font-size: 16px; }
.homage_wrap .homage_plate_note { font-size: 15px; line-height: 1.45; max-width: 40ch; color: rgba(12, 9, 11, 0.86); opacity: max(0.4, var(--no, 1)); }

/* ---- IV · Hirohiko Araki ---- */
.homage_wrap .homage_words { position: absolute; inset: 0; opacity: var(--wo, 1); transform: translate3d(0, var(--wy, 0px), 0); }
.homage_wrap .homage_words_jp { position: absolute; right: var(--g); top: 13vh; height: 76vh; margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 900; font-size: min(3.3vw, 6vh); line-height: 1.75; letter-spacing: 0.06em; }
.homage_wrap .homage_col { display: block; clip-path: inset(0 0 calc((1 - var(--c, 0)) * 100%) 0); }
.homage_wrap .homage_words_en { position: absolute; left: var(--g); bottom: 15vh; width: 46vw; }
.homage_wrap .homage_en { margin: 0; font-family: var(--display); font-weight: 700; font-size: min(3vw, 5.2vh); line-height: 1.1; letter-spacing: -0.015em; }
.homage_wrap .homage_en .homage_mask { padding-bottom: 0.06em; margin-bottom: -0.06em; }
.homage_wrap .homage_en .homage_rise { white-space: nowrap; }
.homage_wrap .homage_cite { margin: 22px 0 0; font-size: 14px; opacity: calc(var(--co, 0) * 0.8); }
.homage_wrap .homage_bio { position: absolute; inset: 0; visibility: var(--bv, hidden); }
.homage_wrap .homage_bio_h { position: absolute; left: var(--g); top: 11vh; margin: 0; font-family: var(--display); font-weight: 900; font-size: min(8vw, 13vh); line-height: 0.88; letter-spacing: -0.045em; }
.homage_wrap .homage_bio_h .homage_mask { padding-bottom: 0.05em; margin-bottom: -0.05em; }
.homage_wrap .homage_bio_p { position: absolute; left: var(--g); top: calc(11vh + min(8vw, 13vh) * 2.02); width: min(30vw, 440px); margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; opacity: var(--o, 0); }
.homage_wrap .homage_sign { position: absolute; left: var(--g); top: calc(11vh + min(8vw, 13vh) * 1.86 + 110px); width: min(170px, 18vw); height: auto; max-width: none; filter: invert(1); opacity: calc(var(--o, 0) * 0.85); }
.homage_wrap .homage_float { position: absolute; margin: 0; transform: translate3d(0, var(--fy, 0px), 0); }
.homage_wrap .homage_float.is-photo { left: 49vw; top: 8vh; width: min(18vw, 30vh); }
.homage_wrap .homage_float.is-jump { left: 72vw; top: 17vh; width: min(15vw, 25vh); }
.homage_wrap .homage_float_win { position: relative; overflow: hidden; clip-path: inset(calc((1 - var(--w, 0)) * 100%) 0 0 0); }
.homage_wrap .homage_float.is-photo .homage_float_win { height: calc(min(18vw, 30vh) * 1.32); }
.homage_wrap .homage_float_img { display: block; width: 100%; height: auto; max-width: none; transform: scale(var(--ws, 1.15)); }
.homage_wrap .homage_float.is-photo .homage_float_img { height: 100%; object-fit: cover; object-position: 80% 35%; filter: grayscale(1) contrast(1.1); }
.homage_wrap .homage_float_cap { margin-top: 8px; font-size: 11px; opacity: calc(var(--w, 0) * 0.65); }
.homage_wrap .homage_bio_rule { position: absolute; left: var(--g); right: var(--g); top: 63vh; height: 1px; background: rgba(244, 241, 236, 0.3); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); }
.homage_wrap .homage_years { position: absolute; left: var(--g); right: var(--g); top: calc(63vh + 3vh); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4vh 4vw; }
.homage_wrap .homage_yr { opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 16px), 0); }
.homage_wrap .homage_yr_y { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 900; font-size: min(2.2vw, 3.8vh); line-height: 1; font-variant-numeric: tabular-nums; }
.homage_wrap .homage_yr_t { display: block; font-size: 14px; line-height: 1.45; opacity: 0.85; max-width: 32ch; }
.homage_wrap .homage_ti { font-weight: 600; }

/* ---- index ---- */
.homage_wrap .homage_index { position: absolute; right: var(--g); bottom: clamp(16px, 3.4vh, 32px); z-index: 50; display: flex; gap: 22px; opacity: var(--ix, 0); pointer-events: var(--ixp, none); color: var(--tone, var(--ink)); }
.homage_wrap .homage_index_b { all: unset; cursor: pointer; font-size: 14px; font-weight: 500; opacity: 0.6; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.homage_wrap .homage_index_b.is-here, .homage_wrap .homage_index_b:hover, .homage_wrap .homage_index_b:focus-visible { opacity: 1; border-bottom-color: currentColor; }

/* ---- portrait: designed for the phone ---- */
@media (max-aspect-ratio: 1/1) {
  .homage_wrap .homage_title { top: auto; bottom: 30vh; font-size: 17.2vw; }
  .homage_wrap .homage_row[data-row="1"] { margin-left: 0.3em; }
  .homage_wrap .homage_intro { left: var(--g); right: var(--g); top: 12vh; width: auto; font-size: 15px; }
  .homage_wrap .homage_who { top: auto; bottom: 34vh; }
  .homage_wrap .homage_who_i { margin-left: 8px; padding: 5px 7px 6px; flex-direction: column; gap: 2px; }
  .homage_wrap .homage_who_n { font-size: 13px; }
  .homage_wrap .homage_who_p { font-size: 10px; }
  .homage_wrap .homage_line { font-size: 11vw; bottom: 14vh; }
  .homage_wrap .homage_list { display: none; }
  .homage_wrap .homage_shape { --sz: min(88vw, 48vh); top: 35%; }
  .homage_wrap .homage_read { left: var(--g); right: var(--g); width: auto; top: auto; bottom: 17vh; }
  .homage_wrap .homage_names_mask { --nf: 7vw; }
  .homage_wrap .homage_about { height: 6.4em; margin-top: 16px; }
  .homage_wrap .homage_ab_jp { font-size: 13px; margin-bottom: 4px; }
  .homage_wrap .homage_ab_user { font-size: 12px; margin-bottom: 4px; }
  .homage_wrap .homage_ab_note { font-size: 13px; }
  .homage_wrap .homage_stats { left: var(--g); right: var(--g); width: auto; transform: none; bottom: 3vh; }
  .homage_wrap .homage_stat_k { font-size: 10px; }
  .homage_wrap .homage_stat_k span { display: none; }
  .homage_wrap .homage_stat_v { font-size: 5.6vw; }
  .homage_wrap .homage_stat.is-word .homage_stat_v { font-size: 3.4vw; }
  .homage_wrap .homage_credit { display: none; }
  .homage_wrap .homage_credit.is-light { display: block; font-size: 10px; right: var(--g); }
  .homage_wrap .homage_rows { left: var(--g); right: var(--g); width: auto; top: 9vh; }
  .homage_wrap .homage_bl { grid-template-columns: 14vw 1fr 14vw; height: 5.5vh; }
  .homage_wrap .homage_bl::after { left: 14vw; }
  .homage_wrap .homage_bl_n { font-size: 11px; }
  .homage_wrap .homage_bl_name { font-size: min(5.6vw, 3.8vh); }
  .homage_wrap .homage_bl_y { font-size: 3.6vw; }
  .homage_wrap .homage_plate { left: var(--g); right: var(--g); top: auto; bottom: 3vh; height: 26vh; flex-direction: row; gap: 14px; }
  .homage_wrap .homage_plate_win { flex: 0 0 38vw; }
  .homage_wrap .homage_plate_cap { margin-top: 0; justify-content: flex-end; }
  .homage_wrap .homage_plate_jp { font-size: 13px; }
  .homage_wrap .homage_plate_note { font-size: 13px; }
  .homage_wrap .homage_words_jp { top: 10vh; height: 52vh; font-size: 6.2vw; }
  .homage_wrap .homage_words_en { left: var(--g); right: var(--g); width: auto; bottom: 9vh; }
  .homage_wrap .homage_en { font-size: 5.5vw; }
  .homage_wrap .homage_bio_h { top: 10vh; font-size: 14vw; }
  .homage_wrap .homage_bio_p { top: calc(10vh + 14vw * 2.04); width: auto; right: 44vw; padding-right: 8px; font-size: 14px; }
  .homage_wrap .homage_sign { display: none; }
  .homage_wrap .homage_float.is-photo { left: auto; right: var(--g); top: calc(10vh + 14vw * 2.04); width: 32vw; }
  .homage_wrap .homage_float.is-photo .homage_float_win { height: calc(32vw * 1.2); }
  .homage_wrap .homage_float.is-jump { display: none; }
  .homage_wrap .homage_bio_rule { top: 66vh; }
  .homage_wrap .homage_years { top: 68vh; grid-template-columns: 1fr 1fr; gap: 2vh 6vw; }
  .homage_wrap .homage_yr_y { font-size: 5.4vw; }
  .homage_wrap .homage_yr_t { font-size: 12.5px; }
  .homage_wrap .homage_index { display: none; }
}
@media (prefers-reduced-motion: reduce) { .homage_wrap .homage_open_img { transform: none; } }
@media (max-width: 600px) { .homage_wrap .is-title .homage_meta.is-tr { display: none; } }
/* the narrowest phones: the top labels drop their Japanese so the left and right labels never meet */
@media (max-width: 420px) { .homage_wrap .homage_meta.is-tl span[lang="ja"] { display: none; } }
/* landscape tablets and small laptops: the title reaches across, so the intro takes the clear corner under it */
@media (max-width: 1280px) and (min-aspect-ratio: 1/1) {
  .homage_wrap .homage_intro { left: auto; right: var(--g); top: auto; bottom: 5vh; width: min(34vw, 380px); }
}
/* short phones: Araki's years move up and tighten so the last row stays on the screen */
@media (max-aspect-ratio: 1/1) and (max-height: 760px) {
  .homage_wrap .homage_bio_rule { top: 58vh; }
  .homage_wrap .homage_years { top: 60vh; gap: 1.4vh 6vw; }
  .homage_wrap .homage_yr_y { margin-bottom: 3px; }
  .homage_wrap .homage_yr_t { font-size: 12px; line-height: 1.35; }
}