/* How it all started: a short film in eight chapters. The story is the hero.
   Every chapter has its own mood (colours of the fixed backdrop change with the chapter), the language stays one.
   Phone first: one column, big type, swipe strips, the chapter bar on top. */
body.tb-page { --tb-ink: #120c1f; --tb-paper: #fbf5e6; --tb-a: #ffd27a; --tb-b: #7c4dff; --tb-bg1: #2a1840; --tb-bg2: #120c1f; background: #120c1f; }
body.tb-page main { position: relative; isolation: isolate; overflow: clip; }
body.tb-page .page-photo { display: none; }
.tb-back { position: fixed; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 30%, var(--tb-bg1), var(--tb-bg2) 78%); transition: --tb-bg1 1.2s, --tb-bg2 1.2s; }
@property --tb-bg1 { syntax: '<color>'; inherits: true; initial-value: #2a1840; }
@property --tb-bg2 { syntax: '<color>'; inherits: true; initial-value: #120c1f; }
@property --tb-a { syntax: '<color>'; inherits: true; initial-value: #ffd27a; }
body.tb-page { transition: --tb-bg1 1.2s, --tb-bg2 1.2s, --tb-a 1.2s; }
body[data-tb-mood="home"] { --tb-bg1: #4a2a1a; --tb-bg2: #1c0f0a; --tb-a: #ffc27a; }
body[data-tb-mood="river"] { --tb-bg1: #1f4f4a; --tb-bg2: #0a1f22; --tb-a: #a8f0c8; }
body[data-tb-mood="idea"] { --tb-bg1: #2b3a78; --tb-bg2: #0e1230; --tb-a: #8fc1ff; }
body[data-tb-mood="street"] { --tb-bg1: #5a3a1e; --tb-bg2: #24160c; --tb-a: #ffd488; }
body[data-tb-mood="grow"] { --tb-bg1: #4a2466; --tb-bg2: #170a24; --tb-a: #e7a6ff; }
body[data-tb-mood="drama"] { --tb-bg1: #4a1420; --tb-bg2: #0e0508; --tb-a: #ff8a7a; }
body[data-tb-mood="big"] { --tb-bg1: #6a3a10; --tb-bg2: #1f0f05; --tb-a: #ffd700; }
body[data-tb-mood="open"] { --tb-bg1: #3a2a8a; --tb-bg2: #120c2e; --tb-a: #c9b8ff; }

.tb-ph { position: relative; display: block; padding: 0; border: 0; margin: 0; overflow: hidden; background: #241a30; cursor: zoom-in; border-radius: 8px; aspect-ratio: var(--ar); }
.tb-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-out, ease); }
.tb-ph:hover img, .tb-ph:focus-visible img { scale: 1.04; }
.tb-ph:focus-visible { outline: 3px solid var(--tb-a); outline-offset: 4px; }
.tb-cap { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 2px 12px; font-family: var(--font-hand); font-weight: 700; color: var(--tb-ink); background: var(--tb-paper); rotate: -1.5deg; }
.tb-date { margin: 0 0 8px; font-weight: 800; letter-spacing: 0.04em; color: var(--tb-a); }

/* hero */
.tb-hero { position: relative; min-height: min(100svh, 940px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.tb-hero-photo { position: absolute; inset: 0; z-index: -2; background: var(--img) var(--pos) / cover no-repeat; animation: tb-breathe 30s ease-in-out infinite alternate; }
@keyframes tb-breathe { from { scale: 1.02; } to { scale: 1.1; } }
.tb-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 12, 31, 0.6) 0%, rgba(18, 12, 31, 0.05) 26%, rgba(18, 12, 31, 0.25) 50%, rgba(18, 12, 31, 0.9) 84%, #120c1f 100%); }
.tb-hero-in { padding-block: 120px clamp(34px, 6vh, 70px); display: grid; justify-items: start; gap: 10px; }
.tb-kicker { margin: 0; padding: 3px 14px; font-weight: 800; color: var(--tb-ink); background: var(--tb-a); rotate: -1.5deg; animation: tb-rise 0.9s var(--ease-out, ease) both; }
.tb-title { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(3rem, 11vw, 9rem); line-height: 0.95; letter-spacing: -0.02em; color: #fff; text-shadow: 5px 5px 0 var(--tb-b), 0 12px 40px rgba(0, 0, 0, 0.8); }
.tb-title span { display: inline-block; animation: tb-rise 0.9s var(--ease-out, ease) both; animation-delay: calc(var(--i) * 140ms + 150ms); }
.tb-hero-line { margin: 0; max-width: 34ch; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.45; font-weight: 500; color: #fff; text-shadow: 0 2px 18px #000; animation: tb-rise 1s 0.7s var(--ease-out, ease) both; }
@keyframes tb-rise { from { opacity: 0; translate: 0 26px; } }
.tb-scroll { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 800; color: var(--tb-a); text-decoration: none; }
.tb-scroll svg { width: 20px; height: 20px; rotate: -90deg; animation: tb-nudge 1.8s ease-in-out infinite; }
@keyframes tb-nudge { 50% { translate: 0 6px; } }

/* the chapter rail */
.tb-rail { position: fixed; z-index: 80; inset-inline-start: 14px; top: 50%; translate: -100px -50%; opacity: 0; transition: translate 0.6s var(--ease-out, ease), opacity 0.4s; }
.tb-rail.show { translate: 0 -50%; opacity: 1; } .tb-rail.away { translate: -100px -50%; opacity: 0; pointer-events: none; }
.tb-bar, .tb-now { display: none; }
.tb-dots { display: grid; gap: 4px; padding: 8px 6px; border-radius: 999px; background: rgba(18, 12, 31, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 20px 40px -18px #000; backdrop-filter: blur(10px); }
.tb-dots a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; color: #cfc6ea; font-weight: 800; transition: background 0.3s, color 0.3s, scale 0.3s var(--ease-spring, ease); }
.tb-dots a.done { color: var(--tb-a); }
.tb-dots a.on { background: var(--tb-a); color: var(--tb-ink); scale: 1.14; box-shadow: 0 0 22px -2px var(--tb-a); }
.tb-dots a small { position: absolute; inset-inline-start: 50px; padding: 2px 12px; border-radius: 999px; font-size: 0.85rem; color: var(--tb-ink); background: var(--tb-a); opacity: 0; translate: -8px 0; transition: opacity 0.3s, translate 0.3s; pointer-events: none; white-space: nowrap; }
.tb-dots a:hover small, .tb-dots a:focus-visible small { opacity: 1; translate: 0 0; }
.tb-dots a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* a chapter */
.tb-ch { position: relative; padding: clamp(60px, 9vw, 150px) 0 clamp(30px, 5vw, 80px); isolation: isolate; scroll-margin-top: 60px; }
.tb-bignum { position: absolute; z-index: -1; inset-inline-end: -1vw; top: clamp(20px, 4vw, 60px); font-family: var(--font-hand); font-weight: 800; font-size: clamp(5rem, 19vw, 17rem); line-height: 0.85; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--tb-a) 45%, transparent); translate: 0 var(--dy, 0px); pointer-events: none; direction: ltr; }
.tb-ch-head { margin-bottom: clamp(20px, 3vw, 44px); opacity: 0; translate: 0 30px; transition: opacity 0.9s, translate 1.1s var(--ease-out, ease); }
.tb-ch-head.in { opacity: 1; translate: 0 0; }
.tb-ch-n { margin: 0 0 4px; display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; color: var(--tb-a); }
.tb-ch-n b { font-family: var(--font-hand); font-size: 2.2rem; line-height: 1; }
.tb-ch-head h2 { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); max-width: 16ch; }
.tb-ch-when { margin: 10px 0 0; font-weight: 700; font-size: 1.1rem; color: #fff; }
.tb-text { margin-block: clamp(18px, 3vw, 40px); opacity: 0; translate: 0 24px; transition: opacity 0.9s, translate 1.1s var(--ease-out, ease); }
.tb-text.in { opacity: 1; translate: 0 0; }
.tb-text p, .tb-scene-text p, .tb-steps div p, .tb-mem-rest p { margin: 0 0 14px; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.8; color: #f1ebff; max-width: 58ch; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.tb-text.narrow p { max-width: 46ch; margin-inline: auto; }
.tb-text.narrow { text-align: center; }

/* big words: a quote that takes the screen */
.tb-say { margin-block: clamp(30px, 6vw, 90px); padding-block: 0; border: 0; }
.tb-say p { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 4rem); line-height: 1.18; color: #fff; max-width: 22ch; opacity: 0; translate: 0 40px; transition: opacity 1s, translate 1.2s var(--ease-out, ease); text-wrap: balance; }
.tb-say p::before { content: '"'; color: var(--tb-a); } .tb-say p::after { content: '"'; color: var(--tb-a); }
.tb-say.in p { opacity: 1; translate: 0 0; }
.tb-say.center { text-align: center; } .tb-say.center p { margin-inline: auto; }
.tb-say.small p { font-size: clamp(1.5rem, 3vw, 2.5rem); max-width: 28ch; }
.tb-say cite { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-style: normal; color: #d9cff5; opacity: 0; transition: opacity 1s 0.5s; }
.tb-say.in cite { opacity: 1; }
.tb-say cite img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--tb-a); }
.tb-say cite span { display: grid; } .tb-say cite b { color: var(--tb-a); }

/* a scene: photos in layers, text beside */
.tb-scene { margin-block: clamp(20px, 4vw, 60px); }
.tb-scene-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.tb-scene.flip .tb-scene-text { order: 2; }
.tb-scene.lay-full .tb-scene-in { grid-template-columns: 1fr; }
.tb-shots { position: relative; padding-bottom: 8%; }
.tb-shots.n1 { padding-bottom: 0; }
.tb-shots .tb-ph { box-shadow: 0 50px 80px -40px #000; translate: 0 var(--dy, 0px); clip-path: inset(0 0 100% 0 round 8px); transition: clip-path 1.3s calc(var(--i) * 160ms) var(--ease-out, ease); }
.tb-scene.in .tb-shots .tb-ph { clip-path: inset(-30px round 8px); }
.tb-shots .s0 { width: 88%; margin-inline-start: auto; } .tb-shots.n1 .s0 { width: 100%; }
.tb-shots .s1, .tb-shots .s2 { position: absolute; border: 6px solid #fff; border-bottom-width: 22px; border-radius: 2px; }
.tb-shots .s1 { width: 40%; inset-inline-start: 0; bottom: 0; rotate: -4deg; z-index: 2; }
.tb-shots .s2 { width: 30%; inset-inline-end: 4%; bottom: 3%; rotate: 3deg; z-index: 3; }
.tb-scene.lay-full .tb-shots .s0 { width: 100%; aspect-ratio: 21 / 9; }
.tb-scene.lay-full .tb-scene-text { max-width: 60ch; }

/* artifacts: real pieces of 2017 */
.tb-arts { margin-block: clamp(24px, 4vw, 60px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.tb-arts.flip .tb-scene-text { order: 2; }
.tb-arts-in { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.4vw, 34px); flex-wrap: wrap; }
.tb-art { position: relative; margin: 0; flex: 0 1 clamp(200px, 24vw, 340px); padding: 10px 10px 8px; background: #fff; border-radius: 3px; box-shadow: 0 40px 60px -30px #000; rotate: var(--r); opacity: 0; translate: 0 -50px; scale: 1.12; transition: opacity 0.7s calc(var(--i) * 200ms), translate 0.9s calc(var(--i) * 200ms) var(--ease-spring, ease), scale 0.9s calc(var(--i) * 200ms) var(--ease-spring, ease), rotate 0.5s; }
.tb-art.in { opacity: 1; translate: 0 0; scale: 1; }
.tb-art:hover { rotate: 0deg; z-index: 3; }
.tb-art .tb-ph { border-radius: 2px; background: #eee; }
.tb-art figcaption { padding: 8px 4px 2px; font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: var(--tb-ink); text-align: center; }
.tb-tape { position: absolute; z-index: 3; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; rotate: -3deg; background: rgba(255, 236, 170, 0.8); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.tb-art.kind-chat { flex-basis: clamp(240px, 30vw, 420px); border-radius: 22px; padding: 14px; } .tb-art.kind-chat .tb-ph { border-radius: 12px; } .tb-art.kind-chat .tb-tape { display: none; }
.tb-art.kind-chat::before { content: ''; position: absolute; inset: -14px; z-index: -1; border-radius: 34px; background: var(--tb-a); opacity: 0.0; animation: tb-ring 2.6s ease-out infinite; }
@keyframes tb-ring { 0% { opacity: 0.5; scale: 0.96; } 100% { opacity: 0; scale: 1.08; } }

/* three steps of a countdown */
.tb-steps { list-style: none; margin-block: clamp(24px, 4vw, 60px); padding-inline: var(--gutter, 20px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.tb-steps li { position: relative; padding-top: 18px; border-top: 3px solid color-mix(in srgb, var(--tb-a) 60%, transparent); opacity: 0; translate: 0 30px; transition: opacity 0.8s calc(var(--i) * 200ms), translate 1s calc(var(--i) * 200ms) var(--ease-out, ease); }
.tb-steps li.in { opacity: 1; translate: 0 0; }
.tb-steps li::before { content: ''; position: absolute; top: -9px; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--tb-a); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tb-a) 30%, transparent); }
.tb-steps b { font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; color: var(--tb-a); }
.tb-steps h3 { margin: 6px 0 8px; font-weight: 800; font-size: 1.3rem; color: #fff; }
.tb-steps div p { font-size: 1.05rem; line-height: 1.7; }

/* tens become hundreds */
.tb-grow { margin-block: clamp(30px, 6vw, 90px); display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); font-family: var(--font-hand); font-weight: 800; color: #fff; }
.tb-grow span { font-size: clamp(1.6rem, 3.4vw, 3rem); opacity: 0.7; }
.tb-grow i { flex: 0 1 clamp(60px, 14vw, 200px); height: 4px; background: var(--tb-a); transform-origin: right; scale: 0 1; transition: scale 1.2s 0.3s var(--ease-out, ease); position: relative; }
.tb-grow i::after { content: ''; position: absolute; left: -2px; top: -7px; border: 9px solid transparent; border-right-color: var(--tb-a); translate: -100% 0; }
.tb-grow strong { font-size: clamp(3.4rem, 12vw, 10rem); line-height: 0.9; color: var(--tb-a); scale: 0.4; opacity: 0; transition: scale 1.2s 0.9s var(--ease-spring, ease), opacity 0.6s 0.9s; text-shadow: 0 0 60px color-mix(in srgb, var(--tb-a) 60%, transparent); }
.tb-grow.in i { scale: 1 1; } .tb-grow.in strong { scale: 1; opacity: 1; }

/* a pause: the page stops for one line */
.tb-pause { min-height: 70svh; display: grid; place-items: center; padding: 40px var(--gutter, 20px); text-align: center; }
.tb-pause p { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.2rem, 7vw, 6rem); line-height: 1.05; color: #fff; opacity: 0; scale: 0.92; filter: blur(8px); transition: opacity 1.4s, scale 1.6s var(--ease-out, ease), filter 1.4s; text-wrap: balance; }
.tb-pause.in p { opacity: 1; scale: 1; filter: blur(0); }

/* a strip of photos */
.tb-strip-wrap { margin-block: clamp(16px, 3vw, 40px); }
.tb-strip { list-style: none; margin: 0; padding: 10px max(var(--gutter, 20px), calc((100vw - 1200px) / 2)) 16px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--tb-a) transparent; }
.tb-strip li { flex: 0 0 auto; scroll-snap-align: center; }
.tb-strip li:nth-child(odd) { rotate: -1.2deg; } .tb-strip li:nth-child(even) { rotate: 1.2deg; translate: 0 10px; }
.tb-strip .tb-ph { height: clamp(200px, 24vw, 340px); border: 6px solid #fff; border-bottom-width: 22px; border-radius: 2px; box-shadow: 0 30px 40px -24px #000; }
.tb-strip:focus-visible { outline: 3px solid var(--tb-a); outline-offset: -3px; }
.tb-pips { display: none; }

/* memories of the first people */
.tb-mems { margin-block: clamp(24px, 4vw, 60px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 60px); align-items: start; }
.tb-mem { opacity: 0; translate: 0 30px; transition: opacity 0.9s calc(var(--i) * 200ms), translate 1.1s calc(var(--i) * 200ms) var(--ease-out, ease); }
.tb-mem.in { opacity: 1; translate: 0 0; }
.tb-mem:nth-child(2) { margin-top: clamp(30px, 6vw, 90px); }
.tb-mem header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tb-mem header img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--tb-a); }
.tb-mem header span { display: grid; color: #d9cff5; } .tb-mem header b { font-size: 1.15rem; color: var(--tb-a); }
.tb-mem-big { margin: 0 0 14px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.22; color: #fff; }
.tb-mem-big::before { content: '"'; color: var(--tb-a); } .tb-mem-big::after { content: '"'; color: var(--tb-a); }
.tb-mem-rest p { font-size: 1.05rem; line-height: 1.75; color: #e6defa; }

/* phone clips from the night */
.tb-loops-wrap { margin-block: clamp(20px, 4vw, 50px); }
.tb-loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-loops figure { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 30px 40px -24px #000; rotate: calc((var(--i) - 1) * 1.2deg); }
.tb-loops video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tb-note { margin: 10px 0 0; font-size: 0.95rem; color: #cfc6ea; }
.tb-btns { margin-block: clamp(14px, 2vw, 30px); justify-content: flex-start; }

/* moods: small changes of voice */
.mood-home .tb-ch-head, .mood-home .tb-say { text-align: center; } .mood-home .tb-ch-head h2, .mood-home .tb-say p { margin-inline: auto; }
.mood-home::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(80vw, 760px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, 0.3), transparent 66%); pointer-events: none; }
.mood-river .tb-shots .s0 { border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; }
.mood-street .tb-ch-head h2 { rotate: -1.5deg; transform-origin: right; }
.mood-drama .tb-ch-head h2 { letter-spacing: -0.02em; color: #fff; text-shadow: 4px 4px 0 #b3202c, 0 4px 30px rgba(0, 0, 0, 0.6); }
.mood-big .tb-ch-head h2 { font-size: clamp(2.8rem, 9vw, 8rem); color: var(--tb-a); text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 215, 0, 0.35); }
.mood-open .tb-ch-head, .mood-open .tb-text { text-align: center; } .mood-open .tb-ch-head h2, .mood-open .tb-text p { margin-inline: auto; }

/* the end */
.tb-end { position: relative; isolation: isolate; padding: clamp(90px, 14vw, 220px) 0 clamp(70px, 9vw, 130px); text-align: center; overflow: hidden; opacity: 0; transition: opacity 1.4s; }
.tb-end.in { opacity: 1; }
.tb-end-ph { position: absolute; inset: 0; z-index: -1; background: var(--img) var(--pos) / cover; opacity: 0.45; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.tb-end .wrap { display: grid; justify-items: center; gap: 16px; }
.tb-end blockquote { margin: 0; }
.tb-end blockquote p { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.1rem, 6vw, 5rem); line-height: 1.1; color: #fff; max-width: 18ch; text-shadow: 0 4px 30px #000; text-wrap: balance; }
.tb-end cite { display: block; margin-top: 12px; font-style: normal; font-weight: 700; color: var(--tb-a); }
.tb-end-line { margin: 0; max-width: 46ch; font-size: 1.2rem; line-height: 1.6; color: #fff; text-shadow: 0 2px 14px #000; }

/* ---------------------------------------------------------------- the phone */
@media (max-width: 800px) {
  .tb-hero { min-height: 100svh; } .tb-hero-photo { background-position: var(--pos-m); }
  .tb-hero-in { padding-block: 96px 30px; }
  .tb-title { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  /* the rail becomes a thin bar on top, with the name of the chapter */
  .tb-rail { inset: 0 0 auto 0; top: 0; translate: 0 -60px; } .tb-rail.show { translate: 0 0; } .tb-rail.away { translate: 0 -60px; }
  .tb-dots { display: none; }
  .tb-bar { display: block; height: 4px; background: rgba(255, 255, 255, 0.16); } .tb-bar i { display: block; height: 100%; background: var(--tb-a); transform-origin: right; transform: scaleX(0); }
  .tb-now { display: block; margin: 6px auto 0; width: max-content; max-width: 90vw; padding: 3px 14px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; color: var(--tb-ink); background: var(--tb-a); box-shadow: 0 8px 20px -8px #000; }
  .tb-now:empty { display: none; }
  .tb-ch { padding: 64px 0 20px; }
  .tb-ch-head h2 { font-size: clamp(2.6rem, 12vw, 3.6rem); } .mood-big .tb-ch-head h2 { font-size: clamp(2.9rem, 13.5vw, 4rem); }
  .tb-bignum { font-size: 30vw; top: 30px; opacity: 0.7; }
  .tb-text p, .tb-scene-text p { font-size: 1.14rem; line-height: 1.8; }
  .tb-say { margin-block: 40px; } .tb-say p { font-size: clamp(1.9rem, 8.4vw, 2.5rem); } .tb-say.small p { font-size: 1.6rem; }
  .tb-scene-in, .tb-arts { grid-template-columns: 1fr; gap: 18px; }
  .tb-scene.flip .tb-scene-text, .tb-arts.flip .tb-scene-text { order: 0; }
  .tb-shots { margin-inline: calc(-1 * var(--gutter, 20px)); padding-bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tb-shots .tb-ph { translate: 0 0; }
  .tb-shots .s0, .tb-shots.n1 .s0, .tb-scene.lay-full .tb-shots .s0 { grid-column: 1 / -1; width: 100%; margin: 0; border-radius: 0; aspect-ratio: 4 / 3; clip-path: inset(0 0 100% 0); } .tb-scene.in .tb-shots .s0 { clip-path: inset(0); }
  .mood-river .tb-shots .s0 { border-radius: 0; aspect-ratio: 1; }
  .tb-shots .s1, .tb-shots .s2 { position: relative; inset: auto; width: auto; rotate: 0deg; border-width: 4px 4px 14px; margin-inline: 8px; aspect-ratio: 4 / 3; }
  .tb-arts-in { gap: 22px; } .tb-art { flex-basis: 78vw; } .tb-art.kind-chat { flex-basis: 86vw; }
  .tb-steps { grid-template-columns: 1fr; gap: 0; padding-inline: 20px 34px; }
  .tb-steps li { padding: 0 0 26px; padding-inline-start: 0; padding-inline-end: 26px; border-top: 0; border-inline-end: 3px solid color-mix(in srgb, var(--tb-a) 60%, transparent); translate: 30px 0; }
  .tb-steps li::before { top: 4px; inset-inline: auto -9px; }
  .tb-steps { direction: rtl; } .tb-steps li { border-inline-end: 0; border-inline-start: 3px solid color-mix(in srgb, var(--tb-a) 60%, transparent); padding-inline: 22px 0; } .tb-steps li::before { inset-inline: -9px auto; }
  .tb-grow { flex-direction: column; gap: 6px; } .tb-grow i { width: 4px; height: 60px; flex: none; transform-origin: top; scale: 1 0; } .tb-grow.in i { scale: 1 1; } .tb-grow i::after { left: -7px; top: auto; bottom: -2px; border: 9px solid transparent; border-top-color: var(--tb-a); translate: 0 100%; }
  .tb-grow strong { font-size: 25vw; }
  .tb-pause { min-height: 62svh; } .tb-pause p { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .tb-strip { padding: 10px 20px 14px; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; } .tb-strip::-webkit-scrollbar { display: none; }
  .tb-strip .tb-ph { height: auto; width: 76vw; aspect-ratio: 4 / 3; } .tb-strip .tb-ph[style*="--ar:0."] { width: 60vw; aspect-ratio: 3 / 4; }
  .tb-pips { display: flex; justify-content: center; gap: 7px; } .tb-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background 0.3s, scale 0.3s; } .tb-pips i.on { background: var(--tb-a); scale: 1.4; }
  .tb-mems { grid-template-columns: 1fr; gap: 36px; } .tb-mem:nth-child(2) { margin-top: 0; } .tb-mem-big { font-size: 1.7rem; } .tb-mem-rest p { font-size: 1.08rem; }
  .tb-loops { grid-template-columns: 1fr 1fr; gap: 8px; } .tb-loops figure { rotate: 0deg; } .tb-loops figure:first-child { grid-column: 1 / -1; }
  .tb-btns .btn, .tb-end .btn { width: 100%; justify-content: center; min-height: 54px; } .tb-end .btn-row { width: 100%; }
  .tb-end blockquote p { font-size: clamp(2.2rem, 10vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-hero-photo, .tb-title span, .tb-kicker, .tb-hero-line, .tb-scroll svg, .tb-art.kind-chat::before { animation: none; }
  .tb-ch-head, .tb-text, .tb-say p, .tb-say cite, .tb-shots .tb-ph, .tb-art, .tb-steps li, .tb-grow i, .tb-grow strong, .tb-pause p, .tb-mem, .tb-end { opacity: 1; translate: 0 0; scale: 1; filter: none; clip-path: none; transition: none; }
  body.tb-page, .tb-back { transition: none; }
}
.mood-open .tb-ch-when { direction: ltr; }
@media (max-width: 800px) { .tb-now { font-size: 0.9rem; } }