/* Vivre Card: one pinned stage. The type is a Japanese book's: Shippori Mincho for what is said (each
   beat's canon title set vertically), Zen Kaku Gothic for the small things. The interface is paper:
   the progress is a vivre card burning down, the chapters are torn slips, the controls run down the
   edge like a book's margin notes. */
.vivre_wrap {
  --vc-paper: #f3eee4; --vc-paper-dim: rgba(243, 238, 228, .66); --vc-paper-faint: rgba(243, 238, 228, .34);
  --vc-ink: #0e0c0a; --vc-ember: #e8743b; --vc-slip: #ece4d3; --vc-slip-ink: #2a2118;
  --vc-g: clamp(16px, 2.2vw, 34px);
  --vc-mincho: 'VC Mincho', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --vc-gothic: 'VC Gothic', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  position: relative; background: var(--vc-ink); color: var(--vc-paper); font-family: var(--vc-gothic);
}
.vivre_wrap .vivre_contain { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.vivre_wrap .vivre_world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

/* ---- the spine, the margin notes ---- */
.vivre_wrap .vivre_spine {
  position: absolute; z-index: 5; left: var(--vc-g); top: 50%; translate: 0 -50%; margin: 0; writing-mode: vertical-rl;
  display: flex; gap: 14px; align-items: center; color: var(--vc-paper-dim); opacity: 0; transition: opacity 2s; pointer-events: none;
}
.vivre_wrap.is-in .vivre_spine { opacity: 1; }
.vivre_wrap .vivre_spine_jp { font-family: var(--vc-mincho); font-weight: 500; font-size: 14px; letter-spacing: .3em; color: var(--vc-paper); }
.vivre_wrap .vivre_spine_en { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; }
.vivre_wrap .vivre_side {
  position: absolute; z-index: 6; right: var(--vc-g); bottom: var(--vc-g); display: flex; flex-direction: column; gap: 22px; align-items: center;
  opacity: 0; transition: opacity 2s;
}
.vivre_wrap.is-in .vivre_side { opacity: 1; }
.vivre_wrap .vivre_side_btn {
  writing-mode: vertical-rl; display: flex; gap: 10px; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--vc-paper-dim); font: 500 10px/1 var(--vc-gothic); letter-spacing: .28em; text-transform: uppercase; transition: color .4s;
}
.vivre_wrap .vivre_side_btn:hover, .vivre_wrap .vivre_side_btn[aria-pressed="true"], .vivre_wrap .vivre_side_btn.is-raised { color: var(--vc-paper); }
.vivre_wrap .vivre_side_jp { font: 500 15px/1 var(--vc-mincho); letter-spacing: 0; color: var(--vc-paper); }
.vivre_wrap .vivre_gpu {
  position: absolute; right: 30px; bottom: 0; width: max-content; max-width: min(340px, 70vw); margin: 0; text-align: right;
  color: var(--vc-paper-dim); font-size: 11px; line-height: 1.6; opacity: 0; transition: opacity .4s; pointer-events: none;
}
.vivre_wrap .vivre_gpu.is-on { opacity: 1; }

