/* Self-hosted, deliberately. Plus Jakarta Sans was named in the stacks below with nothing loading it, so it only rendered on machines that happened to have it installed and everyone else silently got system-ui. Served from this origin rather than fonts.googleapis.com because that host is unreachable from mainland China without a VPN: same-origin files inherit the site's own reachability, so if the page loads the type is correct. SIL Open Font License 1.1, which permits this redistribution -- see assets/fonts/OFL.txt. This is the variable cut, so one file covers every weight from 400 to 800 used here. The headline serif is deliberately not webfont-loaded. HK compared the two on 20 Aug and chose Georgia, which is what the page had in fact always rendered, and Georgia ships on every platform we target. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html, body { margin: 0; min-height: 100%; background: #030303; } #kin-full-journey { --stage-h: 100svh; --ink: #030303; --forest: #09110d; --cream: #ebe1c7; --gold: #f4f0e4; --green: #60a86d; --muted: rgba(235, 225, 199, .64); --hair: rgba(244, 240, 228, .18); --img-hero-earth: url("/assets/scenes/hero-earth.avif"); --img-entrepreneur-snapshot: url("/assets/scenes/entrepreneur-snapshot.avif"); --img-vanness-stadium: url("/assets/scenes/vanness-stadium.avif"); --img-vanness-return: url("/assets/scenes/vanness-return.avif"); --img-vanness-prayer: url("/assets/scenes/vanness-prayer.avif"); --img-vanness-fashion: url("/assets/scenes/vanness-fashion.avif"); --img-mike-medicine-clean: url("/assets/scenes/mike-medicine-clean.avif"); --img-mike-bodybuilding: url("/assets/scenes/mike-bodybuilding.avif"); --img-mike-yoga: url("/assets/scenes/mike-yoga.avif"); --img-mike-fittime: url("/assets/scenes/mike-fittime.avif"); --img-mike-food: url("/assets/scenes/mike-food.avif"); --img-mike-jiujitsu: url("/assets/scenes/mike-jiujitsu.avif"); --img-mike-teaching: url("/assets/scenes/mike-teaching.avif"); --img-markus-germany: url("/assets/scenes/markus-germany.avif"); --img-markus-xyo: url("/assets/scenes/markus-xyo.avif"); --img-markus-integrity: url("/assets/scenes/markus-integrity.avif"); --img-markus-proof: url("/assets/scenes/markus-proof.avif"); --img-poramin-crypto: url("/assets/scenes/poramin-crypto.avif"); --img-poramin-satang: url("/assets/scenes/poramin-satang.avif"); --img-poramin-acquisition: url("/assets/scenes/poramin-acquisition.avif"); --img-poramin-meditation: url("/assets/scenes/poramin-meditation.avif"); --img-poramin-cyber: url("/assets/scenes/poramin-cyber.avif"); --img-mantak-garden: url("/assets/scenes/mantak-garden.avif"); --img-mantak-universal: url("/assets/scenes/mantak-universal.avif"); --img-mantak-darkroom: url("/assets/scenes/mantak-darkroom.avif"); --img-mantak-global: url("/assets/scenes/mantak-global.avif"); --img-cta-vanness: url("/assets/scenes/cta-vanness.avif"); --img-cta-mantak: url("/assets/scenes/cta-mantak.avif"); --img-cta-poramin: url("/assets/scenes/cta-poramin.avif"); position: relative; width: 100%; height: var(--stage-h); min-height: 620px; overflow: hidden; isolation: isolate; color: var(--cream); background: transparent; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #kin-full-journey * { box-sizing: border-box; } #kin-full-journey { --img-markus-germany: url("/assets/markus/markus-forbes-portrait-grey-extended-v1.png"); --img-markus-xyo: url("/assets/markus/markus-10m-decentralized-cube-globe-v2.png"); --img-markus-integrity: url("/assets/markus/markus-ai-provenance-chain-v1.png"); --img-markus-germany: url("/assets/delivery/markus-forbes-portrait-grey-extended-v1.avif"); --img-markus-xyo: url("/assets/delivery/markus-10m-decentralized-cube-globe-v2.avif"); --img-markus-integrity: url("/assets/delivery/markus-ai-provenance-chain-v1.avif"); --img-mike-teaching: url("/assets/delivery/mike-teaching-sharp-v1.avif"); --img-vanness-return: url("/assets/delivery/vanness-return-white-stage-suit-v4.avif"); --img-poramin-crypto: url("/assets/delivery/poramin-crypto-sharp-v3.avif"); --img-poramin-satang: url("/assets/delivery/poramin-satang-sharp-v3.avif"); --img-poramin-acquisition: url("/assets/delivery/poramin-acquisition-sharp-v3.avif"); --img-poramin-meditation: url("/assets/delivery/poramin-meditation-sharp-v3.avif"); --img-poramin-cyber: url("/assets/delivery/poramin-cyber-sharp-v3.avif"); --img-mantak-garden: url("/assets/delivery/mantak-garden-sharp-v3.avif"); --img-mantak-universal: url("/assets/delivery/mantak-universal-sharp-v3.avif"); --img-mantak-darkroom: url("/assets/delivery/mantak-darkroom-sharp-v3.avif"); --img-mantak-global: url("/assets/delivery/mantak-global-sharp-v3.avif"); /* Phone-sized plates, same aspect and framing, 64% fewer bytes. Regenerate with: node scripts/build_mobile_scene_variants.mjs */ --img-mobile-hero-earth: url("/assets/mobile/hero-earth.avif"); --img-mobile-entrepreneur-snapshot: url("/assets/mobile/entrepreneur-snapshot.avif"); --img-mobile-vanness-stadium: url("/assets/mobile/vanness-stadium.avif"); --img-mobile-vanness-return: url("/assets/mobile/vanness-return-white-stage-suit-v4.avif"); --img-mobile-vanness-prayer: url("/assets/mobile/vanness-prayer.avif"); --img-mobile-vanness-fashion: url("/assets/mobile/vanness-fashion.avif"); --img-mobile-mike-medicine-clean: url("/assets/mobile/mike-medicine-clean.avif"); --img-mobile-mike-bodybuilding: url("/assets/mobile/mike-bodybuilding.avif"); --img-mobile-mike-yoga: url("/assets/mobile/mike-yoga.avif"); --img-mobile-mike-fittime: url("/assets/mobile/mike-fittime.avif"); --img-mobile-mike-food: url("/assets/mobile/mike-food.avif"); --img-mobile-mike-jiujitsu: url("/assets/mobile/mike-jiujitsu.avif"); --img-mobile-mike-teaching: url("/assets/mobile/mike-teaching-sharp-v1.avif"); --img-mobile-markus-germany: url("/assets/mobile/markus-forbes-portrait-grey-extended-v1.avif"); --img-mobile-markus-xyo: url("/assets/mobile/markus-10m-decentralized-cube-globe-v2.avif"); --img-mobile-markus-integrity: url("/assets/mobile/markus-ai-provenance-chain-v1.avif"); --img-mobile-markus-proof: url("/assets/mobile/markus-proof.avif"); --img-mobile-poramin-crypto: url("/assets/mobile/poramin-crypto-sharp-v3.avif"); --img-mobile-poramin-satang: url("/assets/mobile/poramin-satang-sharp-v3.avif"); --img-mobile-poramin-acquisition: url("/assets/mobile/poramin-acquisition-sharp-v3.avif"); --img-mobile-poramin-meditation: url("/assets/mobile/poramin-meditation-sharp-v3.avif"); --img-mobile-poramin-cyber: url("/assets/mobile/poramin-cyber-sharp-v3.avif"); --img-mobile-mantak-garden: url("/assets/mobile/mantak-garden-sharp-v3.avif"); --img-mobile-mantak-universal: url("/assets/mobile/mantak-universal-sharp-v3.avif"); --img-mobile-mantak-darkroom: url("/assets/mobile/mantak-darkroom-sharp-v3.avif"); --img-mobile-mantak-global: url("/assets/mobile/mantak-global-sharp-v3.avif"); --img-mobile-cta-vanness: url("/assets/mobile/cta-vanness.avif"); --img-mobile-cta-mantak: url("/assets/mobile/cta-mantak.avif"); --img-mobile-cta-poramin: url("/assets/mobile/cta-poramin.avif"); } #kin-full-journey .kfp-scroll { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(231, 199, 128, .52) transparent; } #kin-full-journey .kfp-space { height: 3100svh; } #kin-full-journey .kfp-stage { position: sticky; top: 0; width: 100%; height: var(--stage-h); overflow: hidden; background: transparent; } #kin-full-journey .kfp-scenes, #kin-full-journey .kfp-scene, #kin-full-journey .kfp-grade, #kin-full-journey .kfp-vignette, #kin-full-journey .kfp-noise, #kin-full-journey .kfp-carrier, #kin-full-journey .kfp-resolution-lights, #kin-full-journey .kfp-hero-earth, #kin-full-journey .kfp-hero-constellation, #kin-full-journey .kfp-galaxy { position: absolute; inset: 0; pointer-events: none; } #kin-full-journey .kfp-scene { margin: 0; opacity: 0; overflow: hidden; visibility: hidden; contain: layout paint style; background: var(--tone, var(--ink)); } #kin-full-journey .kfp-scene::before { content: ""; position: absolute; inset: -3%; background-image: var(--active-image, none); background-position: var(--position, 50% 50%); background-size: cover; transform: scale(var(--scale, 1.06)) scale(var(--zoom, 1)) translate3d(var(--x, 0%), var(--y, 0%), 0); transform-origin: var(--origin, 50% 50%); -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: none; will-change: auto; } #kin-full-journey .kfp-scene.kfp-scene--active::before { will-change: transform; } #kin-full-journey .kfp-scene::after { content: ""; position: absolute; inset: 0; background: none; } #kin-full-journey .kfp-scene-ember { position: absolute; z-index: 5; left: calc(var(--heart-x) + var(--x, 0%)); top: calc(var(--heart-y) + var(--y, 0%)); width: 7px; height: 7px; border-radius: 50%; background: rgba(244,240,228,.94); opacity: .74; transform: translate(-50%, -50%); box-shadow: 0 0 5px 2px rgba(244,240,228,.65), 0 0 17px 6px rgba(244,240,228,.18), 0 0 38px 12px rgba(96,168,109,.08); mix-blend-mode: screen; pointer-events: none; } #kin-full-journey .kfp-opening { background: transparent; } #kin-full-journey .kfp-opening::before, #kin-full-journey .kfp-opening::after { background: none; } #kin-full-journey .kfp-resolution::before { inset: 0; background: radial-gradient(circle at 64% 43%, rgba(96, 168, 109, .08), transparent 23%), radial-gradient(circle at 50% 52%, #090d0b 0, #050706 42%, #030303 76%); filter: none; } #kin-full-journey .kfp-resolution::after { background: radial-gradient(circle at 50% 48%, transparent 0 28%, rgba(3,3,3,.34) 68%, rgba(3,3,3,.8)); } #kin-full-journey .kfp-grade { z-index: 6; background: transparent; } #kin-full-journey .kfp-vignette { z-index: 8; box-shadow: none; } #kin-full-journey .kfp-noise { z-index: 9; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } #kin-full-journey .kfp-hero-constellation { z-index: 12; opacity: 1; transform: scale(1); transform-origin: 61% 43%; will-change: opacity, transform; } #kin-full-journey .kfp-hero-constellation::before { content: ""; position: absolute; z-index: 0; inset: -12%; background: radial-gradient(circle at 64% 38%, rgba(244,240,228,.2), transparent 8%), radial-gradient(circle at 72% 52%, rgba(96,168,109,.2), transparent 10%), radial-gradient(circle at 53% 57%, rgba(244,240,228,.13), transparent 9%), radial-gradient(circle at 80% 31%, rgba(96,168,109,.15), transparent 8%), radial-gradient(circle at 44% 33%, rgba(244,240,228,.16), transparent 10%); opacity: .38; transform: scale(.96); transform-origin: 61% 43%; mix-blend-mode: screen; pointer-events: none; will-change: opacity, transform; } #kin-full-journey .kfp-hero-earth { z-index: 10; inset: auto -12% -18% auto; width: min(94vw, 1380px); height: min(84svh, 816px); background-image: var(--img-hero-earth); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: .76; filter: saturate(.8) brightness(.78); transform-origin: 100% 100%; /* hero-earth.avif bakes its own black canvas; screen drops that to nothing so no rectangle punches through the scene crossfading in beneath it. */ mix-blend-mode: screen; will-change: opacity, transform; } #kin-full-journey .kfp-star { position: absolute; z-index: 1; left: var(--star-x); top: var(--star-y); width: var(--star-size, 7px); height: var(--star-size, 7px); border-radius: 50%; background: var(--gold); opacity: var(--star-opacity, .86); transform: translate(-50%, -50%) scale(var(--star-scale, 1)); box-shadow: 0 0 8px 3px rgba(244,240,228,.98), 0 0 32px 12px rgba(244,240,228,.34), 0 0 88px 26px rgba(96,168,109,.18); will-change: transform, opacity; } #kin-full-journey .kfp-star::before, #kin-full-journey .kfp-star::after { content: ""; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, rgba(244,240,228,.55), transparent); opacity: .48; transform: translate(-50%, -50%) scale(.82); will-change: transform, opacity; } #kin-full-journey .kfp-star::before { width: 54px; height: 1px; } #kin-full-journey .kfp-star::after { width: 1px; height: 54px; } @media (prefers-reduced-motion: no-preference) { #kin-full-journey .kfp-hero-constellation::before { animation: kfp-ambient-breathe 5.8s ease-in-out infinite alternate; } #kin-full-journey .kfp-star::before, #kin-full-journey .kfp-star::after { animation: kfp-star-shimmer 3.4s ease-in-out infinite alternate; } #kin-full-journey .kfp-star::after { animation-delay: -1.1s; } #kin-full-journey .kfp-star:nth-child(2n)::before, #kin-full-journey .kfp-star:nth-child(2n)::after { animation-delay: -1.7s; animation-duration: 4.2s; } #kin-full-journey .kfp-star:nth-child(3n)::before, #kin-full-journey .kfp-star:nth-child(3n)::after { animation-delay: -2.6s; animation-duration: 5s; } } @keyframes kfp-star-shimmer { 0%, 24% { opacity: .18; transform: translate(-50%, -50%) scale(.46); } 58% { opacity: .96; transform: translate(-50%, -50%) scale(1.28); } 100% { opacity: .42; transform: translate(-50%, -50%) scale(.82); } } @keyframes kfp-ambient-breathe { 0% { opacity: .22; transform: scale(.94); } 55% { opacity: .48; transform: scale(1.03); } 100% { opacity: .32; transform: scale(.98); } } #kin-full-journey .kfp-nav { position: absolute; z-index: 24; top: 26px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; } #kin-full-journey .kfp-brand, #kin-full-journey .kfp-count, #kin-full-journey .kfp-theme { margin: 0; font-size: 9px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,232,204,.74); } #kin-full-journey .kfp-brand { font-size: 18px; appearance: none; border: 0; padding: 0; background: none; font-family: inherit; pointer-events: auto; cursor: pointer; } @media (hover: hover) { #kin-full-journey .kfp-brand:hover { color: var(--green); } } #kin-full-journey .kfp-brand:focus-visible { color: var(--green); outline: 1px solid currentColor; outline-offset: 6px; } #kin-full-journey .kfp-theme { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(235,225,199,.42); } #kin-full-journey .kfp-nav-end { display: flex; align-items: center; gap: 20px; } #kin-full-journey .kfp-nav.kfp-nav--solid { background: #080908; } #kin-full-journey .kfp-nav { transition: background-color 180ms ease; } #kin-full-journey .kfp-socials { display: flex; align-items: center; gap: 7px; } #kin-full-journey .kfp-social-link { width: 40px; height: 40px; display: grid; place-items: center; color: rgba(235,225,199,.62); text-decoration: none; pointer-events: auto; transition: color 180ms ease, transform 180ms ease; } /* Touch has no hover to leave. Chrome on Android applies :hover on tap and keeps it until you tap elsewhere, which is why the icon stayed green after returning from the app. Gate every hover rule on a real pointer. */ @media (hover: hover) { #kin-full-journey .kfp-social-link:hover { color: var(--green); transform: translateY(-1px); } } #kin-full-journey .kfp-social-link:focus-visible { color: var(--green); outline: 1px solid currentColor; outline-offset: 2px; } #kin-full-journey .kfp-social-icon { width: 28px; height: 28px; display: block; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } #kin-full-journey .kfp-social-icon--x { fill: currentColor; stroke: none; } #kin-full-journey .kfp-lang { display: flex; text-decoration: none; align-items: center; gap: 5px; margin-right: 4px; padding: 7px 10px; color: rgba(235, 225, 199, .62); background: transparent; border: 1px solid rgba(244, 240, 228, .22); border-radius: 2px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1; cursor: pointer; pointer-events: auto; transition: color 180ms ease, border-color 180ms ease; } /* The control reads small by design, but a 22px-tall tap target is under half the 44px minimum. Grow the hit area, not the box. */ #kin-full-journey .kfp-lang { position: relative; } #kin-full-journey .kfp-lang::after { content: ""; position: absolute; inset: -11px -8px; } #kin-full-journey .kfp-lang-on { color: var(--cream); } #kin-full-journey .kfp-lang-sep { opacity: .38; } #kin-full-journey .kfp-lang-off { opacity: .72; } @media (hover: hover) { #kin-full-journey .kfp-lang:hover { color: var(--green); border-color: rgba(96, 168, 109, .5); } } #kin-full-journey .kfp-lang:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } /* The Chinese cut of the story. Georgia and Plus Jakarta Sans carry no CJK glyphs, so Chinese would otherwise fall back to whatever each device supplies. A CJK webfont is megabytes rather than the 27KB the latin one costs, so this uses the platform faces deliberately: a Song/Ming serif for the headline, which is the Chinese equivalent of the Georgia voice, and a Hei sans for everything else. */ html[lang^="zh"] #kin-full-journey .kfp-title, html[lang^="zh"] #kin-full-journey .kfp-quote, html[lang^="zh"] #kin-full-journey .kfp-cta-title, html[lang^="zh"] #kin-full-journey .kfp-proof-layer__headline, html[lang^="zh"] #kin-full-journey .kfp-poramin-proof-headline, html[lang^="zh"] #kin-full-journey .kfp-talk-name { font-family: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun", "STSong", Georgia, serif; } html[lang^="zh"] #kin-full-journey .kfp-eyebrow, html[lang^="zh"] #kin-full-journey .kfp-cta-kicker, html[lang^="zh"] #kin-full-journey .kfp-cta-caption, html[lang^="zh"] #kin-full-journey .kfp-proof-layer__detail, html[lang^="zh"] #kin-full-journey .kfp-poramin-proof-dek, html[lang^="zh"] #kin-full-journey .kfp-finale-footer-label, html[lang^="zh"] #kin-full-journey .kfp-lang, html[lang^="zh"] #kin-full-journey .kfp-talks-platforms, html[lang^="zh"] #kin-full-journey .kfp-talks-label, html[lang^="zh"] #kin-full-journey .kfp-talk-label, html[lang^="zh"] #kin-full-journey .kfp-talk-topic { font-family: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Heiti SC", "Plus Jakarta Sans", sans-serif; } /* ch measures the width of a "0", and a Chinese glyph is about twice that, so every ch-based measure holds roughly half the characters it was tuned for. Re-set the ones that carry the story in em, which tracks the glyph. */ /* The display leading here is set below 1 (.9 to .94), which suits Latin because caps and lowercase leave headroom inside the line box. A CJK glyph fills its em box, so the same value pushes the characters past the box and the first and last rows lose their tops and bottoms. Chinese needs at least about 1.15, and the headline still reads tight at that. */ html[lang^="zh"] #kin-full-journey .kfp-title { max-width: 9em; line-height: 1.16; } html[lang^="zh"] #kin-full-journey .kfp-proof-layer__headline { line-height: 1.18; } html[lang^="zh"] #kin-full-journey .kfp-cta-title { line-height: 1.14; } html[lang^="zh"] #kin-full-journey .kfp-poramin-proof-headline { line-height: 1.2; max-width: 16em; margin-inline: auto; } html[lang^="zh"] #kin-full-journey .kfp-title, html[lang^="zh"] #kin-full-journey .kfp-cta-title, html[lang^="zh"] #kin-full-journey .kfp-proof-layer__headline, html[lang^="zh"] #kin-full-journey .kfp-poramin-proof-headline { letter-spacing: 0; } html[lang^="zh"] #kin-full-journey .kfp-quote { max-width: 17em; } html[lang^="zh"] #kin-full-journey .kfp-eyebrow { letter-spacing: .12em; } /* Keeps punctuation off the start of a line and stops a run of Latin inside Chinese (Satang, FitTime, XYO) from being split mid-word. */ html[lang^="zh"] #kin-full-journey .kfp-title, html[lang^="zh"] #kin-full-journey .kfp-quote, html[lang^="zh"] #kin-full-journey .kfp-cta-title, html[lang^="zh"] #kin-full-journey .kfp-cta-caption, html[lang^="zh"] #kin-full-journey .kfp-proof-layer__headline, html[lang^="zh"] #kin-full-journey .kfp-poramin-proof-headline { line-break: strict; overflow-wrap: normal; word-break: normal; } /* Chinese wraps at any character, so the finale heading splits wherever the box ends. balance evens the two lines instead of leaving one orphan. */ html[lang^="zh"] #kin-full-journey .kfp-cta-title { max-width: 9em; text-wrap: balance; } /* Break before 对话 rather than wherever the box ends, which split 背后. */ html[lang^="zh"] #kin-full-journey .kfp-talks-title-accent { display: block; font-style: normal; } html[lang^="zh"] #kin-full-journey .kfp-cta-caption { max-width: 30em; } html[lang^="zh"] #kin-full-journey .kfp-talks-platforms, html[lang^="zh"] #kin-full-journey .kfp-talks-label, html[lang^="zh"] #kin-full-journey .kfp-talk-label { letter-spacing: .12em; } html[lang^="zh"] #kin-full-journey .kfp-talk-name { letter-spacing: 0; } html[lang^="zh"] #kin-full-journey .kfp-proof-layer__headline { max-width: 11em; } html[lang^="zh"] #kin-full-journey .kfp-proof-layer__detail { max-width: 20em; } /* The English original stays under every translated quote: these are real recorded words and a translation, however good, is not what was said. */ #kin-full-journey .kfp-quote-source { display: block; margin-top: 9px; /* Subordinate to the Chinese, but this sits on photography, where a faint token stops being readable rather than reading as quiet. */ color: rgba(235, 225, 199, .66); font-family: Georgia, "Times New Roman", serif; font-size: .66em; font-style: italic; letter-spacing: 0; text-shadow: 0 1px 12px rgba(3, 3, 3, .9); } #kin-full-journey .kfp-progress { display: flex; align-items: center; gap: 12px; } #kin-full-journey .kfp-track { width: min(18vw, 190px); height: 1px; background: var(--hair); } /* will-change is load-bearing, not a micro-optimisation: this bar is a full-width child of the sticky nav on mobile and its transform is rewritten on every frame of the entire scroll. Unpromoted, that repainted the whole header every frame, which is what flickered during the finale when the compositor was already saturated. Promoted, the change is compositor-only and never touches the header's raster. */ #kin-full-journey .kfp-fill { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold); will-change: transform; } #kin-full-journey .kfp-copy { position: absolute; z-index: 22; left: clamp(34px, 7vw, 108px); bottom: clamp(54px, 9.5svh, 110px); width: min(610px, 54vw); pointer-events: none; text-shadow: 0 2px 18px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .8); } #kin-full-journey .kfp-eyebrow { display: block; margin-bottom: 14px; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } #kin-full-journey .kfp-title { margin: 0; max-width: 10ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 6.25vw, 96px); font-weight: 400; line-height: .9; letter-spacing: -.055em; text-wrap: balance; } #kin-full-journey .kfp-quote { display: none; margin: 18px 0 0; max-width: 39ch; padding-left: 16px; border-left: 1px solid var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.34; color: rgba(242,232,204,.94); } #kin-full-journey .kfp-carrier { z-index: 15; } #kin-full-journey .kfp-carrier > * { position: absolute; opacity: 0; will-change: opacity, transform; } #kin-full-journey .kfp-poramin-proof { position: absolute; z-index: 8; left: 70%; top: 35%; width: min(54vw, 840px); margin: 0; padding: 0; opacity: 0; color: var(--cream); background: transparent; text-align: left; text-shadow: 0 2px 22px rgba(3, 3, 3, .82); transform: translate(-50%, -50%) translate3d(24px, 0, 0) scale(.97); transform-origin: 50% 50%; pointer-events: none; will-change: opacity, transform; } #kin-full-journey .kfp-poramin-proof-source { display: block; margin-bottom: 13px; color: rgba(235, 225, 199, .58); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; } #kin-full-journey .kfp-poramin-proof-headline { max-width: 18ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.35vw, 54px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; } #kin-full-journey .kfp-poramin-proof-dek { display: block; max-width: 50ch; margin-top: 17px; color: rgba(235, 225, 199, .52); font-size: clamp(10px, .82vw, 13px); line-height: 1.55; } #kin-full-journey .kfp-proof-layer { position: absolute; z-index: 9; width: min(42vw, 640px); margin: 0; padding: 0; opacity: 0; color: var(--cream); background: transparent; text-align: left; text-shadow: 0 2px 24px rgba(3, 3, 3, .86); transform: translate3d(0, 18px, 0) scale(.985); transform-origin: 0 50%; pointer-events: none; will-change: opacity, transform; } #kin-full-journey .kfp-proof-layer--fittime { right: 6%; top: 18%; } #kin-full-journey .kfp-proof-layer--markus-origin { left: 6%; top: 16%; width: min(46vw, 720px); } #kin-full-journey .kfp-proof-layer--xyo { left: 6%; top: 16%; width: min(38vw, 580px); } #kin-full-journey .kfp-proof-layer--mantak { left: 6%; top: 16%; width: min(42vw, 620px); } #kin-full-journey .kfp-proof-layer__source { display: inline-block; margin-bottom: 11px; color: rgba(235, 225, 199, .62); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-decoration: none; text-transform: uppercase; pointer-events: auto; } #kin-full-journey a.kfp-proof-layer__source { border-bottom: 1px solid rgba(235, 225, 199, .3); } #kin-full-journey .kfp-proof-layer__headline { max-width: 14ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 4.3vw, 70px); font-weight: 400; line-height: .94; letter-spacing: -.045em; text-wrap: balance; } #kin-full-journey .kfp-proof-layer__detail { display: block; max-width: 45ch; margin-top: 15px; color: rgba(235, 225, 199, .56); font-size: clamp(10px, .84vw, 13px); line-height: 1.55; } #kin-full-journey .kfp-proof-layer--xyo .kfp-proof-layer__headline { max-width: 11ch; } #kin-full-journey .kfp-proof-layer--xyo .kfp-proof-layer__detail { margin-top: 9px; color: rgba(244, 240, 228, .72); font-size: clamp(15px, 1.35vw, 22px); letter-spacing: .02em; } #kin-full-journey .kfp-proof-layer--mantak .kfp-proof-layer__detail { margin-top: 11px; color: rgba(244, 240, 228, .72); font-size: clamp(15px, 1.35vw, 22px); letter-spacing: .02em; line-height: 1.4; } #kin-full-journey .kfp-resolution-lights { z-index: 14; opacity: 0; } #kin-full-journey .kfp-resolution-lights i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 15px 5px rgba(244,240,228,.22), 0 0 42px 12px rgba(96,168,109,.05); } #kin-full-journey .kfp-resolution-lights i:nth-child(1){left:18%;top:31%} .kfp-resolution-lights i:nth-child(2){left:31%;top:56%} #kin-full-journey .kfp-resolution-lights i:nth-child(3){left:45%;top:38%} .kfp-resolution-lights i:nth-child(4){left:59%;top:63%} #kin-full-journey .kfp-resolution-lights i:nth-child(5){left:72%;top:34%} .kfp-resolution-lights i:nth-child(6){left:83%;top:53%} #kin-full-journey .kfp-resolution-lights i:nth-child(7){left:53%;top:22%} #kin-full-journey .kfp-galaxy { z-index: 13; opacity: 0; transform: scale(.48) rotate(-3deg); transform-origin: 50% 48%; will-change: opacity, transform; } #kin-full-journey .kfp-galaxy i { position: absolute; left: var(--gx); top: var(--gy); width: var(--gs, 2px); height: var(--gs, 2px); border-radius: 50%; background: rgba(244,240,228,var(--go,.68)); box-shadow: 0 0 12px 3px rgba(244,240,228,.2), 0 0 30px 8px rgba(96,168,109,.08); } @media (prefers-reduced-motion: no-preference) { #kin-full-journey .kfp-galaxy i, #kin-full-journey .kfp-resolution-lights i { animation: kfp-galaxy-twinkle 3.8s ease-in-out infinite alternate; } #kin-full-journey .kfp-galaxy i:nth-child(2n), #kin-full-journey .kfp-resolution-lights i:nth-child(2n) { animation-delay: -1.7s; animation-duration: 4.6s; } #kin-full-journey .kfp-galaxy i:nth-child(3n), #kin-full-journey .kfp-resolution-lights i:nth-child(3n) { animation-delay: -2.8s; animation-duration: 5.3s; } } @keyframes kfp-galaxy-twinkle { 0%, 18% { opacity: .28; transform: scale(.72); } 62% { opacity: 1; transform: scale(1.42); } 100% { opacity: .54; transform: scale(.92); } } #kin-full-journey .kfp-finale-wordmark { position: absolute; z-index: 20; left: 50%; top: 46%; margin: 0; opacity: 0; transform: translate(-50%, -50%) scale(.88); width: min(50vw, 720px); pointer-events: none; will-change: opacity, transform; } #kin-full-journey .kfp-finale-logo { width: 100%; height: auto; display: block; } /* 23 Sep 2026: the closing collage, question and DM button were replaced by the "conversations behind the journey" section from the Carol handoff. It is still the last beat of the pinned stage, so it is laid out as one viewport-high column: copy, a label, the three panels filling what is left, then the social footer. Nothing is absolutely placed any more, which is what keeps the footer from being cropped on a short iPhone. */ /* 23 Sep 2026, Android Chrome: the section first lived inside the pinned stage, then as a scroll box nested in it, and Chrome half-painted its panels. It now follows the story in the page's one real scroller, like the section after the hero in Carol's mockup. */ #kin-full-journey .kfp-finale-cta { --finale-top: 88px; /* Carol's handoff green (her --lime), HK 23 Sep 2026. */ --accent-lime: #d4ff55; position: relative; box-sizing: border-box; padding: calc(var(--finale-top) + clamp(28px, 6vw, 72px)) 5vw max(24px, env(safe-area-inset-bottom)); /* The top fades from the stage's own black, so there is no seam where the story hands over to this section. */ background: linear-gradient(var(--ink), rgba(3, 3, 3, 0) 220px), radial-gradient(circle at 85% 14%, rgba(215, 199, 119, .1), transparent 30%), var(--ink); } #kin-full-journey .kfp-talks { width: 100%; max-width: 1320px; margin: 0 auto; } #kin-full-journey .kfp-cta-copy { max-width: 780px; margin-bottom: clamp(16px, 3.6svh, 44px); } #kin-full-journey .kfp-cta-kicker, #kin-full-journey .kfp-talks-platforms, #kin-full-journey .kfp-talks-label { margin: 0; font-size: 9px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: rgba(235, 225, 199, .56); } #kin-full-journey .kfp-cta-kicker { margin-bottom: clamp(10px, 2svh, 18px); color: rgba(235, 225, 199, .72); } #kin-full-journey .kfp-talks-kicker-lead { color: var(--accent-lime); } #kin-full-journey .kfp-cta-title { margin: 0; max-width: 15ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px, 5.4vw, 84px); font-weight: 400; line-height: .95; letter-spacing: -.045em; text-wrap: balance; color: var(--cream); } #kin-full-journey .kfp-talks-title-accent { color: var(--accent-lime); font-style: italic; } #kin-full-journey .kfp-cta-caption { margin: clamp(12px, 2.2svh, 20px) 0 0; max-width: 58ch; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.6; color: rgba(235, 225, 199, .76); } #kin-full-journey .kfp-talks-platforms { margin-top: clamp(10px, 2svh, 18px); } #kin-full-journey .kfp-talks-channel { color: rgba(235, 225, 199, .86); text-decoration: underline; text-decoration-color: rgba(212, 255, 85, .45); text-underline-offset: 4px; pointer-events: auto; } #kin-full-journey .kfp-talks-channel:focus-visible { outline: 2px solid var(--accent-lime); outline-offset: 3px; } @media (hover: hover) { #kin-full-journey .kfp-talks-channel:hover { color: var(--accent-lime); text-decoration-color: currentColor; } } #kin-full-journey .kfp-talks-label { padding-top: 14px; margin-bottom: 14px; border-top: 1px solid rgba(235, 225, 199, .16); } #kin-full-journey .kfp-talks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; } #kin-full-journey .kfp-cta-card { position: relative; display: block; width: 100%; /* Exactly the art's own shape, so cover crops nothing top or bottom. */ aspect-ratio: 4 / 5; margin: 0; overflow: hidden; color: inherit; text-decoration: none; /* The frame starts invisible. Its lit border and dark fill are what showed as an empty box while the thumb behind it was still decoding, so the card only draws itself once its own image is ready -- see --ready below. */ border: 1px solid transparent; background: transparent; box-shadow: none; } /* Set per card, by script, once that card's own thumb has decoded. */ #kin-full-journey .kfp-cta-card--ready { border-color: rgba(235, 225, 199, .58); background: #0b110e; box-shadow: 0 24px 50px rgba(0, 0, 0, .56); } #kin-full-journey .kfp-cta-thumb { position: absolute; inset: 0; display: block; background-image: var(--card-image); background-position: 50% 18%; background-repeat: no-repeat; background-size: cover; filter: grayscale(.6); transition: filter 500ms ease, transform 500ms ease; } /* Carol's handoff hover (HK, 23 Sep 2026). Mouse only, so a tap on a phone never leaves a card stuck in colour. */ @media (hover: hover) { #kin-full-journey .kfp-cta-card:hover .kfp-cta-thumb { filter: grayscale(0); transform: scale(1.025); } } /* The source art carries its own caption strip along the bottom. The shade sits over it so the panel's own label is the one that reads. */ #kin-full-journey .kfp-cta-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #030303 0%, #030303 36%, rgba(3, 3, 3, .6) 48%, transparent 64%); pointer-events: none; } #kin-full-journey .kfp-talk-meta { position: absolute; z-index: 2; left: clamp(16px, 1.8vw, 26px); right: clamp(16px, 1.8vw, 26px); bottom: clamp(14px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 8px; } #kin-full-journey .kfp-talk-label { font-size: 9px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lime); } #kin-full-journey .kfp-talk-name { font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.1vw, 32px); font-weight: 400; line-height: 1.05; color: var(--cream); } #kin-full-journey .kfp-talk-topic { font-size: 12px; line-height: 1.45; color: rgba(235, 225, 199, .72); } #kin-full-journey .kfp-cta-card--vanness { --card-image: var(--img-cta-vanness); } #kin-full-journey .kfp-cta-card--poramin { --card-image: var(--img-cta-poramin); } #kin-full-journey .kfp-cta-card--mantak { --card-image: var(--img-cta-mantak); } @media (max-width: 1100px) { #kin-full-journey .kfp-finale-cta { --finale-top: 72px; } } #kin-full-journey .kfp-finale-footer { position: relative; z-index: 5; width: max-content; margin: clamp(28px, 5svh, 56px) auto 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px; color: rgba(235,225,199,.46); } #kin-full-journey .kfp-copyright { grid-column: 1 / -1; justify-self: center; text-align: center; white-space: nowrap; font: 8px/1.4 monospace; letter-spacing: .08em; } #kin-full-journey .kfp-finale-footer-label { font-size: 8px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } #kin-full-journey .kfp-socials--footer .kfp-social-link { color: rgba(235,225,199,.5); } #kin-full-journey .kfp-socials--footer .kfp-social-link:focus-visible { color: var(--green); } @media (hover: hover) { #kin-full-journey .kfp-socials--footer .kfp-social-link:hover { color: var(--green); } } #kin-full-journey .kfp-article-snapshot { position: absolute; z-index: 19; left: 50%; top: 51%; width: auto; height: min(860px, 82svh); max-width: calc(100vw - 48px); aspect-ratio: 1302 / 1472; margin: 0; overflow: hidden; color: #171717; background: transparent; border: 0; box-shadow: 0 44px 120px rgba(0, 0, 0, .48); opacity: 0; transform: translate(-50%, -50%) scale(.94); transform-origin: 50% 86%; pointer-events: none; will-change: opacity, transform; } #kin-full-journey .kfp-article-source-image { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; } #kin-full-journey .kfp-article-sitebar, #kin-full-journey .kfp-article-layout { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #kin-full-journey .kfp-article-sitebar { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 3.2vw, 48px); color: #f7f7f4; background: #111; border-bottom: 5px solid #e12727; } #kin-full-journey .kfp-article-masthead { font-family: Arial, Helvetica, sans-serif; font-size: clamp(23px, 2.25vw, 36px); font-weight: 800; font-style: italic; letter-spacing: -.055em; } #kin-full-journey .kfp-article-domain { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .62; } #kin-full-journey .kfp-article-layout { height: calc(100% - 66px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: stretch; } #kin-full-journey .kfp-article-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4.2vw, 64px); } #kin-full-journey .kfp-article-section { margin: 0 0 18px; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #d32626; } #kin-full-journey .kfp-article-headline { margin: 0; max-width: 18ch; font-family: Arial, Helvetica, sans-serif; font-size: clamp(30px, 3.05vw, 49px); font-weight: 760; line-height: 1.01; letter-spacing: -.052em; } #kin-full-journey .kfp-article-dek { margin: 22px 0 0; max-width: 51ch; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; color: rgba(23, 23, 23, .67); } #kin-full-journey .kfp-article-byline { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(23, 23, 23, .16); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(23, 23, 23, .58); } #kin-full-journey .kfp-article-byline strong { color: #171717; font-weight: 750; } #kin-full-journey .kfp-article-byline span { margin: 0 9px; opacity: .5; } #kin-full-journey .kfp-article-figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #d7d9da; } #kin-full-journey .kfp-article-hero-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 48% 50%; transform: scale(1.02); will-change: transform; } #kin-full-journey .kfp-article-figure figcaption { position: absolute; right: 15px; bottom: 13px; margin: 0; padding: 5px 7px; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 247, 244, .8); background: rgba(17, 17, 17, .58); } #kin-full-journey .kfp-contract { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* Swap every plate for its phone variant. Aliasing the var rather than restating a url() keeps the bundle script's last-wins parsing intact, so the superseded assets/markus PNGs still stay out of the shipped set. */ @media (max-width: 860px) { #kin-full-journey { --img-hero-earth: var(--img-mobile-hero-earth); --img-entrepreneur-snapshot: var(--img-mobile-entrepreneur-snapshot); --img-vanness-stadium: var(--img-mobile-vanness-stadium); --img-vanness-return: var(--img-mobile-vanness-return); --img-vanness-prayer: var(--img-mobile-vanness-prayer); --img-vanness-fashion: var(--img-mobile-vanness-fashion); --img-mike-medicine-clean: var(--img-mobile-mike-medicine-clean); --img-mike-bodybuilding: var(--img-mobile-mike-bodybuilding); --img-mike-yoga: var(--img-mobile-mike-yoga); --img-mike-fittime: var(--img-mobile-mike-fittime); --img-mike-food: var(--img-mobile-mike-food); --img-mike-jiujitsu: var(--img-mobile-mike-jiujitsu); --img-mike-teaching: var(--img-mobile-mike-teaching); --img-markus-germany: var(--img-mobile-markus-germany); --img-markus-xyo: var(--img-mobile-markus-xyo); --img-markus-integrity: var(--img-mobile-markus-integrity); --img-markus-proof: var(--img-mobile-markus-proof); --img-poramin-crypto: var(--img-mobile-poramin-crypto); --img-poramin-satang: var(--img-mobile-poramin-satang); --img-poramin-acquisition: var(--img-mobile-poramin-acquisition); --img-poramin-meditation: var(--img-mobile-poramin-meditation); --img-poramin-cyber: var(--img-mobile-poramin-cyber); --img-mantak-garden: var(--img-mobile-mantak-garden); --img-mantak-universal: var(--img-mobile-mantak-universal); --img-mantak-darkroom: var(--img-mobile-mantak-darkroom); --img-mantak-global: var(--img-mobile-mantak-global); --img-cta-vanness: var(--img-mobile-cta-vanness); --img-cta-mantak: var(--img-mobile-cta-mantak); --img-cta-poramin: var(--img-mobile-cta-poramin); } } @media (max-width: 640px) { #kin-full-journey { --stage-h: 100svh; min-height: 0; } #kin-full-journey .kfp-space { height: 2760svh; } #kin-full-journey .kfp-nav { top: max(18px, calc(env(safe-area-inset-top) + 8px)); left: max(20px, calc(env(safe-area-inset-left) + 14px)); right: max(20px, calc(env(safe-area-inset-right) + 14px)); } #kin-full-journey .kfp-theme { display:none; } #kin-full-journey .kfp-nav-end { gap: 0; } #kin-full-journey .kfp-socials--header { gap: 3px; } #kin-full-journey .kfp-socials--header .kfp-social-link { width: 26px; height: 26px; } #kin-full-journey .kfp-progress { position: absolute; top: 31px; left: 0; right: 0; } #kin-full-journey .kfp-track { width: 100%; } #kin-full-journey .kfp-count { display:none; } /* The X icon's 40px tap target ended exactly where the toggle began, so a thumb aiming at X could land on the language switch instead. The row has slack, so this buys separation rather than shrinking either control. */ #kin-full-journey .kfp-lang { margin-right: 0; margin-left: 14px; padding: 5px 7px; font-size: 10px; letter-spacing: .06em; gap: 4px; } #kin-full-journey .kfp-copy { left: max(22px, calc(env(safe-area-inset-left) + 16px)); right: max(22px, calc(env(safe-area-inset-right) + 16px)); bottom: max(58px, calc(env(safe-area-inset-bottom) + 42px)); width:auto; } #kin-full-journey .kfp-title { max-width: 8.4ch; font-size: clamp(43px, 14.5vw, 67px); } #kin-full-journey .kfp-quote { max-width: 30ch; font-size: 16px; } #kin-full-journey .kfp-scene::before { --position: 58% 50%; } #kin-full-journey .kfp-scene[data-guest="vanness"]::before { --position: 55% 50%; } #kin-full-journey .kfp-scene[data-guest="mike"]::before { --position: 53% 50%; } #kin-full-journey .kfp-mike-teaching::before { --position: 35% 50%; } #kin-full-journey .kfp-scene::before { background-position: var(--mobile-position, var(--position, 50% 50%)); } #kin-full-journey .kfp-scene-ember { left: calc(var(--heart-mobile-x) + var(--x, 0%)); top: calc(var(--heart-mobile-y) + var(--y, 0%)); } #kin-full-journey .kfp-hero-earth { right: -25%; bottom: -10%; width: min(126vw, 624px); height: min(60svh, 624px); opacity: .72; } #kin-full-journey .kfp-scene[data-guest="markus"]::before { --position: 65% 50%; } #kin-full-journey .kfp-scene[data-guest="poramin"]::before { --position: 61% 50%; } #kin-full-journey .kfp-scene[data-guest="mantak"]::before { --position: 62% 50%; } #kin-full-journey .kfp-poramin-proof { left: 50%; /* sits at his neck, just below the chin, so the headline never covers his face */ top: 52%; width: 88vw; text-align: center; } #kin-full-journey .kfp-poramin-proof-source { margin-bottom: 8px; font-size: 8px; } #kin-full-journey .kfp-poramin-proof-headline { max-width: 20ch; margin-inline: auto; font-size: clamp(25px, 7.2vw, 34px); } #kin-full-journey .kfp-poramin-proof-dek { display: none; } #kin-full-journey .kfp-proof-layer { width: 86vw; } #kin-full-journey .kfp-proof-layer--fittime { right: 7%; top: 15%; } #kin-full-journey .kfp-proof-layer--markus-origin { left: 7%; top: 14%; width: 86vw; } #kin-full-journey .kfp-proof-layer--xyo { left: 7%; top: 14%; width: 82vw; } #kin-full-journey .kfp-proof-layer__source { margin-bottom: 7px; font-size: 8px; } #kin-full-journey .kfp-proof-layer__headline { font-size: clamp(31px, 10vw, 46px); } #kin-full-journey .kfp-proof-layer__detail { max-width: 34ch; margin-top: 10px; font-size: 9.5px; } #kin-full-journey .kfp-proof-layer--xyo .kfp-proof-layer__detail { margin-top: 6px; font-size: 14px; } #kin-full-journey .kfp-proof-layer--mantak .kfp-proof-layer__detail { max-width: 26ch; margin-top: 8px; font-size: 15px; } #kin-full-journey .kfp-finale-wordmark { top: 42%; width: min(86vw, 430px); } /* Android flicker, 20 Aug. The grain is a full-screen layer with mix-blend-mode: soft-light sitting under the header in the same stacking context. A blended layer has to recomposite against everything beneath it, so while the finale animates the galaxy, the lights, the wordmark and three cards at once, the entire viewport -- header included -- was re-rasterising every frame. At 7.5% opacity it is imperceptible on a phone; it stays on desktop, where it costs nothing. */ #kin-full-journey .kfp-noise { display: none; } /* The finale stays out of any 3D rendering context on a phone: perspective and preserve-3d were expensive on Android when the collage used them. */ #kin-full-journey .kfp-finale-cta { perspective: none; padding-inline: 0; } /* Give the header its own layer so it is never caught in a repaint of the stage beneath it. */ #kin-full-journey .kfp-nav { transform: translateZ(0); } /* Carol's mobile layout: the panels stack, each at its full 4:5 height. */ #kin-full-journey .kfp-cta-copy, #kin-full-journey .kfp-talks-label, #kin-full-journey .kfp-talks-grid { margin-inline: 22px; } #kin-full-journey .kfp-cta-copy { margin-bottom: 28px; } #kin-full-journey .kfp-cta-kicker { margin-bottom: 10px; font-size: 8px; } #kin-full-journey .kfp-cta-title { max-width: 13ch; font-size: clamp(34px, 10vw, 44px); line-height: 1; } #kin-full-journey .kfp-cta-caption { margin-top: 14px; font-size: 14px; line-height: 1.55; } #kin-full-journey .kfp-talks-platforms { margin-top: 12px; font-size: 8px; letter-spacing: .14em; } #kin-full-journey .kfp-talks-label { padding-top: 12px; margin-bottom: 14px; font-size: 8px; letter-spacing: .14em; } #kin-full-journey .kfp-talks-grid { grid-template-columns: 1fr; } #kin-full-journey .kfp-talk-meta { gap: 6px; } #kin-full-journey .kfp-talk-name { font-size: 24px; } #kin-full-journey .kfp-finale-footer-label { display: none; } #kin-full-journey .kfp-finale-footer .kfp-socials { grid-column: 1 / -1; justify-self: center; } #kin-full-journey .kfp-article-snapshot { top: 48%; width: calc(100% - 28px); height: auto; transform-origin: 50% 82%; /* A 120px blur re-rasterised on every scale step is the single most expensive thing in this beat on a phone. Tighter blur, same read. */ box-shadow: 0 18px 44px rgba(0, 0, 0, .5); } #kin-full-journey .kfp-article-sitebar { height: 50px; padding: 0 16px; border-bottom-width: 4px; } #kin-full-journey .kfp-article-masthead { font-size: 23px; } #kin-full-journey .kfp-article-domain { display: none; } #kin-full-journey .kfp-article-layout { height: calc(100% - 50px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } #kin-full-journey .kfp-article-copy { padding: 20px 18px 18px; } #kin-full-journey .kfp-article-section { margin-bottom: 10px; font-size: 8px; } #kin-full-journey .kfp-article-headline { max-width: none; font-size: clamp(24px, 7.5vw, 31px); line-height: 1.02; } #kin-full-journey .kfp-article-dek { display: none; } #kin-full-journey .kfp-article-byline { margin-top: 15px; padding-top: 12px; font-size: 8.5px; } #kin-full-journey .kfp-article-hero-image { object-position: 50% 42%; } } /* Short landscape screens: a smaller heading; the panels scroll as usual. */ @media (max-height: 500px) and (orientation: landscape) { #kin-full-journey .kfp-finale-cta { padding-top: calc(var(--finale-top) + 18px); } #kin-full-journey .kfp-cta-title { max-width: none; font-size: clamp(26px, 8svh, 36px); line-height: 1; } #kin-full-journey .kfp-talk-name { font-size: 20px; } #kin-full-journey .kfp-finale-footer-label { display: none; } #kin-full-journey .kfp-finale-footer .kfp-socials { grid-column: 1 / -1; justify-self: center; } } @media (prefers-reduced-motion: reduce) { #kin-full-journey .kfp-scene::before { transform:scale(1.03) !important; } #kin-full-journey .kfp-noise { display:none; } #kin-full-journey .kfp-star { animation: none !important; } #kin-full-journey .kfp-hero-constellation::before, #kin-full-journey .kfp-galaxy i, #kin-full-journey .kfp-resolution-lights i { animation: none !important; } #kin-full-journey .kfp-finale-cta, #kin-full-journey .kfp-finale-wordmark, #kin-full-journey .kfp-cta-card, #kin-full-journey .kfp-cta-thumb, #kin-full-journey .kfp-talks, #kin-full-journey .kfp-poramin-proof, #kin-full-journey .kfp-proof-layer { transition: none !important; } } /* Current-tab underline in the handoff green (HK, 23 Sep 2026). */ .kin-page .kin-nav>nav a.current:after{background:#d4ff55} .kin-page .kin-nav{position:fixed;top:0;left:0;right:0;z-index:40;background:#080908} .kin-page main [id]{scroll-margin-top:88px} .kin-menu-toggle{display:none} .kin-menu-panel[hidden]{display:none!important} @media(max-width:1100px){ .kin-page main [id]{scroll-margin-top:72px} .kin-page .kin-nav.kin-menu-ready,#kin-full-journey .kfp-nav.kin-menu-ready{height:72px;padding:0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-rows:72px;gap:8px;background:#080908;z-index:40} .kin-page .kin-menu-ready .kin-tools{display:contents} .kin-page .kin-menu-ready .kin-tools>button,.kin-page .kin-menu-ready .micro-language,#kin-full-journey .kin-menu-ready .kfp-nav-end{grid-column:2;grid-row:1;justify-self:end} .kin-page .kin-menu-ready .kin-tools>button{min-height:44px} #kin-full-journey .kin-menu-ready .kfp-lang{min-height:44px;display:flex;align-items:center;box-sizing:border-box} .kin-page .kin-menu-ready .kin-logo,#kin-full-journey .kin-menu-ready .kfp-brand{gap:7px;min-width:0} .kin-page .kin-menu-ready .kin-logo span,#kin-full-journey .kin-menu-ready .kfp-brand span{font-size:7px;letter-spacing:0;white-space:nowrap} .kin-menu-ready .kin-menu-toggle{grid-column:3;grid-row:1;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #ebe1c740;border-radius:8px;background:transparent;color:#ebe1c7;cursor:pointer;pointer-events:auto} .kin-menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .kin-menu-cross,.kin-menu-toggle[aria-expanded=true] .kin-menu-bars{display:none} .kin-menu-toggle[aria-expanded=true] .kin-menu-cross{display:block} .kin-menu-toggle:focus-visible{outline:2px solid #d9ff43;outline-offset:3px} .kin-menu-ready .kin-menu-panel{position:absolute;top:72px;left:0;right:0;max-height:calc(100svh - 72px);overflow-y:auto;background:#10120f;border-bottom:1px solid #ebe1c740;box-shadow:0 16px 24px #0006;padding:20px 24px 24px;box-sizing:border-box;pointer-events:auto} .kin-page .kin-menu-panel>nav,#kin-full-journey .kin-menu-panel>.combined-nav{position:static;display:flex;flex-direction:column;align-items:stretch;gap:4px;transform:none;font:14px/1.4 Arial,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.04em} .kin-page .kin-menu-panel>nav a,#kin-full-journey .kin-menu-panel>.combined-nav a{display:flex;align-items:center;min-height:48px;color:#ebe1c7;text-decoration:none;opacity:.7} .kin-page .kin-menu-panel>nav a.current,#kin-full-journey .kin-menu-panel>.combined-nav a[aria-current]{opacity:1;color:#d4ff55} .kin-page .kin-menu-panel>nav a:after,#kin-full-journey .kin-menu-panel>.combined-nav a:after{display:none} .kin-page .kin-menu-panel>.kin-socials,#kin-full-journey .kin-menu-panel>.kfp-socials--header{position:static;display:flex;flex-direction:row;justify-content:flex-start;gap:14px;transform:none;margin-top:16px;padding-top:16px;border-top:1px solid #ebe1c720} .kin-page .kin-menu-panel .kfp-social-link,#kin-full-journey .kin-menu-panel .kfp-social-link{width:44px;height:44px} .kin-page.kin-mobile-navigation .micro-hero{height:auto;min-height:0;display:block;padding:128px 6vw 48px} .kin-page.kin-mobile-navigation .micro-chapter{top:100px;display:block} .kin-page.kin-mobile-navigation .micro-banner{position:relative;inset:auto;width:calc(100% + 12vw);max-width:none;height:auto;margin:0 -6vw 28px;object-fit:contain} .kin-page.kin-mobile-navigation .micro-title{position:relative;display:block} .kin-page.kin-mobile-navigation .micro-title>p{margin-top:24px} .kin-page.kin-mobile-navigation .micro-scroll{position:relative;left:auto;bottom:auto;margin-top:32px} .kin-page.kin-mobile-navigation .micro-count{display:none} } #kin-full-journey .kfp-nav{top:0;left:0;right:0;height:88px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;border-bottom:1px solid #ffffff18} #kin-full-journey .kfp-brand{display:flex;align-items:center;gap:12px;width:max-content;letter-spacing:normal} #kin-full-journey .kfp-brand b{font-size:24px;letter-spacing:-.08em} #kin-full-journey .kfp-brand span{font:7px/1.15 monospace;letter-spacing:.12em} #kin-full-journey .combined-nav{display:flex;gap:34px;font:9px/1 monospace;letter-spacing:.17em;text-transform:uppercase;pointer-events:auto} #kin-full-journey .combined-nav a{color:var(--cream);opacity:.55;text-decoration:none;position:relative} #kin-full-journey .combined-nav a[aria-current]{opacity:1} #kin-full-journey .combined-nav a[aria-current]:after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:1px;background:#d4ff55} #kin-full-journey .kfp-nav-end{justify-self:end;gap:26px} #kin-full-journey .kfp-progress{display:none} #kin-full-journey .kfp-socials--header{display:flex} #kin-full-journey .kfp-lang{border-radius:99px;padding:9px 12px} @media(max-width:1100px){#kin-full-journey .kfp-nav{height:154px;grid-template-columns:1fr auto;grid-template-rows:64px 42px 34px;gap:0 12px}#kin-full-journey .combined-nav{grid-row:3;grid-column:1/-1;justify-content:center;gap:26px}#kin-full-journey .combined-nav a[aria-current]:after{bottom:-9px}#kin-full-journey .kfp-nav-end{grid-row:1;grid-column:2}#kin-full-journey .kfp-socials--header{position:absolute;top:64px;left:50%;transform:translateX(-50%);gap:7px}#kin-full-journey .kfp-socials--header .kfp-social-link{width:40px;height:40px}}