/* The Star: Araki's page language. Type: Bodoni Moda Black for the Part titles (a fashion cover's
   Didone, Araki's world), Zen Old Mincho for every Japanese line, IBM Plex Sans Condensed for the
   captions; Reggae One is the 3D sound effects in the world. Ink, paper, mauve (the star). */
.jojo_wrap {
  --ink: #120a10; --paper: #f6f3ee; --mauve: #c48fb4; --gold: #f2b705; --magenta: #e0218a;
  --display: 'JJ Bodoni', 'Bodoni Moda', Didot, serif;
  --mincho: 'JJ Mincho', 'Zen Old Mincho', serif;
  --sans: 'JJ Cond', 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --sfx: 'JJ SFX', 'Reggae One', sans-serif;
  position: relative; height: 100vh; background: #07040a; color: var(--paper); overflow: hidden;
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.jojo_wrap.is-past { visibility: hidden; }
.jojo_wrap .jojo_contain { position: relative; width: 100%; height: 100%; }
.jojo_wrap .jojo_world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

/* lockup */
.jojo_wrap .jojo_lock { position: absolute; left: clamp(16px, 2.6vw, 40px); top: clamp(14px, 2.4vh, 28px); margin: 0; z-index: 6; display: flex; flex-direction: column; gap: 2px; pointer-events: none; opacity: 0; transition: opacity 1s; }
.jojo_wrap.is-in .jojo_lock { opacity: 1; }
.jojo_wrap .jojo_lock_jp { font-family: var(--mincho); font-weight: 900; font-size: 13px; letter-spacing: 0.02em; color: var(--mauve); }
.jojo_wrap .jojo_lock_en { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -0.01em; text-shadow: 2px 2px 0 rgba(18, 10, 16, 0.9), 0 1px 12px rgba(0, 0, 0, 0.55); }
.jojo_wrap .jojo_lock_jp { text-shadow: 1px 1px 0 rgba(18, 10, 16, 0.9), 0 1px 8px rgba(0, 0, 0, 0.6); }

/* the bloodline nav */
.jojo_wrap .jojo_line { position: absolute; right: clamp(16px, 2.6vw, 40px); top: clamp(14px, 2.4vh, 28px); z-index: 8; opacity: 0; pointer-events: none; transition: opacity 0.8s; }
.jojo_wrap.is-in .jojo_line { opacity: 1; pointer-events: auto; }
.jojo_wrap .jojo_line_btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid var(--paper); background: rgba(18, 10, 16, 0.55); backdrop-filter: blur(6px); }
.jojo_wrap .jojo_line_btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.jojo_wrap .jojo_line_stars { display: flex; gap: 4px; }
.jojo_wrap .jojo_line_star { width: 13px; height: 13px; fill: rgba(246, 243, 238, 0.28); transition: fill 0.4s, transform 0.4s; }
.jojo_wrap .jojo_line_star.is-lit { fill: var(--mauve); transform: scale(1.25) rotate(-8deg); }
.jojo_wrap .jojo_line_now { font-family: var(--display); font-weight: 900; font-size: 15px; min-width: 52px; text-align: right; }
.jojo_wrap .jojo_rail { position: absolute; right: 0; top: 100%; list-style: none; margin: 8px 0 0; padding: 6px 0; min-width: 260px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--mauve);
  transform-origin: top right; transform: scaleY(0.4) rotate(-2deg); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(.2, .9, .2, 1.2), opacity 0.2s; }