/* ---- life: the card burning down as you read; the chapters as torn slips ---- */
.vivre_wrap .vivre_life { position: absolute; z-index: 7; left: var(--vc-g); bottom: var(--vc-g); opacity: 0; transition: opacity 1.6s; }
.vivre_wrap.is-in .vivre_life { opacity: 1; }
/* past the story (Hire has the screen): the margin notes go with it */
.vivre_wrap.is-past .vivre_spine, .vivre_wrap.is-past .vivre_side, .vivre_wrap.is-past .vivre_life,
.vivre_wrap.is-leaving .vivre_spine, .vivre_wrap.is-leaving .vivre_side, .vivre_wrap.is-leaving .vivre_life { opacity: 0; transition-duration: .6s; pointer-events: none; }
.vivre_wrap .vivre_life_card { display: flex; gap: 12px; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; color: var(--vc-paper); }
.vivre_wrap .vivre_life_card svg { width: 30px; height: 47px; overflow: visible; filter: drop-shadow(0 0 10px rgba(243, 238, 228, .12)); }
.vivre_wrap .vivre_life_now { font: 500 22px/1 var(--vc-mincho); }
.vivre_wrap .vivre_slips {
  position: absolute; left: 0; bottom: 64px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; width: max-content;
  opacity: 0; translate: 0 10px; transition: opacity .5s, translate .5s; pointer-events: none;
}
.vivre_wrap .vivre_life.is-open .vivre_slips { opacity: 1; translate: 0 0; pointer-events: auto; }
.vivre_wrap .vivre_slips li { transform-origin: left center; }
.vivre_wrap .vivre_slips li:nth-child(odd) { rotate: -.8deg; }
.vivre_wrap .vivre_slips li:nth-child(even) { rotate: .6deg; }
.vivre_wrap .vivre_slips a {
  display: flex; gap: 14px; align-items: baseline; padding: 9px 18px 9px 14px; text-decoration: none; color: var(--vc-slip-ink);
  background: var(--vc-slip); background-image: radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%);
  /* a torn right edge */
  clip-path: polygon(0 0, 94% 0, 96% 18%, 93% 34%, 97% 52%, 94% 70%, 98% 86%, 95% 100%, 0 100%);
  transition: translate .3s, background-color .3s;
}
.vivre_wrap .vivre_slips a:hover { translate: 6px 0; }
.vivre_wrap .vivre_slips a.is-here { background-color: #fff6e6; }
.vivre_wrap .vivre_slip_jp { font: 700 16px/1 var(--vc-mincho); }
.vivre_wrap .vivre_slip_en { padding-right: 22px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.vivre_wrap .vivre_life.is-fresh .vivre_life_card svg { animation: vivre-arrive 1.8s cubic-bezier(.2, .7, .2, 1); }
@keyframes vivre-arrive { from { translate: 60px -40px; rotate: 30deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }

/* ---- layers ---- */
.vivre_wrap .vivre_layers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vivre_wrap .vivre_layer { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
/* centring offsets (--tx/--ty) and the scroll parallax (--py, set by the script) compose in one translate */
.vivre_wrap .vivre_layer [data-depth] { translate: var(--tx, 0%) calc(var(--ty, 0%) + var(--py, 0px)); }
.vivre_wrap .vivre_word { display: inline-block; white-space: nowrap; }
.vivre_wrap .vivre_char { display: inline-block; }
.vivre_wrap [data-at] { opacity: 0; transform: translateY(8px); transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.vivre_wrap [data-at].is-on { opacity: 1; transform: none; }

/* each beat's canon title, vertical, at the right; its chapter at the top left by the spine */
.vivre_wrap .vivre_jp {
  position: absolute; right: calc(var(--vc-g) + 8px); top: 11vh; margin: 0; writing-mode: vertical-rl;
  /* as large as it can be and still end above the margin notes (--n: its length, set by vivre.js) */
  font: 700 min(clamp(48px, min(6vw, 10vh), 108px), calc((89vh - 360px) / (var(--n, 4) * 1.08)))/1 var(--vc-mincho); letter-spacing: .08em; color: var(--vc-paper);
  opacity: .92;
}
.vivre_wrap .vivre_chap {
  position: absolute; left: calc(var(--vc-g) + 48px); top: var(--vc-g); margin: 0; display: flex; gap: 14px; align-items: center;   /* centred: 一 is a bar at mid-height */ color: var(--vc-paper-dim);
}
.vivre_wrap .vivre_chap span:first-child { font: 500 26px/1 var(--vc-mincho); color: var(--vc-paper); }
.vivre_wrap .vivre_chap span:last-child { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }

.vivre_wrap .vivre_display {
  position: absolute; left: 0; right: 0; margin: 0; padding: 0 calc(var(--vc-g) + 96px); text-align: center;
  font: 500 clamp(34px, min(4.4vw, 7.6vh), 84px)/1.12 var(--vc-mincho); letter-spacing: -.005em; color: #fbf7ef;
}
.vivre_wrap .vivre_hint {
  position: absolute; left: 50%; --tx: -50%; bottom: calc(var(--vc-g) + 6px); margin: 0; white-space: nowrap;
  color: var(--vc-paper-dim); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
}
.vivre_wrap .vivre_hint.is-button { padding: 10px 0; border: 0; background: none; font-family: inherit; cursor: pointer; pointer-events: auto; }
.vivre_wrap .vivre_hint.is-button:not(.is-on) { pointer-events: none; }
.vivre_wrap .vivre_hint.is-button:hover, .vivre_wrap .vivre_hint.is-button:focus-visible { color: var(--vc-paper); }
.vivre_wrap .vivre_hint.is-button:focus-visible { outline: 1px solid var(--vc-ember); outline-offset: 4px; }
.vivre_wrap .vivre_hint::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 12px 1px 0; border-radius: 50%; background: var(--vc-ember); box-shadow: 0 0 10px var(--vc-ember); }
.vivre_wrap .vivre_cite { margin-left: 8px; color: var(--vc-paper-faint); font: 500 10px/1 var(--vc-gothic); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.vivre_wrap .vivre_note, .vivre_wrap .vivre_caption, .vivre_wrap .vivre_story_line, .vivre_wrap .vivre_facts, .vivre_wrap .vivre_whole {
  font: 400 clamp(16px, 1.25vw, 20px)/1.55 var(--vc-mincho); color: var(--vc-paper);
}

/* I: the card over the dunes: the words low and to the left, the card to the right */
.vivre_wrap .is-dunes .vivre_display { top: 73vh; }
.vivre_wrap .vivre_facts {
  position: absolute; left: calc(var(--vc-g) + 48px); top: 50%; --ty: -50%; width: min(250px, 20vw); margin: 0; padding: 0; list-style: none;
  display: grid; gap: 16px; counter-reset: fact;
}
.vivre_wrap .vivre_facts li { position: relative; padding-left: 26px; counter-increment: fact; }
.vivre_wrap .vivre_facts li::before { content: counter(fact, cjk-ideographic); position: absolute; left: 0; top: .1em; font-size: 12px; color: var(--vc-paper-dim); }
.vivre_wrap .is-dunes .vivre_note { position: absolute; left: calc(var(--vc-g) + 56px); bottom: calc(var(--vc-g) + 70px); width: min(260px, 22vw); margin: 0; color: var(--vc-paper-dim); }

/* II, brothers: the words low, the cups and the card above */
.vivre_wrap .is-brothers .vivre_display { bottom: calc(var(--vc-g) + 56px); }
.vivre_wrap .is-brothers .vivre_hint { bottom: auto; top: calc(var(--vc-g) + 6px); }
.vivre_wrap .vivre_caption { position: absolute; left: calc(var(--vc-g) + 56px); bottom: calc(var(--vc-g) + 86px); width: min(300px, 22vw); margin: 0; }
.vivre_wrap .vivre_names { position: absolute; left: calc(var(--vc-g) + 56px); bottom: calc(var(--vc-g) + 52px); display: flex; gap: 18px; margin: 0; color: var(--vc-paper-dim); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.vivre_wrap .vivre_names span { transition: color .5s, letter-spacing .8s cubic-bezier(.2, .7, .2, 1); }
.vivre_wrap .vivre_names span.is-lit { color: var(--vc-ember); letter-spacing: .42em; }

/* III and VI: one line of the story at a time, at the left */
.vivre_wrap .vivre_story { position: absolute; left: calc(var(--vc-g) + 56px); top: 50%; --ty: -50%; width: min(300px, 23vw); height: 9em; }
.vivre_wrap .vivre_story_line { position: absolute; inset: 0 0 auto; margin: 0; }
.vivre_wrap .is-life .vivre_hint, .vivre_wrap .is-will .vivre_hint, .vivre_wrap .is-ash .vivre_hint { bottom: auto; top: calc(var(--vc-g) + 6px); }
.vivre_wrap .vivre_credit { position: absolute; left: 50%; --tx: -50%; bottom: calc(var(--vc-g) + 6px); margin: 0; white-space: nowrap; color: var(--vc-paper-faint); font-size: 10px; letter-spacing: .06em; }
.vivre_wrap .vivre_whole { position: absolute; left: 50%; --tx: -50%; bottom: calc(var(--vc-g) + 6px); margin: 0; white-space: nowrap; color: var(--vc-paper-dim); }

/* V: the last words at the left, the grave at the right */
.vivre_wrap .vivre_last { position: absolute; left: calc(var(--vc-g) + 56px); top: 26vh; width: min(520px, 40vw); margin: 0; font-family: var(--vc-mincho); }
/* his last words: the Japanese he said, then the English, the quote marks hung outside the measure;
   no rule beside it (the framework's blockquote border is reset here) */
.vivre_wrap .vivre_last p { margin: 0; line-height: 1.12; }
.vivre_wrap .vivre_last_q { margin: 0; padding: 0; border: 0; quotes: '“' '”'; }
.vivre_wrap .vivre_last_jp { margin: 0 0 22px !important; font: 500 15px/1 var(--vc-mincho); letter-spacing: .32em; color: var(--vc-ember); }
.vivre_wrap .vivre_last_a { position: relative; font: 400 clamp(26px, min(2.6vw, 4.6vh), 46px)/1.2 var(--vc-mincho); color: var(--vc-paper-dim); }
.vivre_wrap .vivre_last_a::before { content: open-quote; position: absolute; right: 100%; padding-right: .08em; }
.vivre_wrap .vivre_last_b { margin-top: .4em !important; font: 500 clamp(40px, min(5vw, 8.8vh), 96px)/1.05 var(--vc-mincho); letter-spacing: -.01em; }
.vivre_wrap .vivre_last_b::after { content: close-quote; }
.vivre_wrap .vivre_last_by { margin-top: 26px; font: 500 10px/1 var(--vc-gothic); letter-spacing: .26em; text-transform: uppercase; color: var(--vc-paper-faint); }
.vivre_wrap .is-ash .vivre_note { position: absolute; left: calc(var(--vc-g) + 56px); bottom: calc(var(--vc-g) + 70px); width: min(320px, 26vw); margin: 0; color: var(--vc-paper-dim); }

/* ---- the loader: a count and a line over the world's own card ---- */
.vivre_wrap .vivre_loader { position: absolute; inset: 0; z-index: 10; pointer-events: none; transition: opacity 1.6s, visibility 1.6s; }
.vivre_wrap .vivre_loader.is-gone { opacity: 0; visibility: hidden; }
.vivre_wrap .vivre_loader_count { position: absolute; left: var(--vc-g); bottom: var(--vc-g); margin: 0; display: flex; gap: 14px; align-items: flex-end; color: var(--vc-paper-dim); }
.vivre_wrap .vivre_loader_count [data-loader-num] { font: 500 clamp(34px, 3.4vw, 56px)/.8 var(--vc-mincho); letter-spacing: .02em; color: var(--vc-paper); font-variant-numeric: tabular-nums; }
.vivre_wrap .vivre_loader_jp { writing-mode: vertical-rl; font: 500 12px/1 var(--vc-mincho); letter-spacing: .4em; }
.vivre_wrap .vivre_loader_line { position: absolute; left: 0; right: 0; top: 74vh; margin: 0; text-align: center; font: 500 10px/1 var(--vc-gothic); letter-spacing: .32em; text-transform: uppercase; color: var(--vc-paper-faint); }
.vivre_wrap .vivre_loader_enter { position: absolute; left: 0; right: 0; top: calc(74vh + 36px); display: flex; justify-content: center; gap: 12px; opacity: 0; transition: opacity 1s; }
.vivre_wrap .vivre_loader.is-done .vivre_loader_enter { opacity: 1; pointer-events: auto; }
.vivre_wrap .vivre_loader_btn {
  padding: 11px 26px 11px 20px; border: 0; cursor: pointer; color: var(--vc-slip-ink); background: var(--vc-slip);
  font: 500 10px/1 var(--vc-gothic); letter-spacing: .26em; text-transform: uppercase;
  clip-path: polygon(0 0, 95% 0, 97% 22%, 94% 46%, 98% 70%, 95% 100%, 0 100%); transition: translate .3s;
}
.vivre_wrap .vivre_loader_btn:hover { translate: 0 -2px; }
.vivre_wrap .vivre_loader_btn.is-quiet { background: transparent; color: var(--vc-paper-dim); }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .vivre_wrap .vivre_facts, .vivre_wrap .vivre_story, .vivre_wrap .vivre_caption { width: 220px; }
}
/* ---- portrait: words above and below the subject; the titles smaller, top right ---- */
@media (max-aspect-ratio: 1/1) {
  .vivre_wrap .vivre_spine { display: none; }
  .vivre_wrap .vivre_jp { top: calc(var(--vc-g) + 40px); font-size: min(clamp(30px, 8vw, 54px), calc((100vh - 400px) / (var(--n, 4) * 1.08))); }
  .vivre_wrap .vivre_chap { left: var(--vc-g); }
  .vivre_wrap .vivre_display { padding: 0 calc(var(--vc-g) + 64px) 0 var(--vc-g); text-align: left; }
  .vivre_wrap .is-dunes .vivre_display { top: 14vh; }
  /* one fact at a time on a phone, each replacing the last, then the note in their place */
  .vivre_wrap .vivre_facts { left: var(--vc-g); right: calc(var(--vc-g) + 40px); top: auto; bottom: calc(var(--vc-g) + 64px); --ty: 0%; width: auto; height: 4.8em; }
  .vivre_wrap .vivre_facts li { position: absolute; left: 0; right: 0; bottom: 0; }
  .vivre_wrap .vivre_facts li.is-on:has(~ li.is-on), .vivre_wrap .is-dunes:has(.vivre_note.is-on) .vivre_facts li { opacity: 0; }
  .vivre_wrap .is-dunes .vivre_note { left: var(--vc-g); right: calc(var(--vc-g) + 40px); width: auto; bottom: calc(var(--vc-g) + 64px); }
  /* the title can take two lines on a narrow phone: its hint sits under both, and no hint runs under the vertical title */
  .vivre_wrap .vivre_hint { white-space: normal; max-width: calc(100% - 2 * var(--vc-g) - 84px); }
  .vivre_wrap .is-ash::before { content: ''; position: absolute; inset: 0 0 auto; height: 58%; pointer-events: none;
    background: linear-gradient(rgba(13, 11, 10, .72), rgba(13, 11, 10, .42) 55%, transparent); }
  .vivre_wrap .is-ash::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none; background: linear-gradient(transparent, rgba(13, 11, 10, .62)); }
  /* his full name is long: on a phone it stops above the hat */
  .vivre_wrap .is-ash .vivre_jp { font-size: min(clamp(30px, 8vw, 54px), calc(30vh / (var(--n, 4) * 1.08))); }
  .vivre_wrap .is-dunes .vivre_hint { bottom: auto; top: calc(14vh + clamp(34px, min(4.4vw, 7.6vh), 84px) * 2.24 + 8px); left: var(--vc-g); --tx: 0%; }
  .vivre_wrap .is-brothers .vivre_display { top: 14vh; bottom: auto; }
  .vivre_wrap .is-brothers .vivre_hint { top: calc(14vh + 60px); left: var(--vc-g); --tx: 0%; }
  .vivre_wrap .vivre_caption { left: var(--vc-g); right: calc(var(--vc-g) + 40px); width: auto; bottom: calc(var(--vc-g) + 96px); }
  .vivre_wrap .vivre_names { left: var(--vc-g); bottom: calc(var(--vc-g) + 64px); }
  .vivre_wrap .vivre_story { left: var(--vc-g); right: calc(var(--vc-g) + 40px); top: auto; bottom: calc(var(--vc-g) + 92px); --ty: 0%; width: auto; height: 5.8em; }
  .vivre_wrap .is-life .vivre_hint, .vivre_wrap .is-will .vivre_hint, .vivre_wrap .is-ash .vivre_hint { top: calc(var(--vc-g) + 52px); left: var(--vc-g); --tx: 0%; }
  .vivre_wrap .vivre_credit { left: var(--vc-g); right: calc(var(--vc-g) + 40px); --tx: 0%; bottom: calc(var(--vc-g) + 64px); white-space: normal; }
  .vivre_wrap .vivre_whole { left: var(--vc-g); right: calc(var(--vc-g) + 40px); --tx: 0%; bottom: calc(var(--vc-g) + 64px); white-space: normal; }
  .vivre_wrap .vivre_last { left: var(--vc-g); right: calc(var(--vc-g) + 64px); top: max(12vh, calc(var(--vc-g) + 116px)); width: auto; }
  .vivre_wrap .is-ash .vivre_note { left: var(--vc-g); right: calc(var(--vc-g) + 40px); width: auto; bottom: calc(var(--vc-g) + 64px); }
  .vivre_wrap .vivre_loader_line { top: 70vh; }
  .vivre_wrap .vivre_loader_enter { top: calc(70vh + 32px); flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vivre_wrap [data-at] { transition: opacity .3s; transform: none; }
}
/* the other worlds still compiling when the reader reaches the end of beat I: a word, not a spinner */
.vivre_wrap::after {
  content: 'The paper is finding its way…'; position: absolute; z-index: 30; left: 50%; bottom: calc(var(--vc-g) + 34px); translate: -50% 8px;
  font: 500 10px/1 var(--vc-gothic); letter-spacing: .26em; text-transform: uppercase; color: var(--vc-paper-dim);
  opacity: 0; transition: opacity .6s, translate .6s; pointer-events: none;
}
.vivre_wrap.is-waiting::after { opacity: 1; translate: -50% 0; }

/* the editor's canvas (scene/canvas.js): each chapter as a labelled still of the live page, sized in px */
.vivre_wrap.is-canvas { position: relative !important; height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; visibility: visible !important; background: #0d0b0a; }
.vivre_wrap.is-canvas .vivre_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; visibility: visible !important; }
.vivre_wrap.is-canvas > :not(.vivre_contain), .vivre_wrap.is-canvas .vivre_contain > :not(.vivre_still) { display: none !important; }
.vivre_wrap .vivre_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); }
.vivre_wrap .vivre_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) { .vivre_wrap .vivre_still { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }