/* The homage, a chapter of parts, each one screen. The wall, the household and the tower stay in the
   story's night; Ohtaka's spread and the colophon are manga paper. The story's type system: Amiri speaks,
   Zen Antique runs down the side, Reem Kufi only labels (small tracked capitals in gold). Every part opens
   with the same header, so the chapter reads as one book. */
.nights_wrap {
  --nights-night: #04060d;
  --nights-ink: #f1e8d6;
  --nights-dim: rgba(241, 232, 214, 0.62);
  --nights-gold: #e3b66b;
  --nights-gold-2: #f7dca6;
  --nights-paper: #f1ece1;
  --nights-black: #121010;
  --nights-kufi: 'Magi Kufi', 'Reem Kufi', system-ui, sans-serif;
  --nights-naskh: 'Magi Naskh', 'Amiri', Georgia, serif;
  --nights-jp: 'Magi Mincho', 'Zen Antique', serif;
  --nights-col: clamp(28px, 6vw, 112px);
  --nights-top: clamp(92px, 13vh, 140px);
  position: relative; margin-top: -100vh; z-index: 2; color: var(--nights-ink); background: none;   /* each part paints its own ground, so the held arrival shows only the wall */
}
.nights_wrap .nights_contain { position: relative; }
.nights_wrap .nights_part { position: relative; }
.nights_wrap .nights_stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.nights_wrap :focus-visible { outline: 1px solid var(--nights-gold-2); outline-offset: 5px; border-radius: 3px; }
.nights_wrap .nights_label { margin: 0; font: 500 11px/1.25 var(--nights-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nights-gold); }
.nights_wrap .nights_credit { margin: 0; font: 400 13px/1.35 var(--nights-naskh); color: var(--nights-dim); }
.nights_wrap .nights_vert { margin: 0; writing-mode: vertical-rl; font: 400 clamp(44px, 4.6vw, 76px)/1 var(--nights-jp); letter-spacing: 0.04em; }
.nights_wrap .nights_link { padding: 0 0 6px; border: 0; border-bottom: 1px solid rgba(227, 182, 107, 0.5); background: none; cursor: pointer; font: 500 11px/1 var(--nights-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nights-ink); transition: color 0.3s ease, border-color 0.3s ease; }
.nights_wrap .nights_link:hover, .nights_wrap .nights_link:focus-visible { color: var(--nights-gold-2); border-color: var(--nights-gold-2); }

/* the header every part opens with: the Japanese down the side, a label, the title, one line */
.nights_wrap .nights_head { position: absolute; left: var(--nights-col); top: var(--nights-top); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 2vw, 32px); align-items: start; max-width: min(34vw, 520px); pointer-events: none; }
.nights_wrap .nights_head_txt { display: grid; gap: 14px; }
.nights_wrap .nights_title { margin: 0; font: 400 clamp(40px, 4.2vw, 72px)/1 var(--nights-naskh); letter-spacing: -0.018em; }
.nights_wrap .nights_body { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(227, 182, 107, 0.4); max-width: 30ch; font: 400 clamp(16px, 1.15vw, 18px)/1.5 var(--nights-naskh); color: rgba(241, 232, 214, 0.86); }