.jojo_wrap .jojo_line.is-open .jojo_rail { transform: none; opacity: 1; pointer-events: auto; }
.jojo_wrap .jojo_rail_item { margin: 0; }
.jojo_wrap .jojo_rail_link { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 8px; padding: 7px 14px; color: inherit; text-decoration: none; }
.jojo_wrap .jojo_rail_link:hover, .jojo_wrap .jojo_rail_link.is-here { background: var(--ink); color: var(--paper); }
.jojo_wrap .jojo_rail_n { font-family: var(--display); font-weight: 900; font-size: 20px; }
.jojo_wrap .jojo_rail_t { font-family: var(--display); font-weight: 700; font-size: 17px; }
.jojo_wrap .jojo_rail_y { font-size: 13px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* sound and graphics */
.jojo_wrap .jojo_ctrl { position: absolute; right: clamp(16px, 2.6vw, 40px); bottom: clamp(14px, 2.6vh, 28px); z-index: 7; display: flex; gap: 8px; align-items: flex-end; opacity: 0; transition: opacity 0.8s; }
.jojo_wrap.is-in .jojo_ctrl { opacity: 1; }
.jojo_wrap .jojo_ctrl_btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 0; background: rgba(18, 10, 16, 0.55); border: 2px solid var(--paper); backdrop-filter: blur(6px); }
.jojo_wrap .jojo_ctrl_btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.jojo_wrap .jojo_ctrl_k { display: grid; place-items: center; width: 30px; height: 30px; background: var(--paper); color: var(--ink); font-family: var(--mincho); font-weight: 900; font-size: 16px; }
.jojo_wrap .jojo_ctrl_btn[aria-pressed="true"] .jojo_ctrl_k { background: var(--mauve); }
.jojo_wrap .jojo_ctrl_v { font-size: 14px; font-weight: 500; }
.jojo_wrap .jojo_gpu { position: absolute; right: 0; bottom: 44px; width: min(320px, 80vw); margin: 0; padding: 8px 10px; background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(4px); transition: 0.25s; pointer-events: none; }
.jojo_wrap .jojo_gpu.is-on { opacity: 1; transform: none; }

/* beat layers */
.jojo_wrap .jojo_layers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.jojo_wrap .jojo_layer { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.jojo_wrap .jojo_col { position: absolute; left: clamp(16px, 4.4vw, 72px); top: clamp(76px, 13vh, 140px); width: min(520px, 40vw); display: flex; flex-direction: column; gap: clamp(16px, 3vh, 34px); transform: translateY(var(--py, 0px)); }
.jojo_wrap .jojo_caps { display: grid; }
.jojo_wrap .jojo_caps > * { grid-area: 1 / 1; }

/* the Part's title card: slammed in, printed slightly off register */
.jojo_wrap .jojo_card { margin: 0; }
.jojo_wrap .jojo_card_part { margin: 0 0 6px; display: inline-block; padding: 3px 10px 4px; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 16px; transform: skewX(-8deg); }
.jojo_wrap .jojo_card_title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.88; letter-spacing: -0.035em; color: var(--paper);
  text-shadow: 3px 3px 0 var(--mauve), 6px 6px 0 rgba(18, 10, 16, 0.85); text-wrap: balance; }
.jojo_wrap .jojo_card_jp { margin: 10px 0 0; font-family: var(--mincho); font-weight: 900; font-size: clamp(14px, 1.2vw, 18px); color: var(--paper); text-shadow: 1px 1px 0 rgba(18, 10, 16, 0.95), 0 1px 8px rgba(0, 0, 0, 0.6); }
.jojo_wrap .jojo_slam_w { display: inline-block; white-space: nowrap; }
.jojo_wrap .jojo_slam_c { display: inline-block; will-change: transform; }

/* captions: the manga's caption boxes */
.jojo_wrap .jojo_cap { margin: 0; max-width: 34ch; padding: 12px 16px 13px; background: var(--paper); color: var(--ink); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.38; border: 2px solid var(--ink); box-shadow: 5px 5px 0 rgba(18, 10, 16, 0.75);
  opacity: 0; transform: translateY(10px) rotate(-1deg); transition: opacity 0.45s, transform 0.6s cubic-bezier(.2, .9, .2, 1); }
.jojo_wrap .jojo_cap.is-on { opacity: 1; transform: rotate(-1deg); }
.jojo_wrap .jojo_src { display: block; margin-top: 6px; font-size: 13px; color: #5a3a5a; }
.jojo_wrap .jojo_said { margin: 0; max-width: 36ch; padding: 12px 16px; background: var(--ink); color: var(--paper); border-left: 6px solid var(--gold); opacity: 0; transition: opacity 0.5s; }
.jojo_wrap .jojo_said.is-on { opacity: 1; }
.jojo_wrap .jojo_said .jojo_en { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.2; }

/* the panel: a tilted frame of Araki's art with the line under it */
.jojo_wrap .jojo_panel { position: absolute; margin: 0; width: min(380px, 27vw); right: clamp(16px, 4.4vw, 72px); top: clamp(92px, 16vh, 170px);
  background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--ink), 12px 14px 0 9px rgba(18, 10, 16, 0.45);
  opacity: 0; transform: translateY(var(--py, 0px)) rotate(2.5deg) scale(0.92); transition: opacity 0.35s, transform 0.55s cubic-bezier(.2, 1.4, .3, 1); }
.jojo_wrap .jojo_panel.is-on { opacity: 1; transform: translateY(var(--py, 0px)) rotate(2.5deg); }
.jojo_wrap .jojo_panel_art { position: relative; height: clamp(180px, 34vh, 360px); overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff 0, #efe4ef 55%, #d9c3d8 100%); border-bottom: 4px solid var(--ink); }
.jojo_wrap .jojo_panel_art::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(18, 10, 16, 0.08) 0 2deg, transparent 2deg 9deg); }
.jojo_wrap .jojo_panel_art::after { content: '© Hirohiko Araki / Shueisha'; position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: rgba(18, 10, 16, 0.6); }
.jojo_wrap .jojo_panel_img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 12%; max-width: none; display: block; }
.jojo_wrap .jojo_panel_q { margin: 0; padding: 14px 16px 16px; }
.jojo_wrap .jojo_jp { margin: 0 0 6px; font-family: var(--mincho); font-weight: 900; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.25; letter-spacing: 0.02em; }
.jojo_wrap .jojo_en { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.2; }
.jojo_wrap .jojo_en.is-long { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.28; }
.jojo_wrap .jojo_cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: #5a3a5a; }
.jojo_wrap .jojo_said .jojo_cite { color: var(--mauve); }
.jojo_wrap .jojo_panel.is-reset { left: 50%; right: auto; top: 50%; width: min(420px, 82vw); transform: translate(-50%, -50%) rotate(-2deg) scale(0.9); }
.jojo_wrap .jojo_panel.is-reset.is-on { transform: translate(-50%, -50%) rotate(-2deg); }

/* hints */
.jojo_wrap .jojo_hint { position: absolute; left: 50%; bottom: clamp(18px, 5vh, 52px); margin: 0; transform: translateX(-50%); padding: 7px 14px; background: rgba(18, 10, 16, 0.7); border: 1.5px solid rgba(246, 243, 238, 0.7); font-size: 15px; white-space: nowrap; opacity: 0; transition: opacity 0.5s; }
.jojo_wrap .jojo_hint.is-on { opacity: 1; }
.jojo_wrap .jojo_hint.is-big { font-family: var(--display); font-weight: 900; font-size: 20px; padding: 9px 18px; animation: jojo-breathe 1.6s ease-in-out infinite; }
@keyframes jojo-breathe { 50% { box-shadow: 0 0 0 6px rgba(196, 143, 180, 0.35); } }
.jojo_wrap.is-stopped .jojo_hint { opacity: 0 !important; }

/* Made in Heaven's speed */
.jojo_wrap .jojo_speed { position: absolute; left: 50%; top: clamp(70px, 11vh, 120px); transform: translateX(-50%); margin: 0; display: flex; align-items: baseline; gap: 8px; opacity: 0; transition: opacity 0.5s; }
.jojo_wrap .jojo_speed.is-on { opacity: 1; }
.jojo_wrap .jojo_speed_x { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4vw, 64px); font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 var(--ink); }
.jojo_wrap .jojo_speed_l { font-size: 14px; }

