/* HIDEO: another channel. Black glass, a green on-screen display, ink. It arrives as a hard cut over
   Mantis (the television switching input), and everything inside it changes the same way: a cut and
   a few frames of static, never a fade. Set in Geist alone. */
.hideo_wrap {
  --hi-ink: #ece7dd; --hi-dim: rgba(236, 231, 221, .56); --hi-faint: rgba(236, 231, 221, .14); --hi-osd: #2fe35a; --hi-amber: #ff9a45;
  --hi-sans: 'MGS Geist', 'Helvetica Neue', Arial, sans-serif; --hi-mono: 'MGS Geist Mono', ui-monospace, monospace;
  --hi-jp: 'MGS Mincho', 'Yu Mincho', serif; --hi-gutter: clamp(16px, 2.4vw, 36px); --hi-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; z-index: 3; margin-top: -100vh; height: 1600vh; color: var(--hi-ink); font-family: var(--hi-sans); font-weight: 300;
}
.hideo_wrap .hideo_contain { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; opacity: var(--cut, 0); transform: translate3d(0, var(--hold, 0px), 0); }
/* the television's own raster over everything on this channel */
.hideo_wrap .hideo_contain::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px); }
.hideo_wrap .hideo_osd { position: absolute; z-index: 10; top: 7vh; right: 8vw; margin: 0; font-family: 'MGS VT323', ui-monospace, monospace; font-size: clamp(30px, 3.4vw, 50px);
  letter-spacing: .06em; color: var(--hi-osd); text-shadow: 0 0 8px rgba(47, 227, 90, .55); }
.hideo_wrap .hideo_ink { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hideo_wrap .hideo_label { margin: 0; font-family: var(--hi-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hi-dim); }
.hideo_wrap .hideo_kicker { margin: 0; font-size: 15px; color: var(--hi-dim); }
.hideo_wrap .hideo_credit { margin: 10px 0 0; font-family: var(--hi-mono); font-size: 9px; letter-spacing: .08em; color: rgba(236, 231, 221, .38); }

.hideo_wrap .hideo_part { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; }

/* the names: a film's opening card */
.hideo_wrap .hideo_open { display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--hi-gutter); }
.hideo_wrap .hideo_jp { margin: 0; font-family: var(--hi-jp); font-weight: 500; font-size: 15px; letter-spacing: .5em; color: var(--hi-dim); }
.hideo_wrap .hideo_jp span { margin-left: 2.4em; }
.hideo_wrap .hideo_names { display: grid; justify-items: center; gap: .02em; margin: 0; font-weight: 300; font-size: clamp(46px, min(6.6vw, 11vh), 120px); line-height: .96; letter-spacing: -.05em; }
.hideo_wrap .hideo_names em { font-family: var(--hi-mono); font-style: normal; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--hi-dim); padding: 1.4em 0 1.2em; margin-right: -.4em; }
.hideo_wrap .hideo_sub { margin: 6px 0 0; font-size: 15px; letter-spacing: .02em; color: var(--hi-dim); }