/* A. the wall of Nights: a canvas you fly over */
.nights_wrap .nights_part.is-wall .nights_stage { background: var(--nights-night); }
.nights_wrap .nights_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.nights_wrap .nights_canvas.is-drag { cursor: grabbing; }
.nights_wrap .nights_canvas.is-over { cursor: pointer; }
.nights_wrap .nights_head.is-wall { text-shadow: 0 2px 30px rgba(4, 6, 13, 0.9); transition: opacity 0.6s ease; }
.nights_wrap .nights_head.is-wall.is-away { opacity: 0 !important; }
.nights_wrap .nights_arcs { position: absolute; left: var(--nights-col); right: calc(var(--nights-col) + 230px); bottom: clamp(72px, 9.5vh, 96px); z-index: 3; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.nights_wrap .nights_arcs::-webkit-scrollbar { display: none; }
.nights_wrap .nights_arcs_list { display: flex; gap: 8px; margin: 0; padding: 0 60px 0 0; list-style: none; width: max-content; }
.nights_wrap .nights_arc_b { display: flex; align-items: baseline; gap: 8px; padding: 9px 13px 8px; border: 1px solid rgba(227, 182, 107, 0.28); border-radius: 999px; background: rgba(4, 6, 13, 0.6); cursor: pointer; color: var(--nights-ink); font: 400 15px/1 var(--nights-naskh); white-space: nowrap; transition: border-color 0.3s ease, background 0.3s ease; }
.nights_wrap .nights_arc_b span { font: 500 10px/1 var(--nights-kufi); letter-spacing: 0.14em; color: var(--nights-gold); }
.nights_wrap .nights_arc_b:hover, .nights_wrap .nights_arc_b:focus-visible, .nights_wrap .nights_arc_b.is-now { border-color: var(--nights-gold-2); background: rgba(227, 182, 107, 0.14); }
.nights_wrap .nights_zoom { position: absolute; right: var(--nights-col); bottom: clamp(72px, 9.5vh, 96px); z-index: 3; display: flex; gap: 6px; }
.nights_wrap .nights_zoom_b { min-width: 38px; height: 34px; padding: 0 12px; border: 1px solid rgba(227, 182, 107, 0.36); border-radius: 999px; background: rgba(4, 6, 13, 0.6); cursor: pointer; color: var(--nights-ink); font: 400 20px/1 var(--nights-naskh); }
.nights_wrap .nights_zoom_b.is-all { font: 500 10px/1 var(--nights-kufi); letter-spacing: 0.18em; text-transform: uppercase; }
.nights_wrap .nights_zoom_b:hover, .nights_wrap .nights_zoom_b:focus-visible { border-color: var(--nights-gold-2); }
.nights_wrap .nights_wall_credit { position: absolute; left: var(--nights-col); bottom: calc(clamp(72px, 9.5vh, 96px) + 64px); z-index: 3; max-width: min(30ch, 30vw); text-align: left; }
.nights_wrap .nights_tip { position: absolute; left: 0; top: 0; z-index: 4; display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 6px; padding: 14px 16px; background: rgba(4, 6, 13, 0.9); border: 1px solid rgba(227, 182, 107, 0.4); pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.nights_wrap .nights_tip.is-on { opacity: 1; }
.nights_wrap .nights_tip_jt { grid-column: 1; grid-row: 1 / span 2; writing-mode: vertical-rl; font: 400 20px/1 var(--nights-jp); }
.nights_wrap .nights_tip_ja { grid-column: 2; font: 400 14px/1.2 var(--nights-jp); color: var(--nights-gold-2); }
.nights_wrap .nights_tip_t { grid-column: 2; max-width: 15em; font: 400 21px/1.1 var(--nights-naskh); }
/* a Night opened */
.nights_wrap .nights_reader { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 26rem); gap: clamp(28px, 3.4vw, 56px); align-content: center; justify-content: center; align-items: center; background: rgba(4, 6, 13, 0.86); backdrop-filter: blur(6px); }
.nights_wrap .nights_reader[hidden] { display: none; }
.nights_wrap .nights_reader_img { width: min(32vw, 70vh * 0.706); aspect-ratio: 240 / 340; background-color: #f4efe6; background-repeat: no-repeat; border: 3px solid #f4efe6; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(227, 182, 107, 0.4); }
.nights_wrap .nights_reader_txt { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; row-gap: 14px; align-items: start; }
.nights_wrap .nights_reader_jt { grid-column: 1; grid-row: 1 / span 5; margin: 0; writing-mode: vertical-rl; font: 400 clamp(34px, 3.4vw, 54px)/1 var(--nights-jp); letter-spacing: 0.04em; }
.nights_wrap .nights_reader_no { grid-column: 2; margin: 4px 0 0; display: flex; gap: 12px; align-items: baseline; }
.nights_wrap .nights_reader_ja { font: 400 18px/1 var(--nights-jp); color: var(--nights-gold-2); }
.nights_wrap .nights_reader_t { grid-column: 2; margin: 0; font: 400 clamp(32px, 3vw, 50px)/1.02 var(--nights-naskh); letter-spacing: -0.015em; }
.nights_wrap .nights_reader_arc { grid-column: 2; margin: 0; font: 400 18px/1.4 var(--nights-naskh); color: var(--nights-dim); }
.nights_wrap .nights_reader_nav { grid-column: 2; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; }

/* B. the household: heading | card | the Djinn, over the rail of all twenty-eight */
.nights_wrap .nights_part.is-house .nights_stage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: clamp(28px, 4vw, 72px); padding: var(--nights-top) var(--nights-col) clamp(22px, 3.5vh, 40px);
  background: radial-gradient(42% 52% at 50% 46%, rgba(var(--crgb, 247, 220, 166), 0.16), transparent 70%), radial-gradient(ellipse at 50% 100%, #0f0b14 0%, var(--nights-night) 70%);
  transition: background 0.8s ease;
}
.nights_wrap .nights_head.is-house { position: static; grid-column: 1; grid-row: 1; align-self: start; max-width: none; }
.nights_wrap .nights_card_stage { position: relative; grid-column: 2; grid-row: 1; align-self: center; perspective: 1400px; touch-action: pan-y; }   /* a sideways swipe turns the card; the page still scrolls */
.nights_wrap .nights_card { position: relative; z-index: 1; width: auto; height: min(58vh, 560px); aspect-ratio: 300 / 380; margin: 0; transform-style: preserve-3d; }
.nights_wrap .nights_card_art, .nights_wrap .nights_card_sigil { position: absolute; inset: 0; border: 1px solid rgba(var(--crgb, 247, 220, 166), 0.7); box-shadow: 0 0 0 8px rgba(4, 6, 13, 0.6), 0 0 0 9px rgba(var(--crgb, 247, 220, 166), 0.3), 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 120px rgba(var(--crgb, 247, 220, 166), 0.22); background: #0b0910 no-repeat; }
.nights_wrap .nights_card_sigil { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 42%, rgba(var(--crgb, 247, 220, 166), 0.2), #0b0910 70%); color: rgb(var(--crgb, 247, 220, 166)); }
.nights_wrap .nights_card.is-sigil .nights_card_sigil { display: flex; }
.nights_wrap .nights_card.is-sigil .nights_card_art { display: none; }
.nights_wrap .nights_card_sigil_seal { width: 56%; aspect-ratio: 1; }
.nights_wrap .nights_card_sigil_seal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(var(--crgb, 247, 220, 166), 0.8)); }
.nights_wrap .nights_card_sigil_n { font: 400 clamp(36px, 4vh, 48px)/1 var(--nights-jp); color: var(--nights-ink); }
.nights_wrap .nights_card_sigil_t { font: 500 10px/1 var(--nights-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nights-dim); }
.nights_wrap .nights_equip { position: absolute; left: -40%; top: -25%; width: 180%; height: 150%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.nights_wrap .nights_djinn { grid-column: 3; grid-row: 1; align-self: center; max-width: 24rem; }
.nights_wrap .nights_djinn_name { margin: 14px 0 22px; font: 400 clamp(46px, 4.6vw, 84px)/0.98 var(--nights-naskh); letter-spacing: -0.02em; }
.nights_wrap .nights_djinn_dl { margin: 0; display: grid; gap: 10px; }
.nights_wrap .nights_djinn_row { display: grid; grid-template-columns: 5.6em 1fr; gap: 14px; align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(227, 182, 107, 0.22); }
.nights_wrap .nights_djinn_dd { margin: 0; font: 400 18px/1.35 var(--nights-naskh); }
.nights_wrap .nights_djinn_nav { display: flex; gap: 24px; margin-top: 26px; }
.nights_wrap .nights_djinn_note { display: none; margin: 0; max-width: 30ch; font: 400 19px/1.45 var(--nights-naskh); color: rgba(241, 232, 214, 0.86); }
.nights_wrap .nights_djinn.is-unrev .nights_djinn_note { display: block; }
.nights_wrap .nights_djinn.is-unrev .nights_djinn_dl { display: none; }
.nights_wrap .nights_djinn.is-unrev .nights_djinn_name { color: rgba(241, 232, 214, 0.55); }
.nights_wrap .nights_card.is-unrev .nights_card_sigil { border-style: dashed; background: radial-gradient(circle at 50% 42%, rgba(247, 220, 166, 0.07), #0b0910 70%); }
.nights_wrap .nights_card.is-unrev .nights_card_sigil_seal { opacity: 0.4; }
.nights_wrap .nights_rail_wrap { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: clamp(14px, 2.6vh, 28px); }
.nights_wrap .nights_rail_k { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 0 0 10px; }
.nights_wrap .nights_rail_key { display: flex; gap: 16px; align-items: center; font: 500 10px/1 var(--nights-kufi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nights-dim); }
.nights_wrap .nights_rail_sw { display: inline-block; width: 9px; height: 12px; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(227, 182, 107, 0.6); }
.nights_wrap .nights_rail_sw.is-drawn { background: linear-gradient(135deg, #ddd, #777); border-color: transparent; }
.nights_wrap .nights_rail_sw.is-unrev { border-style: dashed; border-color: rgba(227, 182, 107, 0.35); }
.nights_wrap .nights_rail { display: flex; gap: 4px; margin: 0; padding: 8px 0 6px; list-style: none; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nights_wrap .nights_rail::-webkit-scrollbar { display: none; }
.nights_wrap .nights_rail_b { position: relative; flex: none; width: 32px; height: 44px; padding: 0; border: 1px solid rgba(227, 182, 107, 0.25); background: #0b0910 no-repeat; cursor: pointer; opacity: 0.55; transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.1, 1); }
.nights_wrap .nights_rail_b.is-sigil { display: grid; place-items: center; font: 500 10px/1 var(--nights-kufi); letter-spacing: 0.04em; color: var(--nights-gold-2); border-color: rgba(227, 182, 107, 0.6); }
.nights_wrap .nights_rail_b.is-unrev { background: transparent; border-style: dashed; border-color: rgba(227, 182, 107, 0.3); color: rgba(241, 232, 214, 0.42); opacity: 0.8; }
.nights_wrap .nights_rail_b:hover, .nights_wrap .nights_rail_b:focus-visible { opacity: 0.9; }
.nights_wrap .nights_rail_b.is-sel { opacity: 1; border-color: rgb(var(--crgb, 247, 220, 166)); transform: translateY(-6px); box-shadow: 0 0 18px rgba(var(--crgb, 247, 220, 166), 0.5); }
.nights_wrap .nights_house_credit { grid-column: 1 / -1; grid-row: 3; justify-self: start; max-width: 46ch; margin-top: 12px; }

/* C. the tower of volumes */
.nights_wrap .nights_part.is-tower { background: var(--nights-night); }
.nights_wrap .nights_part.is-tower .nights_stage { background: radial-gradient(60% 34% at 58% 104%, rgba(227, 160, 70, 0.32), transparent 70%), radial-gradient(40% 50% at 58% 50%, rgba(120, 70, 150, 0.12), transparent 70%), linear-gradient(180deg, #06070d 0%, #0b0810 60%, #160e08 100%); }
.nights_wrap .nights_tower_scene { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 60% 50%; cursor: grab; touch-action: pan-y; }
.nights_wrap .nights_tower { position: absolute; left: 60%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; }
.nights_wrap .nights_vol { position: absolute; left: -120px; top: -178px; width: 240px; height: 356px; background: #222 no-repeat; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); backface-visibility: hidden; }
.nights_wrap .nights_vol::after { content: ''; position: absolute; inset: 0; background: #04060d; opacity: var(--dim, 0); pointer-events: none; }
.nights_wrap .nights_vol.is-cur { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(247, 200, 120, 0.25); }
.nights_wrap .nights_tower_now { position: absolute; right: var(--nights-col); bottom: clamp(100px, 13vh, 140px); z-index: 3; margin: 0; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: baseline; text-align: right; }
.nights_wrap .nights_tower_now .nights_label { grid-column: 1 / -1; margin-bottom: 6px; }
.nights_wrap .nights_tower_n { font: 400 clamp(90px, 10vw, 180px)/0.9 var(--nights-naskh); color: var(--nights-gold-2); font-variant-numeric: tabular-nums; }
.nights_wrap .nights_tower_of { font: 400 22px/1 var(--nights-naskh); color: var(--nights-dim); }
.nights_wrap .nights_tower_credit { position: absolute; left: var(--nights-col); bottom: clamp(26px, 4.5vh, 48px); max-width: 40ch; }

/* D. the maker: an editorial collage on paper */
.nights_wrap .nights_part.is-maker { background: var(--nights-paper); color: var(--nights-black); }
.nights_wrap .nights_part.is-maker .nights_label { color: #9a6a24; }
.nights_wrap .nights_maker { position: relative; min-height: 210vh; padding: 16vh var(--nights-col) 12vh; }
.nights_wrap .nights_maker_k { position: relative; z-index: 2; margin: 0 0 22px; }
.nights_wrap .nights_maker_name { position: relative; z-index: 2; margin: 0; font: 400 clamp(84px, 12.5vw, 240px)/0.86 var(--nights-naskh); letter-spacing: -0.035em; }
.nights_wrap .nights_maker_l { display: block; }
.nights_wrap .nights_maker_l.is-2 { padding-left: 0.6em; }
.nights_wrap .nights_maker_ja { position: absolute; right: var(--nights-col); top: 16vh; z-index: 2; margin: 0; writing-mode: vertical-rl; font: 400 clamp(56px, 6vw, 110px)/1 var(--nights-jp); }
.nights_wrap .nights_col { position: absolute; z-index: 1; margin: 0; }
.nights_wrap .nights_col_img { display: block; width: 100%; height: auto; border: 2px solid var(--nights-black); box-shadow: 10px 10px 0 var(--nights-black); background: #fff; clip-path: inset(0 0 var(--clip, 0%) 0); }
.nights_wrap .nights_col_cap { margin-top: 12px; font: 500 10px/1.3 var(--nights-kufi); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(18, 16, 16, 0.66); }
.nights_wrap .nights_col.is-a { width: min(30vw, 460px); right: 8vw; top: 46vh; transform: rotate(-2deg); }
.nights_wrap .nights_col.is-b { width: min(26vw, 380px); left: 9vw; top: 130vh; transform: rotate(1.5deg); }
.nights_wrap .nights_col.is-c { width: min(16vw, 240px); left: 44vw; top: 98vh; transform: rotate(-3deg); }
.nights_wrap .nights_col.is-d { width: min(26vw, 380px); right: 8vw; top: 126vh; transform: rotate(2deg); }
.nights_wrap .nights_col.is-e { width: min(14vw, 210px); left: 46vw; top: 162vh; transform: rotate(-1deg); }
.nights_wrap .nights_years { position: absolute; z-index: 2; left: var(--nights-col); top: 66vh; width: min(26rem, 32vw); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--nights-black); }
.nights_wrap .nights_year { display: grid; grid-template-columns: 3.2em 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(18, 16, 16, 0.2); }
.nights_wrap .nights_year_n { font: 500 12px/1.3 var(--nights-kufi); letter-spacing: 0.14em; color: #9a6a24; }
.nights_wrap .nights_year_t { font: 400 18px/1.35 var(--nights-naskh); }
.nights_wrap .nights_maker_credit { position: absolute; left: var(--nights-col); bottom: 6vh; color: rgba(18, 16, 16, 0.6); }

/* E. colophon */
.nights_wrap .nights_part.is-colophon { z-index: 2; min-height: 200vh; background: var(--nights-paper); color: var(--nights-black); }
.nights_wrap .nights_part.is-colophon .nights_label { color: #9a6a24; }
.nights_wrap .nights_colo { position: sticky; top: 0; min-height: 100vh; width: min(760px, calc(100% - 80px)); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 60px 0; }
.nights_wrap .nights_colo_seal { width: 110px; height: 110px; margin: 0 auto 26px; color: var(--nights-black); }
.nights_wrap .nights_colo_seal svg { width: 100%; height: 100%; overflow: visible; }
.nights_wrap .nights_colo_h { margin: 0 0 30px; text-align: center; font: 400 clamp(44px, 4vw, 64px)/1 var(--nights-naskh); letter-spacing: -0.015em; }
.nights_wrap .nights_colo_dl { margin: 0; display: grid; gap: 12px; }
.nights_wrap .nights_colo_row { display: grid; grid-template-columns: 8em 1fr; gap: 18px; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(18, 16, 16, 0.2); }
.nights_wrap .nights_colo_dd { margin: 0; font: 400 17px/1.5 var(--nights-naskh); }

/* ---- tablet ---- */
@media (max-width: 1100px) and (orientation: portrait) {
  .nights_wrap .nights_wall_credit { display: none; }
  .nights_wrap .nights_head { max-width: 46vw; }
  .nights_wrap .nights_part.is-house .nights_stage { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: 24px; }
  .nights_wrap .nights_head.is-house { grid-column: 1 / -1; }
  .nights_wrap .nights_card_stage { grid-column: 1; grid-row: 2; }
  .nights_wrap .nights_card { height: min(44vh, 460px); }
  .nights_wrap .nights_djinn { grid-column: 2; grid-row: 2; }
  .nights_wrap .nights_rail_wrap { grid-row: 3; }
  .nights_wrap .nights_house_credit { grid-row: 4; }
}
/* landscape: the covers fan out to the right and down, so the count stands in the clear top right */
@media (min-width: 768px) and (orientation: landscape) {
  .nights_wrap .nights_tower_now { top: calc(var(--nights-top) + 40px); bottom: auto; }
}
/* a landscape tablet keeps the desktop's three columns, tightened */
@media (max-width: 1100px) and (orientation: landscape) {
  .nights_wrap .nights_head { max-width: 36vw; }
  .nights_wrap .nights_title { font-size: clamp(30px, 3.6vw, 40px); }
  .nights_wrap .nights_part.is-house .nights_stage { column-gap: 24px; }
  .nights_wrap .nights_card { height: min(48vh, 420px); }
  .nights_wrap .nights_djinn_name { font-size: 42px; margin: 10px 0 14px; }
  .nights_wrap .nights_djinn_dd { font-size: 16px; }
  .nights_wrap .nights_djinn_row { grid-template-columns: 4.6em 1fr; gap: 10px; }
  .nights_wrap .nights_tower { left: 68%; }
}
@media (max-width: 1100px) {
  /* the collage becomes a column: the name, the years, then the art stepping left and right; nothing can overlap */
  .nights_wrap .nights_maker { display: flex; flex-direction: column; min-height: 0; padding-bottom: 14vh; }
  .nights_wrap .nights_years, .nights_wrap .nights_maker .nights_col, .nights_wrap .nights_maker_credit { position: relative; inset: auto; }
  .nights_wrap .nights_years { order: 1; width: min(34rem, 100%); margin-top: 7vh; }
  .nights_wrap .nights_col { order: 2; margin-top: 9vh; }
  .nights_wrap .nights_col.is-a, .nights_wrap .nights_col.is-c, .nights_wrap .nights_col.is-e { align-self: flex-end; }
  .nights_wrap .nights_col.is-a { width: min(58vw, 520px); }
  .nights_wrap .nights_col.is-b { width: min(52vw, 460px); }
  .nights_wrap .nights_col.is-c { width: min(34vw, 300px); margin-right: 8vw; }
  .nights_wrap .nights_col.is-d { width: min(56vw, 500px); }
  .nights_wrap .nights_col.is-e { width: min(30vw, 260px); margin-right: 14vw; }
  .nights_wrap .nights_maker_credit { order: 3; margin-top: 8vh; }
}
/* ---- phone: designed, not shrunk ---- */
@media (max-width: 767px) {
  .nights_wrap { --nights-col: 18px; --nights-top: 76px; }
  .nights_wrap .nights_vert { font-size: 34px; }
  .nights_wrap .nights_head { right: 16px; max-width: none; column-gap: 12px; }
  .nights_wrap .nights_title { font-size: 34px; }
  .nights_wrap .nights_body { font-size: 15px; }
  .nights_wrap .nights_head.is-wall .nights_body { display: none; }
  .nights_wrap .nights_arcs { right: 16px; bottom: 74px; }
  .nights_wrap .nights_zoom { right: 16px; bottom: 26px; }
  .nights_wrap .nights_wall_credit { display: none; }
  .nights_wrap .nights_wall_credit { left: 18px; right: 170px; bottom: 26px; text-align: left; font-size: 12px; }
  .nights_wrap .nights_reader { grid-template-columns: 1fr; justify-items: center; padding: 70px 20px 30px; align-content: start; overflow: auto; }
  .nights_wrap .nights_reader_img { width: min(62vw, 40vh * 0.7); }
  .nights_wrap .nights_part.is-house .nights_stage { height: auto; min-height: 100svh; grid-template-columns: 1fr; padding-bottom: 28px; }
  .nights_wrap .nights_card_stage { grid-column: 1; grid-row: 2; justify-self: center; }
  .nights_wrap .nights_card { height: min(46vh, 380px); }
  .nights_wrap .nights_djinn { grid-column: 1; grid-row: 3; max-width: none; }
  .nights_wrap .nights_djinn_name { font-size: 44px; margin: 10px 0 16px; }
  .nights_wrap .nights_djinn_dd { font-size: 16px; }
  .nights_wrap .nights_djinn_row { grid-template-columns: 5em 1fr; gap: 10px; }
  .nights_wrap .nights_rail_wrap { grid-row: 4; }
  .nights_wrap .nights_rail_key { display: none; }
  .nights_wrap .nights_house_credit { grid-row: 5; text-align: left; }
  .nights_wrap .nights_vol { left: -80px; top: -118px; width: 160px; height: 236px; }
  .nights_wrap .nights_tower { left: 50%; top: 60%; }
  .nights_wrap .nights_tower_scene { perspective-origin: 50% 50%; }
  .nights_wrap .nights_tower_now { right: 16px; bottom: 22px; }
  .nights_wrap .nights_tower_n { font-size: 72px; }
  .nights_wrap .nights_tower_credit { left: 18px; right: 168px; bottom: 26px; font-size: 12px; }
  .nights_wrap .nights_maker { padding: 12vh 18px 10vh; }
  .nights_wrap .nights_maker_name { font-size: clamp(56px, 16vw, 72px); }
  .nights_wrap .nights_maker_ja { right: 18px; top: 12vh; font-size: 40px; }
  .nights_wrap .nights_years { width: 100%; margin-top: 6vh; }
  .nights_wrap .nights_year_t { font-size: 17px; }
  .nights_wrap .nights_col { margin-top: 7vh; }
  .nights_wrap .nights_col.is-a { width: 86%; }
  .nights_wrap .nights_col.is-b { width: 74%; }
  .nights_wrap .nights_col.is-c { width: 52%; margin-right: 6%; }
  .nights_wrap .nights_col.is-d { width: 80%; }
  .nights_wrap .nights_col.is-e { width: 46%; margin-right: 10%; }
  .nights_wrap .nights_colo { width: calc(100% - 36px); padding: 72px 0 40px; }
  .nights_wrap .nights_colo_seal { width: 76px; height: 76px; margin-bottom: 18px; }
  .nights_wrap .nights_colo_h { margin-bottom: 22px; font-size: 40px; }
  .nights_wrap .nights_colo_row { grid-template-columns: 1fr; gap: 4px; }
  .nights_wrap .nights_colo_dd { font-size: 16px; line-height: 1.45; }
}
.nights_wrap .nights_nw { white-space: nowrap; }