/* The World's clock */
.jojo_wrap .jojo_stop { position: absolute; left: 50%; bottom: clamp(18px, 6vh, 70px); transform: translateX(-50%); z-index: 6; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; color: var(--ink); }
.jojo_wrap.is-stopped .jojo_stop { opacity: 1; }
.jojo_wrap .jojo_stop_jp { margin: 0; font-family: var(--mincho); font-weight: 900; font-size: clamp(22px, 2.4vw, 34px); color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.jojo_wrap .jojo_stop_n { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(76px, 10vw, 150px); line-height: 0.9; color: var(--paper); text-shadow: 5px 5px 0 var(--ink); font-variant-numeric: tabular-nums; }
.jojo_wrap .jojo_stop_s { font-family: var(--mincho); font-size: 0.32em; margin-left: 6px; }
.jojo_wrap .jojo_stop_l { margin: 4px 0 0; font-size: 15px; color: var(--paper); text-shadow: 0 1px 6px #000; }

/* To Be Continued */
.jojo_wrap .jojo_tbc { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.jojo_wrap .jojo_tbc.is-on { opacity: 1; }
.jojo_wrap .jojo_tbc_arrow { position: absolute; right: 4vw; bottom: 8vh; width: min(460px, 70vw); height: auto; transform: translateX(120%); transition: transform 0.7s cubic-bezier(.2, .9, .3, 1); }
.jojo_wrap .jojo_tbc.is-on .jojo_tbc_arrow { transform: none; }
.jojo_wrap .jojo_tbc_arrow path { fill: #2a1a14; stroke: #f1e3c4; stroke-width: 3; }
.jojo_wrap .jojo_tbc_arrow text { fill: #f1e3c4; font-family: var(--display); font-weight: 900; font-size: 34px; text-anchor: middle; }

/* the loader */
.jojo_wrap .jojo_loader { position: absolute; inset: 0; z-index: 20; display: grid; place-items: end center; padding-bottom: clamp(36px, 9vh, 90px); transition: opacity 1.2s; background: radial-gradient(ellipse at 50% 45%, #1c0f1c 0, #07040a 70%); }
.jojo_wrap .jojo_loader_go { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) rotate(-6deg); display: flex; gap: 0.02em; font-family: var(--sfx); font-size: clamp(70px, 12vw, 200px); line-height: 1; color: var(--mauve); }
.jojo_wrap .jojo_loader_g { display: inline-block; text-shadow: 4px 4px 0 #2a0f2a, 8px 8px 0 rgba(0, 0, 0, 0.5); -webkit-text-stroke: 2px #120a10; opacity: calc(0.15 + var(--load, 0) * 3); animation: jojo-rumble 0.18s steps(2) infinite; }
.jojo_wrap .jojo_loader_g:nth-child(2) { font-size: 0.86em; animation-delay: -0.05s; opacity: calc(var(--load, 0) * 3 - 0.6); }
.jojo_wrap .jojo_loader_g:nth-child(3) { font-size: 0.74em; animation-delay: -0.1s; opacity: calc(var(--load, 0) * 3 - 1.2); }
.jojo_wrap .jojo_loader_g:nth-child(4) { font-size: 0.62em; animation-delay: -0.14s; opacity: calc(var(--load, 0) * 3 - 1.8); }
@keyframes jojo-rumble { 0% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px) rotate(1deg); } 100% { transform: translate(-1px, 1px); } }
.jojo_wrap .jojo_loader_star { position: absolute; left: 50%; top: 44%; width: clamp(50px, 6vw, 90px); transform: translate(150%, 60%) rotate(12deg); }
.jojo_wrap .jojo_loader_star_o { fill: none; stroke: var(--mauve); stroke-width: 0.8; }
.jojo_wrap .jojo_loader_star_f { fill: var(--mauve); }
.jojo_wrap .jojo_loader_fill { transform-origin: 0 24px; transform: scaleY(var(--load, 0)); transform-box: view-box; }
.jojo_wrap .jojo_loader.is-done .jojo_loader_star { animation: jojo-stamp 0.5s cubic-bezier(.2, 1.6, .3, 1) both; }
@keyframes jojo-stamp { 0% { transform: translate(150%, 60%) rotate(12deg) scale(2.4); } 100% { transform: translate(150%, 60%) rotate(12deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .jojo_wrap .jojo_loader_g { animation: none; } }
.jojo_wrap .jojo_loader.is-gone { opacity: 0; pointer-events: none; }
.jojo_wrap .jojo_loader_n { position: absolute; left: clamp(16px, 4vw, 60px); bottom: clamp(20px, 5vh, 50px); margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(54px, 7vw, 110px); line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.jojo_wrap .jojo_loader_line { position: absolute; left: 50%; top: clamp(20px, 5vh, 50px); transform: translateX(-50%); margin: 0; font-size: 14px; color: rgba(246, 243, 238, 0.75); white-space: nowrap; }
/* the way in has its own corner: bottom right, across from the count (portrait: its own row under the count) */
.jojo_wrap .jojo_loader_enter { position: absolute; right: clamp(16px, 4vw, 60px); bottom: clamp(20px, 5vh, 50px); display: flex; gap: 12px; opacity: 0; transform: translateY(8px); transition: 0.6s; pointer-events: none; }
.jojo_wrap .jojo_loader.is-done .jojo_loader_enter { opacity: 1; transform: none; pointer-events: auto; }
.jojo_wrap .jojo_loader_btn { all: unset; cursor: pointer; padding: 12px 20px; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 18px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--mauve); display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
.jojo_wrap .jojo_loader_btn span { font-family: var(--mincho); font-size: 15px; white-space: nowrap; }
.jojo_wrap .jojo_loader_btn:hover, .jojo_wrap .jojo_loader_btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--mauve); }
.jojo_wrap .jojo_loader_btn.is-quiet { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none; }

/* ---- tablet ---- */
@media (max-width: 1100px) and (min-width: 768px) {
  .jojo_wrap .jojo_col { width: min(440px, 52vw); }
  .jojo_wrap .jojo_panel { width: min(320px, 36vw); }
}
/* ---- portrait: designed for the phone, not shrunk ---- */
@media (max-aspect-ratio: 1/1) {
  .jojo_wrap .jojo_col { left: 16px; right: 16px; width: auto; top: 76px; gap: 12px; }
  .jojo_wrap .jojo_card_title { font-size: clamp(38px, 11vw, 64px); }
  .jojo_wrap .jojo_cap { font-size: 15px; max-width: none; padding: 10px 12px; }
  .jojo_wrap .jojo_said { max-width: none; }
  .jojo_wrap .jojo_panel { right: 16px; left: 16px; top: auto; bottom: 66px; width: auto; display: grid; grid-template-columns: 38% 1fr; transform: translateY(var(--py, 0px)) rotate(-1.5deg) scale(0.94); }
  .jojo_wrap .jojo_panel.is-on { transform: translateY(var(--py, 0px)) rotate(-1.5deg); }
  .jojo_wrap .jojo_panel_art { height: clamp(140px, 21vh, 230px); border-bottom: 0; border-right: 4px solid var(--ink); }
  .jojo_wrap .jojo_panel:not(.is-reset) { max-width: 560px; left: auto; width: calc(100vw - 32px); }
  .jojo_wrap .jojo_panel_q { padding: 10px 12px 12px; }
  .jojo_wrap .jojo_jp { font-size: 18px; }
  .jojo_wrap .jojo_en, .jojo_wrap .jojo_en.is-long { font-size: 15px; }
  .jojo_wrap .jojo_cite { font-size: 12px; }
  .jojo_wrap .jojo_panel.is-reset { top: 50%; bottom: auto; left: 50%; right: auto; width: 86vw; }
  .jojo_wrap .jojo_hint, .jojo_wrap .jojo_hint.is-big { left: 16px; right: auto; transform: none; bottom: 18px; font-size: 13px; padding: 6px 10px; max-width: calc(100vw - 110px); white-space: normal; animation: none; }
  .jojo_wrap .jojo_lock_jp { display: none; }
  .jojo_wrap .jojo_line_star { width: 11px; height: 11px; }
  .jojo_wrap .jojo_line_stars { gap: 3px; }
  .jojo_wrap .jojo_ctrl { top: auto; bottom: 16px; right: 16px; }
  .jojo_wrap .jojo_ctrl_v { display: none; }
  .jojo_wrap .jojo_ctrl_btn { padding: 0; height: 30px; }
  .jojo_wrap .jojo_ctrl_k { width: 26px; height: 26px; }
  .jojo_wrap .jojo_gpu { bottom: 40px; top: auto; }
  .jojo_wrap .jojo_speed { top: 38vh; bottom: auto; left: auto; right: 16px; transform: none; }
  .jojo_wrap .jojo_stop { bottom: 64px; }
  .jojo_wrap .jojo_line_now { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jojo_wrap .jojo_hint.is-big { animation: none; } }

/* the homage's paper rises over the last frame: the story's chrome steps aside */
.jojo_wrap.is-leaving .jojo_ctrl, .jojo_wrap.is-leaving .jojo_lock, .jojo_wrap.is-leaving .jojo_line { opacity: 0 !important; pointer-events: none !important; }
@media (pointer: coarse) { .jojo_wrap .jojo_kbd { display: none; } }

/* the loader on a phone: the way in is a row of its own at the foot, the count sits above it, never under it */
@media (max-aspect-ratio: 1/1) {
  .jojo_wrap .jojo_loader_enter { left: clamp(16px, 4vw, 60px); right: clamp(16px, 4vw, 60px); bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); flex-direction: column; gap: 12px; }
  .jojo_wrap .jojo_loader_btn { justify-content: center; padding: 14px 18px; font-size: 17px; }
  .jojo_wrap .jojo_loader_n { bottom: calc(max(20px, calc(env(safe-area-inset-bottom) + 16px)) + 2 * 56px + 12px + 22px); font-size: clamp(54px, 15vw, 96px); }
}


/* every Part's title and the lockup carry an ink outline drawn under the fill, so they hold over the brightest
   skies (Naples' yellow) as they do over the dark ones */
.jojo_wrap .jojo_card_title { -webkit-text-stroke: 0.07em var(--ink); paint-order: stroke fill; }
.jojo_wrap .jojo_lock_en { -webkit-text-stroke: 4px rgba(18, 10, 16, 0.92); paint-order: stroke fill; }
.jojo_wrap .jojo_card_jp { -webkit-text-stroke: 3px rgba(18, 10, 16, 0.9); paint-order: stroke fill; }