/* the memory card: the blocks on the left, the save on the right */
.hideo_wrap .hideo_card { display: grid; grid-template-columns: minmax(260px, 24vw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 4.5vw; padding: 16vh 6vw 8vh; }
.hideo_wrap .hideo_card_head { grid-column: 1 / 2; display: flex; justify-content: space-between; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--hi-faint); }
.hideo_wrap .hideo_blocks { grid-column: 1 / 2; align-self: start; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.hideo_wrap .hideo_blocks li { position: relative; aspect-ratio: 1.25; display: grid; align-content: space-between; padding: 8px 9px; border: 1px solid var(--hi-faint);
  font-family: var(--hi-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 231, 221, .3); cursor: pointer; transition: border-color .4s, color .4s, background .4s; }
.hideo_wrap .hideo_blocks li b { font-family: var(--hi-sans); font-weight: 300; font-size: clamp(15px, 1.4vw, 22px); letter-spacing: .02em; color: inherit; }
.hideo_wrap .hideo_blocks li.is-save { color: var(--hi-dim); }
.hideo_wrap .hideo_blocks li.is-save:hover { border-color: var(--hi-dim); }
.hideo_wrap .hideo_blocks li.is-now { border-color: var(--hi-ink); color: var(--hi-ink); background: rgba(236, 231, 221, .06); }
.hideo_wrap .hideo_blocks li.is-now::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--hi-amber); transform-origin: left; animation: hideo-load .9s var(--hi-out) both; }
@keyframes hideo-load { from { transform: scaleX(0); } }
.hideo_wrap .hideo_view { grid-column: 2 / 3; grid-row: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 22px; margin: 0; min-height: 0; width: 100%; height: 100%; }
.hideo_wrap .hideo_frame { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #050505; }
.hideo_wrap .hideo_frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.03); transition: transform 1.6s var(--hi-out); filter: contrast(1.04); }
.hideo_wrap .hideo_frame img.is-on { opacity: 1; transform: none; }
/* every save in one ink; screens from 1987 and 1998 at their own pixels, scaled whole */
.hideo_wrap .hideo_frame img { filter: grayscale(1) contrast(1.05); }
.hideo_wrap .hideo_frame img.is-pixel { image-rendering: pixelated; }
.hideo_wrap .hideo_frame.is-brush img { opacity: 0 !important; }
/* a save without a picture: its name, set large in the frame */
.hideo_wrap .hideo_frame:not([data-empty=""])::after { content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center;
  font-weight: 300; font-size: clamp(30px, 3.6vw, 64px); line-height: 1.02; letter-spacing: -.045em; color: var(--hi-ink); border: 1px solid var(--hi-faint); }
.hideo_wrap .hideo_brush { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
/* the brush save: the frame is paper, and strokes lay Shinkawa's ink down on it */
.hideo_wrap .hideo_frame.is-brush { background: #e8e3d8; }
.hideo_wrap .hideo_frame.is-brush .hideo_brush { opacity: 1; cursor: crosshair; mix-blend-mode: multiply; }
.hideo_wrap .hideo_cap { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start; }
.hideo_wrap .hideo_year { grid-row: 1 / 4; margin: 0; font-weight: 300; font-size: clamp(42px, 4vw, 72px); line-height: .86; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hideo_wrap .hideo_head { margin: 4px 0 0; font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.hideo_wrap .hideo_text { max-width: 54ch; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--hi-dim); }
.hideo_wrap .hideo_cap .hideo_credit { grid-column: 2 / 3; }

/* the game: the 1998 advertisement on the left, four facts on the right, each figure counting up */
.hideo_wrap .hideo_game { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: 6vw; align-items: center; padding: 12vh 8vw 10vh; }
.hideo_wrap .hideo_ad { margin: 0; height: 100%; max-height: 76vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; justify-items: center; }
.hideo_wrap .hideo_ad_frame { position: relative; height: 100%; aspect-ratio: 1177 / 1400; max-width: 100%; overflow: hidden; clip-path: inset(var(--wipe, 100%) 0 0 0); }
.hideo_wrap .hideo_ad_frame img { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; transform: translate3d(0, var(--drift, 0px), 0); }
.hideo_wrap .hideo_game_title { margin: 10px 0 0; font-weight: 300; font-size: clamp(40px, min(4.4vw, 8vh), 84px); line-height: .95; letter-spacing: -.05em; }
.hideo_wrap .hideo_facts { margin: 5vh 0 2vh; padding: 0; list-style: none; display: grid; gap: 2.6vh; }
.hideo_wrap .hideo_facts li { display: grid; grid-template-columns: minmax(9.5ch, auto) 1fr; column-gap: 26px; align-items: baseline; padding-top: 2.2vh; border-top: 1px solid var(--hi-faint);
  opacity: var(--in, 0); transform: translate3d(0, calc((1 - var(--in, 0)) * 14px), 0); }
.hideo_wrap .hideo_facts b { font-weight: 300; font-size: clamp(28px, 2.6vw, 44px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hideo_wrap .hideo_facts p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--hi-dim); }
.hideo_wrap .hideo_facts em { font-style: normal; color: var(--hi-ink); }

/* the series: the covers on a track that the scroll pulls across, the year rolling with it */
.hideo_wrap .hideo_series { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 6vw; padding: 12vh 8vw 8vh; }
.hideo_wrap .hideo_series_head { grid-column: 1 / 2; max-width: 34em; }
.hideo_wrap .hideo_series_quote { margin: 12px 0 10px; padding: 0; border: 0; font-weight: 300; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.18; letter-spacing: -.03em; }
.hideo_wrap .hideo_bigyear { grid-column: 1 / 2; grid-row: 2 / 3; align-self: end; overflow: hidden; height: 1em; font-weight: 300; font-size: clamp(110px, min(14vw, 26vh), 260px); line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.hideo_wrap .hideo_bigyear span { display: block; transform: translate3d(0, var(--roll, 0%), 0); }
.hideo_wrap .hideo_deck { grid-column: 2 / 3; grid-row: 1 / 4; position: relative; perspective: 1400px; }
.hideo_wrap .hideo_cover { position: absolute; left: 50%; top: 50%; width: min(26vw, 46vh); aspect-ratio: 7 / 10; margin: calc(min(26vw, 46vh) * -0.714) 0 0 calc(min(26vw, 46vh) / -2); background: #0b0b0b;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6); transform-origin: 50% 50%; will-change: transform, opacity; }
.hideo_wrap .hideo_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hideo_wrap .hideo_cover.is-wide { aspect-ratio: 16 / 9; width: min(36vw, 64vh); margin: calc(min(36vw, 64vh) * -0.28125) 0 0 calc(min(36vw, 64vh) / -2); }
.hideo_wrap .hideo_series_cap { grid-column: 1 / 2; grid-row: 3 / 4; padding-top: 18px; border-top: 1px solid var(--hi-faint); }
.hideo_wrap .hideo_series_title { margin: 0; font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -.035em; line-height: 1.1; }
.hideo_wrap .hideo_series_meta { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--hi-dim); }

/* the close: the programme's last shot, full frame, with his line as the broadcast's lower third */
.hideo_wrap .hideo_photo { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #000; }
.hideo_wrap .hideo_photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform: scale(var(--push, 1)); filter: contrast(1.06) brightness(.92); }
.hideo_wrap .hideo_photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0, rgba(0, 0, 0, .55) 24%, rgba(0, 0, 0, 0) 52%); }
.hideo_wrap .hideo_lower { position: absolute; left: 6vw; right: 6vw; bottom: 8vh; max-width: 1040px; }
.hideo_wrap .hideo_lower > * { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .9s var(--hi-out); }
.hideo_wrap .hideo_close.is-live .hideo_lower > * { opacity: 1; transform: none; }
.hideo_wrap .hideo_close.is-live .hideo_lower > :nth-child(2) { transition-delay: .35s; }
.hideo_wrap .hideo_close.is-live .hideo_lower > :nth-child(3) { transition-delay: .5s; }
.hideo_wrap .hideo_quote { position: relative; margin: 0 0 20px; padding: 0; border: 0; font-weight: 300; font-size: clamp(30px, min(4.2vw, 7.6vh), 76px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.hideo_wrap .hideo_quote::before { content: '“'; position: absolute; right: 100%; top: 0; }
.hideo_wrap .hideo_quote::after { content: '”'; }

@media (max-width: 900px) {
  .hideo_wrap .hideo_game { grid-template-columns: 1fr; grid-template-rows: 22vh auto; row-gap: 2.4vh; padding: 11vh var(--hi-gutter) 3vh; align-content: start; }
  .hideo_wrap .hideo_ad { max-height: 22vh; justify-items: start; }
  .hideo_wrap .hideo_game_text > .hideo_credit { display: none; }
  .hideo_wrap .hideo_game_title { font-size: 34px; margin-top: 4px; }
  .hideo_wrap .hideo_facts { margin: 1.8vh 0 0; gap: 1.1vh; }
  .hideo_wrap .hideo_facts li { grid-template-columns: 1fr; padding-top: 1.2vh; }
  .hideo_wrap .hideo_facts b { font-size: 24px; }
  .hideo_wrap .hideo_facts p { font-size: 13px; }
  .hideo_wrap .hideo_series { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 12vh var(--hi-gutter) 5vh; }
  .hideo_wrap .hideo_series_head, .hideo_wrap .hideo_bigyear, .hideo_wrap .hideo_series_cap, .hideo_wrap .hideo_deck { grid-column: 1 / 2; }
  .hideo_wrap .hideo_series_quote { font-size: 20px; }
  .hideo_wrap .hideo_deck { grid-row: 2 / 3; min-height: 34vh; }
  .hideo_wrap .hideo_cover { width: min(44vw, 30vh); margin: calc(min(44vw, 30vh) * -0.714) 0 0 calc(min(44vw, 30vh) / -2); }
  .hideo_wrap .hideo_cover.is-wide { width: min(80vw, 46vh); margin: calc(min(80vw, 46vh) * -0.28125) 0 0 calc(min(80vw, 46vh) / -2); }
  .hideo_wrap .hideo_bigyear { grid-row: 3 / 4; font-size: min(26vw, 13vh); align-self: start; }
  .hideo_wrap .hideo_series_cap { grid-row: 4 / 5; padding-top: 12px; }
  .hideo_wrap .hideo_series_meta { font-size: 13px; }
  .hideo_wrap .hideo_card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding: 14vh var(--hi-gutter) 6vh; row-gap: 0; }
  .hideo_wrap .hideo_blocks { grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
  .hideo_wrap .hideo_blocks li { aspect-ratio: 1; padding: 4px; font-size: 7px; }
  .hideo_wrap .hideo_blocks li b { font-size: 11px; }
  .hideo_wrap .hideo_blocks li span { display: none; }
  .hideo_wrap .hideo_view { grid-column: 1 / 2; grid-row: 3 / 4; margin-top: 18px; gap: 14px; }
  .hideo_wrap .hideo_cap { grid-template-columns: 1fr; }
  .hideo_wrap .hideo_cap .hideo_credit { grid-column: auto; }
  .hideo_wrap .hideo_view { grid-template-rows: 30vh auto; }
  .hideo_wrap .hideo_year { grid-row: auto; font-size: 38px; }
  .hideo_wrap .hideo_text { font-size: 13.5px; }
  .hideo_wrap .hideo_photo img { object-position: 56% 30%; }
  .hideo_wrap .hideo_lower { left: calc(var(--hi-gutter) + 10px); right: var(--hi-gutter); bottom: 7vh; }
  .hideo_wrap .hideo_quote { font-size: min(9vw, 5.4vh); }
}

/* the editor's canvas (stage.js canvasPosters): each chapter as a still of the live page, in px; the stills of the
   block are one strip (desktop 16:10, phone 390:844), each figure showing its own slice */
.hideo_wrap.is-canvas { margin-top: 0; height: auto; background: #06080a; }
.hideo_wrap.is-canvas .hideo_contain { position: relative; top: auto; height: auto; overflow: visible; opacity: 1; transform: none; background: none; }
.hideo_wrap.is-canvas .hideo_contain > :not(.hideo_poster) { display: none !important; }
.hideo_wrap .hideo_poster { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(233, 227, 216, .14); }
.hideo_wrap .hideo_poster figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #e9e3d8; background: rgba(6, 8, 10, .72); }
@media (max-width: 767px) { .hideo_wrap .hideo_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }