1<!doctype html> 2<html lang="en"> 3<head> 4<meta charset="utf-8" /> 5<meta name="viewport" content="width=device-width, initial-scale=1" /> 6<title>Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit</title> 7<meta name="description" content="Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17â18 · Summit II Oct 24â25. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." /> 8<link rel="canonical" href="https://mirai-tech-city.vercel.app/" /> 9<link rel="alternate" hreflang="en" href="https://mirai-tech-city.vercel.app/" /> 10<link rel="alternate" hreflang="ja" href="https://mirai-tech-city.vercel.app/jp/" /> 11<link rel="alternate" hreflang="x-default" href="https://mirai-tech-city.vercel.app/" /> 12<meta property="og:site_name" content="Mirai Tech City" /> 13<meta property="og:locale" content="en_US" /> 14<meta property="og:type" content="website" /> 15<meta property="og:title" content="Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit" /> 16<meta property="og:description" content="Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17â18 · Summit II Oct 24â25. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." /> 17<meta property="og:image" content="https://mirai-tech-city.vercel.app/live_city_poster.jpg" /> 18<meta property="og:url" content="https://mirai-tech-city.vercel.app/" /> 19<meta name="twitter:card" content="summary_large_image" /> 20<meta name="twitter:title" content="Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit" /> 21<meta name="twitter:description" content="Japan's premier longevity biomedical popup city in Kobe. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." /> 22<meta name="twitter:image" content="https://mirai-tech-city.vercel.app/live_city_poster.jpg" /> 23<meta name="theme-color" content="#050506" /> 24<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23050506'/%3E%3Ctext x='50' y='72' font-size='62' font-family='Georgia' font-weight='bold' fill='%239be8f0' text-anchor='middle'%3Eæª%3C/text%3E%3C/svg%3E" /> 25<link rel="preload" href="kobe_harbor_night_poster.jpg" as="image" fetchpriority="high" /> 26<link rel="preconnect" href="https://fonts.googleapis.com" /> 27<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 28<link rel="preconnect" href="https://api.fontshare.com" /> 29<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin /> 30<!-- Font CSS loads without blocking render; both use display=swap so system 31 fallbacks paint first either way. noscript keeps fonts for no-JS visitors. --> 32<link href="https://api.fontshare.com/v2/css?f[]=switzer@400,700,800,900&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.media='all'" /> 33<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.media='all'" /> 34<noscript> 35 <link href="https://api.fontshare.com/v2/css?f[]=switzer@400,700,800,900&display=swap" rel="stylesheet" /> 36 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" /> 37</noscript>
38<script>window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };</script>
vendor: 1 bytes, line 38
38
39<script defer src="/_vercel/insights/script.js"></script>
vendor: 1 bytes, line 39
39
40<script> 41 // Launch control: change to true when the Summit + Hotel package is ready for the public landing page. 42 // showFashionShow â false hides the fashion show everywhere EXCEPT the agenda finale row: the section, 43 // the FAQ item, the package ledger line ([data-fashion] elements), and the copy variants in copy.js. 44 // To bring it back: flip to true AND restore "Fashion Show Oct 26" in the two meta descriptions above 45 // plus the Frontier Human Fashion Show subEvent in the JSON-LD below. 46 window.MIRAI_FLAGS = Object.freeze({ showSummitPackage: true, showFashionShow: false }); 47 if (!window.MIRAI_FLAGS.showSummitPackage) document.documentElement.classList.add('package-promo-hidden'); 48 if (!window.MIRAI_FLAGS.showFashionShow) document.documentElement.classList.add('fashion-hidden'); 49 // Kobe University logo use approval #3182: usage window ends Dec 15 2026. 50 // The [data-kobe-permit] block self-hides on Dec 15 JST â do NOT remove this 51 // gate or the logos without checking the approval notice first. 52 if (Date.now() >= new Date('2026-12-15T00:00:00+09:00').getTime()) document.documentElement.classList.add('kobe-permit-over'); 53</script>
vendor: 1 bytes, line 53
53
54<script src="copy.js"></script>
vendor: 1 bytes, line 54
54
55<script defer src="/posthog.js"></script>
vendor: 1 bytes, line 55
55
56<script defer src="/analytics.js"></script>
vendor: 1 bytes, line 56
56
57<script type="application/ld+json"> 58{ 59 "@context": "https://schema.org", 60 "@graph": [ 61 { 62 "@type": "EventSeries", 63 "@id": "https://mirai-tech-city.vercel.app/#event", 64 "name": "Mirai Tech City 2026", 65 "description": "Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17â18 · Summit II Oct 24â25 · Residency Oct 1â31.", 66 "url": "https://mirai-tech-city.vercel.app", 67 "startDate": "2026-10-01", 68 "endDate": "2026-10-31", 69 "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode", 70 "eventStatus": "https://schema.org/EventScheduled", 71 "location": { 72 "@type": "Place", 73 "name": "Port Island, Kobe Biomedical Innovation Cluster (KBIC)", 74 "address": { 75 "@type": "PostalAddress", 76 "addressLocality": "Kobe", 77 "addressRegion": "Hyogo", 78 "addressCountry": "JP" 79 } 80 }, 81 "organizer": { 82 "@type": "Organization", 83 "name": "Mirai Tech City", 84 "url": "https://mirai-tech-city.vercel.app" 85 }, 86 "subEvent": [ 87 { 88 "@type": "BusinessEvent", 89 "name": "Summit I: Eradicate Disease", 90 "startDate": "2026-10-17", 91 "endDate": "2026-10-18", 92 "description": "The Science & Tech Augmenting Life: therapeutics, longevity biotech, and disease eradication." 93 }, 94 { 95 "@type": "BusinessEvent", 96 "name": "Summit II: Extend the Healthspan", 97 "startDate": "2026-10-24", 98 "endDate": "2026-10-25", 99 "description": "Bridging East & West in longevity science, biomarkers, and rejuvenation biotechnology." 100 } 101 ], 102 "performer": [ 103 { 104 "@type": "Person", 105 "name": "Aubrey de Grey", 106 "jobTitle": "Biogerontologist & President", 107 "worksFor": { "@type": "Organization", "name": "LEV Foundation" }, 108 "knowsAbout": ["Longevity Biotechnology", "Rejuvenation Therapy", "SENS"] 109 }, 110 { 111 "@type": "Person", 112 "name": "Brian Kennedy", 113 "jobTitle": "Distinguished Professor & Director", 114 "worksFor": { "@type": "Organization", "name": "Centre for Healthy Longevity, NUS" }, 115 "knowsAbout": ["Aging Science", "Translational Longevity Research", "Biochemistry"] 116 }, 117 { 118 "@type": "Person", 119 "name": "Motoshi Hayano", 120 "jobTitle": "Associate Professor", 121 "worksFor": { "@type": "Organization", "name": "Keio University School of Medicine" }, 122 "knowsAbout": ["Epigenetic Reprogramming", "Ocular Gene Therapy", "Aging Mechanics"] 123 }, 124 { 125 "@type": "Person", 126 "name": "José Cordeiro", 127 "jobTitle": "Vice-Chair & Author", 128 "worksFor": { "@type": "Organization", "name": "Humanity+" }, 129 "knowsAbout": ["Transhumanism", "Life Extension", "The Death of Death"] 130 }, 131 { 132 "@type": "Person", 133 "name": "Sebastian Brunemeier", 134 "jobTitle": "Managing Partner", 135 "worksFor": { "@type": "Organization", "name": "Healthspan Capital" }, 136 "knowsAbout": ["Longevity Biotech Venture Capital", "Therapeutics"] 137 }, 138 { 139 "@type": "Person", 140 "name": "Irit Rappley, PhD", 141 "jobTitle": "VP of Research", 142 "knowsAbout": ["Molecular Biology", "Biomedical Longevity Research"] 143 }, 144 { 145 "@type": "Person", 146 "name": "Yuri Deigin", 147 "jobTitle": "CEO & Founder", 148 "worksFor": { "@type": "Organization", "name": "YouthBio Therapeutics" }, 149 "knowsAbout": ["Epigenetic Rejuvenation", "Gene Therapy"] 150 }, 151 { 152 "@type": "Person", 153 "name": "Yuki Hanyu", 154 "jobTitle": "Founder", 155 "worksFor": { "@type": "Organization", "name": "Shojinmeat Project / Cellular Agriculture Institute" }, 156 "knowsAbout": ["Cellular Agriculture", "Biotechnology"] 157 } 158 ] 159 } 160 ] 161} 162</script>
162 163<link rel="stylesheet" href="/nav.css" /> 164<style> 165 /* Metric-matched fallback while Switzer loads async: Arial scaled to 166 Switzer's measured advance widths (~0.976) so the swap doesn't reflow 167 the display headlines (CLS). */ 168 @font-face { 169 font-family: 'Switzer-fallback'; 170 src: local('Arial'), local('Helvetica Neue'); 171 size-adjust: 97.6%; 172 ascent-override: 100%; 173 descent-override: 25%; 174 line-gap-override: 0%; 175 } 176 :root { 177 --bg: #050506; 178 --ink: #f4f3f0; 179 --dim: rgba(244,243,240,.62); 180 --faint: rgba(244,243,240,.48); 181 --line: rgba(244,243,240,.14); 182 --accent: #9be8f0; 183 --accent-rgb: 155, 232, 240; 184 --font: 'Switzer', 'Switzer-fallback', 'Inter', -apple-system, sans-serif; 185 --mono: 'IBM Plex Mono', monospace; 186 } 187 * { margin: 0; padding: 0; box-sizing: border-box; } 188 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } 189 /* Paint the root too: mobile browsers reveal the html canvas when the 190 URL bar retracts, and an unset html background flashes white. */ 191 html { background: var(--bg); } 192 body { background: var(--bg); color: var(--ink); font-family: var(--font); overflow-x: hidden; } 193 .package-promo-fallback { display: none !important; } 194 html.package-promo-hidden [data-package-promo] { display: none !important; } 195 html.package-promo-hidden .package-promo-fallback { display: inline-block !important; } 196 html.fashion-hidden [data-fashion] { display: none !important; } 197 ::selection { background: var(--accent); color: #000; } 198 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } 199 .skip { position: fixed; top: 12px; left: 4vw; z-index: 70; background: var(--bg); color: var(--accent); 200 font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; 201 text-decoration: none; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 3px; padding: 12px 16px; 202 transform: translateY(-200%); } 203 .skip:focus { transform: none; } 204 205 .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } 206 .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); } 207 section { position: relative; padding: 110px 6vw; max-width: 1440px; margin: 0 auto; } 208 h2.big { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; 209 font-size: clamp(34px, 5.2vw, 76px); line-height: .98; margin: 18px 0 10px; } 210 .rule { border: 0; border-top: 1px solid var(--line); max-width: calc(1440px - 12vw); margin: 0 auto; } 211 a { color: inherit; } 212 213 /* reveal-on-scroll */ 214 .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } 215 .rv.in { opacity: 1; transform: none; } 216 @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } 217 218 .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; 219 background: var(--ink); color: #0a0a0c !important; text-decoration: none; 220 padding: 12px 26px; border-radius: 3px; font-family: var(--mono); font-size: 11px; 221 letter-spacing: .2em; text-transform: uppercase; font-weight: 500; white-space: nowrap; 222 transition: transform .2s, box-shadow .2s; } 223 .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(244,243,240,.22); } 224 .btn.accent { background: var(--accent); } 225 .btn.ghost { background: transparent; color: var(--ink) !important; border: 1px solid rgba(244,243,240,.4); } 226 .btn.ghost:hover { border-color: var(--ink); } 227 .daruma { height: 24px; width: auto; vertical-align: middle; opacity: .55; transition: opacity .3s, transform .3s; cursor: help; } 228 .daruma:hover { opacity: 1; transform: translateY(-1px); } 229 .daruma.foot { height: 46px; opacity: .6; cursor: pointer; } 230 @keyframes okiagari { 0% { transform: rotate(0) } 22% { transform: rotate(-16deg) } 48% { transform: rotate(11deg) } 70% { transform: rotate(-6deg) } 88% { transform: rotate(2deg) } 100% { transform: rotate(0) } } 231 .daruma.wobble { animation: okiagari 1s ease-out; transform-origin: 50% 88%; } 232 @media (prefers-reduced-motion: reduce) { .daruma.wobble { animation: none; } } 233 234 /* ââ hero offer ââ */ 235 .hero { position: relative; height: calc(100svh - 48px); min-height: 620px; overflow: hidden; max-width: none; padding: 0; } 236 .heroMedia, .heroPoster, .heroVideo { position: absolute; inset: 0; width: 100%; height: 100%; } 237 .heroPoster, .heroVideo { object-fit: cover; object-position: center 42%; } 238 .heroVideo { opacity: 0; transition: opacity .45s ease; } 239 .heroVideo.playing { opacity: 1; } 240 .heroVeil { position: absolute; inset: 0; pointer-events: none; 241 background: linear-gradient(rgba(5,5,6,.24), rgba(5,5,6,.24)), 242 linear-gradient(to top, rgba(5,5,6,.88), rgba(5,5,6,.12) 62%
242), 243 linear-gradient(105deg, rgba(5,5,6,.68) 0%, transparent 58%); } 244 .heroContent { position: absolute; left: 6vw; right: 6vw; bottom: clamp(76px, 9vh, 96px); z-index: 2; max-width: 1120px; } 245 /* Size so the longest rotating line ("of augmentation" + caret, ~10em) 246 stays on one line inside .heroContent (88vw, max 1120px); otherwise the 247 h1 grows a line for the long words and the hero jumps between words. */ 248 .heroContent h1 { font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; 249 font-size: clamp(55px, 8.2vw, 110px); line-height: .88; color: var(--ink); max-width: none; } 250 .heroContent h1 span { display: block; } 251 /* Rotating word: accent color, block cursor at the end of the line. The 252 cursor is solid while typing/deleting and blinks only while a word holds. */ 253 .heroRot, .heroDot { font-style: normal; } 254 .heroRot { color: var(--accent); } 255 .heroDot { transition: opacity .2s; } 256 .heroLine::after { content: ''; display: inline-block; width: .42em; height: .72em; margin-left: .08em; 257 vertical-align: -.03em; background: var(--accent); box-shadow: 0 0 18px rgba(155,232,240,.45); 258 animation: heroCaret 1.06s steps(1, end) infinite; } 259 .heroLine.typing::after { animation: none; } 260 .heroLine.typing .heroDot { opacity: 0; } 261 @keyframes heroCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } 262 @media (prefers-reduced-motion: reduce) { .heroLine::after { display: none; } } 263 .heroLead { max-width: 68ch; margin-top: 22px; color: rgba(244,243,240,.92); 264 font-size: clamp(16px, 1.45vw, 19px); line-height: 1.5; text-shadow: 0 1px 18px rgba(0,0,0,.7); } 265 .heroWhere { margin-top: 22px; color: var(--ink); font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; 266 letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; text-shadow: 0 1px 18px rgba(0,0,0,.7); } 267 .heroWhere b { color: var(--accent); font-weight: 500; } 268 .heroActions { display: flex; align-items: flex-start; margin-top: 28px; } 269 .heroActions .btn { min-width: 210px; padding: 16px 40px; font-family: var(--font); font-size: 14px; 270 font-weight: 800; letter-spacing: .14em; text-align: center; } 271 .heroJpRow { margin-top: 14px; } 272 .heroJp { display: inline-block; padding: 6px 0; color: rgba(244,243,240,.86); font-size: 14px; font-weight: 500; 273 letter-spacing: .04em; text-decoration: none; text-shadow: 0 1px 14px rgba(0,0,0,.8); border-bottom: 1px solid rgba(244,243,240,.35); } 274 .heroJp:hover, .heroJp:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } 275 .heroContinue { position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 3; 276 min-height: 44px; display: inline-flex; align-items: center; transform: translateX(-50%); 277 font-size: 28px; font-weight: 300; line-height: 1; color: rgba(244,243,240,.82); text-decoration: none; 278 text-shadow: 0 1px 8px rgba(0,0,0,.8); animation: heroContinueBob 2.4s ease-in-out 3; } 279 .heroContinue:hover { color: var(--accent); } 280 @keyframes heroContinueBob { 281 0%, 100% { transform: translate(-50%, 0); } 282 50% { transform: translate(-50%, 4px); } 283 } 284 @media (prefers-reduced-motion: reduce) { .heroContinue { animation: none; } } 285 @media (max-width: 760px) { 286 .hero { min-height: 560px; } 287 .heroContent { bottom: 62px; } 288 .heroContent h1 { font-size: clamp(28px, 8.6vw, 60px); letter-spacing: -.025em; } 289 .heroLead { max-width: 39ch; margin-top: 14px; font-size: 15px; line-height: 1.42; } 290 .heroWhere { margin-top: 14px; font-size: 14px; letter-spacing: .1em; } 291 .heroActions { margin-top: 18px; } 292 .heroActions .btn { min-width: 0; padding: 14px 24px; font-size: 13px; } 293 .heroJpRow { margin-top: 8px; } 294 .heroJp { font-size: 13px; } 295 } 296 @media (max-width: 420px) { 297 .heroContent { left: 5vw; right: 5vw; } 298 .heroActions .btn { width: 100%; } 299 } 300 @media (max-width: 380px) and (max-height: 640px) { 301 .hero { height: 568px; min-height: 568px; } 302 .heroContent { top: 80px; bottom: auto; } 303 .heroContent h1 { font-size: 34px; line-height: .86; } 304 .heroLead { margin-top: 10px; font-size: 13px; line-height: 1.34; } 305 .heroWhere { margin-top: 10px; font-size: 12px; } 306 .heroActions { margin-top: 12px; } 307 .heroJpRow { margin-top: 6px; } 308 .heroContinue { font-size: 22px; } 309 } 310 @media (max-height: 540px) and (min-width: 560px) { 311 .hero { height: 100svh; min-height: 375px; } 312 .heroContent { top: 92px; bottom: auto; } 313 .heroContent h1 { max-width: none; font-size: clamp(42px, 6.4vw, 58px); line-height: .86; white-space: nowrap; } 314 .heroLead { max-width: 78ch; margin-top: 10px; font-size: 12px; line-height: 1.35; } 315 .heroWhere { margin-top: 8px; font-size: 12px; } 316 .heroActions { margin-top: 10px; } 317 .heroJpRow { margin-top: 6px; } 318 .heroContinue { display: none; } 319 } 320 321 /* ââ intro + pillars: Accelerate / Inspire / Live ("Drift Gauge") ââ 322 Giant titles ride over slow-drifting outlined-kanji marquee bands. 323 The bands are 100vw and absolutely centered, so #pillars clips them 324 with overflow:hidden â do not remove it or the smoke test's 325 horizontal-overflow assertion fails. Kanji renders from system JP 326 fonts; the letter-split entrance is wired after applyCopy(). */ 327 #pillars { padding-bottom: 40px; overflow: hidden; }
328 /* intro statement: "Brodovitch Cascade" â five-line lockup, spans from copy.js. 329 Lines rise staggered when the page's .rv observer adds .in to the <p>. */ 330 .msl-lockup { max-width: 1100px; margin: 0 0 76px; display: flex; flex-direction: column; } 331 .msl-line { opacity: 0; transform: translateY(22px); 332 transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } 333 .msl-lockup.in .msl-line { opacity: 1; transform: none; } 334 .msl-line:nth-child(2) { transition-delay: .08s; } 335 .msl-line:nth-child(3) { transition-delay: .16s; } 336 .msl-line:nth-child(4) { transition-delay: .24s; } 337 .msl-line:nth-child(5) { transition-delay: .32s; } 338 .msl-mono { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 400; 339 letter-spacing: .38em; text-transform: uppercase; color: var(--faint); margin-bottom: clamp(.6rem, 1.4vh, 1.1rem); } 340 .msl-subject { font-size: clamp(34px, 7.5vw, 84px); font-weight: 900; text-transform: uppercase; 341 letter-spacing: -.03em; line-height: .92; margin-left: -.06em; } 342 .msl-bridge { font-size: clamp(17px, 2.3vw, 26px); font-weight: 500; line-height: 1.35; color: var(--dim); 343 max-width: 26ch; padding-left: clamp(1.5rem, 11vw, 10rem); margin: clamp(.9rem, 2.2vh, 1.6rem) 0; } 344 .msl-bridge em { font-style: normal; font-weight: 300; color: var(--faint); } 345 .msl-payoff { font-size: clamp(27px, 9vw, 100px); font-weight: 900; text-transform: uppercase; 346 letter-spacing: -.035em; line-height: .92; margin-left: -.06em; color: var(--accent); white-space: nowrap; } 347 .msl-payoff--shift { margin-left: clamp(.75rem, 12vw, 12rem); } 348 @media (max-width: 380px) { .msl-payoff { white-space: normal; letter-spacing: -.02em; } } 349 /* Below ~1180px the shifted payoff line would run past the viewport edge and 350 be clipped by the section; let it wrap inside the column instead. */ 351 @media (max-width: 1180px) { .msl-payoff.msl-payoff--shift { white-space: normal; 352 max-width: calc(100% - clamp(.75rem, 12vw, 12rem)); } } 353 /* Moji-mado: after the ink entrance, the payoff lines drain and the 354 Fuji-dawn plate floods the letterforms (background-clip: text). The 355 image is declared only in the .in state so it never loads above the 356 fold; engines without clip support keep the flat accent fill. */ 357 .msl-payoff { width: max-content; max-width: 100%; -webkit-text-fill-color: var(--accent); } 358 .msl-line.msl-payoff { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), 359 color 1.4s ease, -webkit-text-fill-color 1.4s ease, filter .5s ease; 360 transition-delay: .24s, .24s, 1.25s, 1.25s, 0s; } 361 .msl-line.msl-payoff--shift { transition-delay: .32s, .32s, 1.4s, 1.4s, 0s; } 362 @supports ((-webkit-background-clip: text) or (background-clip: text)) { 363 .msl-lockup.in .msl-payoff { 364 background-image: linear-gradient(rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.04)), url("img/pillar-fuji-dawn.webp"); 365 background-size: cover; background-position: center 52%; 366 -webkit-background-clip: text; background-clip: text; 367 color: transparent; -webkit-text-fill-color: transparent; 368 filter: saturate(.95) contrast(1.1) brightness(1.34); } 369 .msl-lockup.in .msl-payoff--shift { background-position: center 66%; } 370 } 371 .knt-pillar { position: relative; border-top: 1px solid var(--line); padding: 30px 0 44px; } 372 .knt-meta { display: flex; gap: 16px; align-items: baseline; font-family: var(--mono); 373 font-size: 10px; letter-spacing: .26em; text-transform: uppercase; } 374 .knt-num { color: var(--accent); } 375 .knt-gloss { color: var(--faint); } 376 .knt-p2 .knt-meta { justify-content: flex-end; } 377 .knt-stage { position: relative; margin-top: 12px; } 378 .knt-band { position: absolute; top: 50%; left: 50%; width: 100vw; transform: translate(-50%,-50%); 379 overflow: hidden; pointer-events: none; user-select: none; } 380 .knt-track { display: flex; width: max-content; animation: kntDrift 70s linear infinite; } 381 .knt-band span { display: block; white-space: nowrap; font-weight: 800; line-height: 1; 382 font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif; 383 font-size: clamp(56px, 13vw, 190px); color: transparent; -webkit-text-stroke: 1px rgba(244,243,240,.13); } 384 .knt-band i { font-style: normal; margin-right: .5em; } 385 .knt-band i:nth-child(4n) { -webkit-text-stroke-color: rgba(var(--accent-rgb),.22); } 386 @keyframes kntDrift { to { transform: translateX(-50%); } } 387 .knt-p2 .knt-track { animation-duration: 90s; animation-direction: reverse; } 388 .knt-p3 .knt-track { animation-duration: 60s; } 389 .knt-pillar:hover .knt-track, .knt-pillar:focus-within .knt-track { animation-play-state: paused; } 390 .knt-title { position: relative; margin: 0; overflow: hidden; padding: .05em 0; 391 font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; 392 font-size: clamp(52px, 10.5vw, 150px); line-height: .92; } 393 .knt-p2 .knt-title { text-align: right; } 394 .knt-title i { font-style: normal; display: inline-block; transform: translateY(115%); 395 transition: transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i)*45ms); } 396 .knt-pillar.in .knt-title i { transform: none; } 397 .knt-list { list-style: none; margin: 24px 0 0; padding: 0; max-width: 56ch; } 398 .knt-p1 .knt-list, .knt-p3 .knt-list { margin-left: auto; } 399 /* Harimaze prints: mounted photos pasted into the ledger's empty corner. 400 In-flow grid (no absolute pinning) so overlap is impossible at any 401 width; the pinned look comes from rotation, mounts, and tape. */ 402 .knt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56ch); 403 gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 24px; } 404 .knt-row .knt-list { margin-top: 0; } 405 .knt-p2 .knt-row { grid-template-columns: minmax(0, 56ch) minmax(0, 1fr); } 406 .knt-p2 .knt-chips { order: 2; justify-content: flex-end; } 407 .knt-p2 .knt-row .knt-list { order: 1; } 408 .knt-chips { display: flex; gap: 20px; align-items: flex-start; padding-top: 8px; } 409 .knt-chip { position: relative; margin: 0; flex: none; width: clamp(140px, 17vw, 230px); 410 background: #0c0c0e; border: 1px solid var(--line); padding: 7px 7px 0; 411 box-shadow: 0 24px 48px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4); transform: rotate(var(--r)); } 412 .knt-p2 .knt-chip { width: clamp(180px, 20vw, 260px); } 413 .knt-chip img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; 414 filter: saturate(.75) contrast(1.08); opacity: .9; border: 1px solid rgba(244,243,240,.07); } 415 .knt-chip--wide img { aspect-ratio: 3/2; } 416 .knt-chip--tall img { aspect-ratio: 3/4; } 417 .knt-chip figcaption { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; 418 text-transform: uppercase; color: var(--faint); padding: 8px 2px 9px; white-space: nowrap; 419 overflow: hidden; text-overflow: ellipsis; } 420 .knt-chip figcaption b { font-weight: 400; color: var(--accent); margin-right: .7em; } 421 .knt-chip--tape::before { content: ''; position: absolute; top: -9px; left: 50%; 422 width: 56px; height: 17px; transform: translateX(-50%) rotate(-2deg); 423 background: rgba(244,243,240,.08); border: 1px solid rgba(244,243,240,.05); } 424 .knt-chips .knt-chip:nth-child(2) { margin-top: 30px; margin-left: -26px; } 425 .knt-pillar .knt-chip { opacity: 0; transform: translateY(18px) rotate(calc(var(--r) * 2.4)); 426 transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } 427 .knt-pillar .knt-chip:nth-child(2) { transition-delay: .14s; } 428 .knt-pillar.in .knt-chip { opacity: 1; transform: rotate(var(--r)); transition-delay: .5s; } 429 .knt-pillar.in .knt-chip:nth-child(2) { transition-delay: .64s; } 430 .knt-list li { position: relative; padding: 14px 0 14px 28px; color: var(--dim); 431 font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; } 432 .knt-list li::before { content: 'â'; position: absolute; left: 0; top: 14px; 433 font-family: var(--mono); font-size: 14px; color: var(--accent); } 434 .knt-list li + li { border-top: 1px solid var(--line); } 435 .knt-list b { color: var(--ink); font-weight: 650; } 436 .knt-list a { color: var(--ink); font-weight: 650; text-decoration: underline; 437 text-decoration-color: var(--accent); text-underline-offset: 4px; } 438 .knt-list a:hover { color: var(--accent); } 439 .knt-list a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } 440 @media (max-width: 700px) { 441 .msl-lockup { margin-bottom: 52px; } 442 .knt-pillar { padding: 24px 0 34px; } 443 .knt-p2 .knt-meta { justify-content: flex-start; } 444 .knt-title, .knt-p2 .knt-title { text-align: left; letter-spacing: -.035em; 445 font-size: clamp(38px, 13.5vw, 64px); } 446 .knt-band span { font-size: clamp(48px, 20vw, 90px); } 447 .knt-list, .knt-p1 .knt-list, .knt-p3 .knt-list { margin-left: 0; max-width: none; } 448 .knt-row, .knt-p2 .knt-row { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; } 449 .knt-chips, .knt-p2 .knt-chips { order: 2; gap: 14px; padding-top: 20px; justify-content: flex-start; } 450 .knt-row .knt-list, .knt-p2 .knt-row .knt-list { order: 1; } 451 .knt-chip, .knt-p2 .knt-chip { width: 47%; } 452 .knt-chips .knt-chip:nth-child(2) { margin: 18px 0 0 0; } 453 .knt-list li { padding: 12px 0 12px 24px; font-size: 15px; } 454 .knt-list li::before { top: 12px; } 455 } 456 @media (prefers-reduced-motion: reduce) { 457 .knt-track { animation: none; } 458 .knt-title i { transform: none; transition: none; } 459 .msl-line { opacity: 1; transform: none; transition: none; } 460 .knt-pillar .knt-chip { opacity: 1; transform: rotate(var(--r)); transition: none; } 461 } 462 463 /* ââ why japan: "Kessai-ran" approval record ââ 464 The proof band as a stamped ringi-sho document: PMDA / AMED / KBIC 465 press vermilion hanko onto the numbers they certify. Vermilion 466 (--verm) is reserved for the seals â never reuse it elsewhere. 467 Entrance keys off the section's own .rv â .in from the page observer. */ 468 .hkb { --verm: #d0442c; } 469 .hkb-doc { max-width: 1180px; margin: 0 auto; } 470 .hkb-head { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; 471 border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); 472 padding: 10px 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; 473 text-transform: uppercase; color: var(--faint); } 474 .hkb-head b { font-weight: 400; color: var(--dim); } 475 .hkb-claim { margin: clamp(26px, 3.6vh, 40px) 0 10px; font-weight: 900; text-transform: uppercase; 476 letter-spacing: -.03em; line-height: .95; font-size: clamp(30px, 5.4vw, 72px); } 477 .hkb-cl { display: block; margin-left: -.05em; } 478 .hkb-cl2 { margin-left: clamp(.75rem, 7vw, 7rem); } 479 .hkb-gloss { font-family: var(--mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: .3em; 480 color: var(--faint); margin: 0 0 clamp(22px, 3.4vh, 36px) clamp(.85rem, 7.1vw, 7.1rem); } 481 .hkb-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); 482 border: 1px solid var(--line); } 483 .hkb-cell { position: relative; padding: 18px 20px 22px; min-height: clamp(150px, 20vh, 190px); } 484 .hkb-cell + .hkb-cell { border-left: 1px solid var(--line); } 485 .hkb-mach { margin: 0; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .18em; 486 text-transform: uppercase; color: var(--faint); line-height: 1.7; 487 max-width: calc(100% - clamp(58px, 6vw, 80px)); } 488 .hkb-mach b { font-weight: 400; color: var(--dim); } 489 .hkb-stat { margin-top: 14px; font-size: clamp(38px, 3.8vw, 56px); font-weight: 900; 490 letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } 491 .hkb-qual { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } 492 .hkb-fact { margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; } 493 .hkb-seal { position: absolute; top: 34px; right: 16px; width: clamp(58px, 6vw, 80px); 494 color: var(--verm); pointer-events: none; user-select: none; } 495 .hkb-seal svg { display: block; width: 100%; height: auto; } 496 .hkb-foot { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; 497 border-top: 1px solid var(--line); margin-top: clamp(20px, 3vh, 30px); padding-top: 16px; } 498 .hkb-foot > span:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; 499 text-transform: uppercase; color: var(--faint); } 500 .hkb-link { color: var(--ink); font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); 501 text-decoration: none; letter-spacing: -.01em; } 502 .hkb-link em { font-style: normal;
502 color: var(--accent); } 503 .hkb-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; } 504 .hkb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } 505 .hkb .hkb-cl, .hkb .hkb-gloss, .hkb .hkb-head, .hkb .hkb-foot { opacity: 0; transform: translateY(16px); 506 transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } 507 .hkb .hkb-cell { opacity: 0; transform: translateY(14px); 508 transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); } 509 .hkb.in .hkb-head, .hkb.in .hkb-cl, .hkb.in .hkb-gloss, .hkb.in .hkb-cell, .hkb.in .hkb-foot { 510 opacity: 1; transform: none; } 511 .hkb.in .hkb-cl2 { transition-delay: .07s; } 512 .hkb.in .hkb-gloss { transition-delay: .14s; } 513 .hkb.in .hkb-c1 { transition-delay: .16s; } 514 .hkb.in .hkb-c2 { transition-delay: .26s; } 515 .hkb.in .hkb-c3 { transition-delay: .36s; } 516 .hkb.in .hkb-foot { transition-delay: .5s; } 517 .hkb .hkb-seal { opacity: 0; transform: rotate(calc(var(--rot) + 8deg)) scale(1.55); 518 transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .18s ease-out; } 519 .hkb.in .hkb-seal { opacity: .92; transform: rotate(var(--rot)) scale(1); } 520 .hkb.in .hkb-c1 .hkb-seal { transition-delay: .62s; } 521 .hkb.in .hkb-c2 .hkb-seal { transition-delay: .86s; } 522 .hkb.in .hkb-c3 .hkb-seal { transition-delay: 1.1s; } 523 @media (max-width: 760px) { 524 .hkb-strip { grid-template-columns: 1fr; } 525 .hkb-cell { min-height: 0; padding: 16px 16px 20px; } 526 .hkb-cell + .hkb-cell { border-left: 0; border-top: 1px solid var(--line); } 527 .hkb-seal { top: 14px; width: 58px; } 528 .hkb-mach { max-width: calc(100% - 70px); } 529 .hkb-cl2 { margin-left: 1.25rem; } 530 .hkb-gloss { margin-left: 1.35rem; } 531 } 532 @media (prefers-reduced-motion: reduce) { 533 .hkb .hkb-head, .hkb .hkb-cl, .hkb .hkb-gloss, .hkb .hkb-cell, .hkb .hkb-foot { 534 opacity: 1; transform: none; transition: none; } 535 .hkb .hkb-seal { opacity: .92;
535 transform: rotate(var(--rot, 0deg)); transition: none; } 536 } 537 538 .resline { display: inline-block; margin-top: 40px; font-weight: 600; font-size: clamp(10.5px, 2.7vw, 34px); 539 letter-spacing: -.005em; text-decoration: none; white-space: nowrap; } 540 .resline em { font-style: normal; color: var(--accent); } 541 .resline:hover em { text-decoration: underline; text-underline-offset: 6px; } 542 @media (max-width: 860px) { 543 .resline { white-space: normal; font-size: clamp(19px, 3.4vw, 30px); line-height: 1.4; } 544 } 545 546 /* ââ summit + hotel package ââ */ 547 .bundle-feature__promise { max-width: 58ch; color: var(--dim); font-size: 16px; line-height: 1.65; } 548 .bundle-feature__promise strong { color: var(--ink); font-weight: 650; } 549 .bundle-feature__price { font-size: clamp(38px, 4.5vw, 58px); line-height: .9; font-weight: 850; letter-spacing: -.025em; 550 font-variant-numeric: tabular-nums; } 551 .bundle-feature__price span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 9px; font-weight: 400; 552 letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } 553 .bundle-feature__checkout { min-width: 250px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } 554 .bundle-feature__friction { margin-top: 16px; font-family: var(--mono); font-size: 10px; line-height: 1.6; 555 letter-spacing: .13em; text-transform: uppercase; color: var(--faint); } 556 .bundle-feature__links { display: flex; gap: 22px; margin-top: 16px; align-items: center; flex-wrap: wrap; } 557 .bundle-feature__details { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; 558 color: var(--accent); text-underline-offset: 4px; } 559 560 /* ââ bundle card: third card in the summits grid ââ */ 561 .summit .card.pkg { grid-column: 1 / -1; gap: 0; padding: 32px 36px 30px; 562 border-color: rgba(var(--accent-rgb), .5); 563 background: linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.015) 62%); } 564 .pkg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; } 565 .pkg-top .num { color: var(--accent); } 566 .pkg-top .eyebrow { margin: 0; } 567 .pkg-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); 568 gap: 24px 48px; margin-top: 20px; align-items: start; } 569 .pkg-pitch { display: flex; flex-direction: column; height: 100%; } 570 .pkg-pitch h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.04; text-transform: uppercase; 571 font-weight: 900; letter-spacing: -.01em; margin-bottom: 12px; } 572 .pkg-pitch .bundle-feature__promise { font-size: 15px; } 573 .pkg-foot { margin-top: auto; padding-top: 20px; } 574 .pkg-foot .bundle-feature__friction { margin-top: 0; } 575 .pkg-ledger { border-top: 1px solid var(--line); } 576 .pkg-ledger > div { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 4px 14px; 577 align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); 578 font-size: 13px; line-height: 1.4; color: var(--dim); } 579 .pkg-ledger b { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em; 580 text-transform: uppercase; color: var(--accent); } 581 .pkg-ledger i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); } 582 .pkg-ledger .pkg-sub { grid-template-columns: minmax(0,1fr) auto; font-family: var(--mono); 583 font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } 584 .pkg-ledger .pkg-sub i { color: var(--faint); font-size: 13px; letter-spacing: 0; } 585 .pkg-ledger .pkg-add b { color: var(--ink); } 586 .pkg-buy .bundle-feature__price { margin-top: 18px; font-size: clamp(34px, 3.4vw, 46px); } 587 .pkg-buy .bundle-feature__checkout { margin-top: 16px; width: 100%; min-width: 0; } 588 @media (max-width: 860px) { 589 .summit .card.pkg { padding: 24px 20px 20px; } 590 .pkg-top { gap: 4px 14px; } 591 .pkg-top .eyebrow { font-size: 9px; letter-spacing: .14em; } 592 .pkg-grid { grid-template-columns: 1fr; gap: 12px; } 593 .pkg-pitch h3 { margin-bottom: 8px; } 594 .pkg-pitch .bundle-feature__promise { font-size: 14px; line-height: 1.5; } 595 /* friction + details drop below the CTA so the pitch runs straight into the ledger */ 596 .pkg-pitch { display: contents; } 597 .pkg-foot { order: 3; margin-top: 0; padding-top: 16px; } 598 .pkg-foot .bundle-feature__friction { font-size: 9px; line-height: 1.5; } 599 .pkg-ledger > div { grid-template-columns: 88px minmax(0,1fr) auto; gap: 12px; padding: 6px 0; font-size: 12px; } 600 .pkg-ledger .pkg-sub { grid-template-columns: minmax(0,1fr) auto; } 601 .pkg-buy .bundle-feature__price { margin-top: 14px; } 602 .pkg-buy .bundle-feature__checkout { margin-top: 12px; } 603 } 604 605 /* ââ summits ââ */ 606 .summit { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 44px; } 607 .summit .card { position: relative; overflow: hidden; } 608 .summit .card .cardBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; 609 object-position: center top; filter: saturate(.75); transition: transform .6s ease; } 610 .summit .card:hover .cardBg { transform: scale(1.04); } 611 .summit .card .cardVeil { position: absolute; inset: 0; 612 background: linear-gradient(180deg, rgba(5,5,6,.32) 0%, rgba(5,5,6,.72) 44%, var(--bg) 76%); } 613 .summit .card > :not(.cardBg):not(.cardVeil) { position: relative; z-index: 1; } 614 .summit .card { border: 1px solid var(--line); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; 615 background: linear-gradient(160deg, rgba(var(--accent-rgb),.045), transparent 55%); } 616 .summit .num { font-family: var(--mono); color: var(--faint); font-size: 12px; letter-spacing: .3em; } 617 .summit h3 { font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; } 618 .summit .date { font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.8vw, 38px); color: var(--accent); letter-spacing: -.01em; } 619 .summit p { color: var(--dim); font-size: 15px; line-height: 1.65; flex: 1; } 620 .summit .fine { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } 621 .summit .topics { display: flex; flex-wrap: wrap; gap: 8px; } 622 .summit .topics span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--accent); 623 border: 1px solid rgba(var(--accent-rgb),.3); padding: 6px 11px; border-radius: 2px; text-transform: uppercase; } 624 .summit .priceRow { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; 625 display: flex; align-items: baseline; gap: 14px; } 626 .summit .priceVal { font-weight: 800; font-size: 32px; letter-spacing: -.01em; line-height: 1; 627 font-variant-numeric: tabular-nums; } 628 .summit .priceKey { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; 629 text-transform: uppercase; color: var(--dim); } 630 .summit .tiein { font-size: 14px; color: var(--ink); font-weight: 500; } 631 .summit .tiein a { color: var(--accent); text-decoration: none; } 632 .summit .tiein a:hover { text-decoration: underline; text-underline-offset: 4px; } 633 .voicesbar { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; } 634 .voicesbar .faces { display: flex; } 635 .voicesbar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; 636 border: 2px solid var(--bg); outline: 1px solid var(--line); margin-left: -12px; } 637 .voicesbar img:first-child { margin-left: 0; } 638 .voicesbar .who { font-size: 14px; color: var(--dim); } 639 .voicesbar .who b { color: var(--ink); font-weight: 600; } 640 .voicesbar a.more { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; 641 color: var(--accent); text-decoration: none; } 642 .voicesbar a.more:hover { text-decoration: underline; text-underline-offset: 4px; } 643 @media (max-width: 860px) { 644 .summit { grid-template-columns: 1fr; } 645 /* stacked cards are taller â bring the solid fade up so body copy stays on ink */ 646 .summit .card .cardVeil { background: linear-gradient(180deg, rgba(5,5,6,.36) 0%, rgba(5,5,6,.8) 32%, var(--bg) 58%); } 647 } 648 649 /* ââ speakers ââ */ 650 .headliners { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 44px; } 651 .headliners .hcard { position: relative; border: 1px solid var(--line); overflow: hidden; } 652 .headliners .hcard img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; 653 filter: grayscale(28%) contrast(1.04); transition: filter .3s, transform .5s; } 654 .headliners .hcard:hover img { filter: grayscale(0%); transform: scale(1.025); } 655 .headliners .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; 656 background: linear-gradient(to top, rgba(5,5,6,.92), transparent); } 657 .headliners .nm { font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.6vw, 22px); letter-spacing: -.005em; line-height: 1.05; } 658 .headliners .og { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 6px; } 659 @media (max-width: 860px) { .headliners { grid-template-columns: repeat(3, 1fr); } 660 .headliners .hcard:nth-child(n+4) { display: none; } } 661 @media (max-width: 640px) { .headliners { grid-template-columns: 1fr 1fr; } 662 .headliners .hcard:nth-child(4) { display: block; } } 663 .alsoline { margin-top: 34px; color: var(--dim); font-size: 15px; line-height: 1.8; max-width: 900px; } 664 .alsoline b { color: var(--ink); font-weight: 600; } 665 .followline { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; 666 text-transform: uppercase; } 667 .followline a, .voicesbar a.more, footer .cdlabel a { display: inline-block; padding: 8px 2px; } 668 .followline a { color: var(--accent); text-decoration: none; } 669 .followline a:hover { text-decoration: underline; text-underline-offset: 4px; } 670 671 /* ââ ecosystem ââ */ 672 .ecoHead { margin-top: 96px; } 673 .majorPartners { display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; margin-top: 30px; } 674 /* Hover glow sits BEHIND each logo (radial pseudo-element) so it reads the
675 same for the alpha-transparent Kobe mark and the screen-blended MIC box â 676 a drop-shadow would trace the MIC file's rectangular canvas instead. */ 677 .majorPartners a { display: block; position: relative; } 678 .majorPartners a::before { content: ""; position: absolute; inset: -28px; 679 background: radial-gradient(closest-side, rgba(var(--accent-rgb),.16), transparent 70%); 680 opacity: 0; transition: opacity .3s ease; pointer-events: none; } 681 .majorPartners a:hover::before { opacity: 1; } 682 .majorPartners img { height: 118px; width: auto; display: block; } 683 /* LEV Foundation's official mark is a serif wordmark; rendered typographically 684 (as the carousel already did) since no dark-background asset exists. */ 685 .levWordmark { text-align: center; color: var(--ink); text-decoration: none; 686 font-family: Georgia, 'Times New Roman', serif; } 687 .levWordmark .lev { display: block; font-size: 58px; line-height: 1; letter-spacing: .04em; } 688 .levWordmark .found { display: block; font-size: 21px; margin-top: 7px; letter-spacing: .01em; } 689 /* The MIC PNG ships white-on-solid-black; screen-blending melts its black 690 canvas into the page without altering the file (approval terms). */ 691 .majorPartners .micLogo { mix-blend-mode: screen; height: 112px; } 692 /* Broken Symmetry Capital rendered typographically (the only supplied logo 693 file is a 120Ã120 JPG, too small for this row) â serif, same approach 694 as the LEV Foundation mark. */ 695 .bscWordmark { text-align: center; color: var(--ink); text-decoration: none; 696 font-family: Georgia, 'Times New Roman', serif; } 697 .bscWordmark .bsym { display: block; font-size: 31px; line-height: 1.1; letter-spacing: .04em; } 698 .bscWordmark .bcap { display: block; font-size: 15px; margin-top: 7px; 699 letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; } 700 @media (max-width: 640px) { .majorPartners { gap: 36px; } .majorPartners img, 701 .majorPartners .micLogo { height: 76px; } 702 .levWordmark .lev { font-size: 40px; } .levWordmark .found { font-size: 15px; } 703 .bscWordmark .bsym { font-size: 22px; } .bscWordmark .bcap { font-size: 11px; margin-top: 5px; } } 704 html.kobe-permit-over [data-kobe-permit] { display: none !important; } 705 .ecoWall { position: relative; overflow: hidden; margin-top: 34px; background: var(--bg); 706 border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } 707 .ecoWall::before, .ecoWall::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } 708 .ecoWall::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } 709 .ecoWall::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } 710 .ecoTrack { display: flex; width: max-content; animation: ecoScroll 48s linear infinite; } 711 .ecoWall:hover .ecoTrack, .ecoWall:focus-within .ecoTrack { animation-play-state: paused; } 712 @keyframes ecoScroll { to { transform: translateX(-50%); } } 713 .ecoSeq { display: flex; align-items: center; gap: 70px; padding: 28px 35px; } 714 .ecoCell { display: flex; align-items: center; height: 40px; text-decoration: none; } 715 .ecoCell img { height: 32px; width: auto; max-width: 150px; object-fit: contain; display: block; } 716 .ecoCell.plate img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.3); mix-blend-mode: screen; transition: filter .3s; } 717 .ecoCell.stamp img { filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s; } 718 .ecoCell.luma img { filter: grayscale(1) contrast(1.7) brightness(1.6); mix-blend-mode: screen; transition: filter .3s; } 719 .ecoCell.plate:hover img { filter: grayscale(1) invert(1) brightness(1.2) contrast(1.35); } 720 .ecoCell.stamp:hover img { opacity: 1; } 721 .ecoCell.luma:hover img { filter: grayscale(1) contrast(1.7) brightness(1.9); } 722 .ecoWord { font-weight: 700; font-size: 17px; letter-spacing: .02em; color: rgba(244,243,240,.85); white-space: nowrap; } 723 .ecoCell:hover .ecoWord { color: var(--ink); } 724 @media (max-width: 760px) { .ecoSeq { gap: 44px; padding: 22px; }
724 .ecoCell img { height: 26px; } } 725 @media (prefers-reduced-motion: reduce) { 726 .ecoWall::before, .ecoWall::after { display: none; } 727 .ecoTrack { animation: none; width: auto; } 728 .ecoSeq { flex-wrap: wrap; justify-content: center; } 729 .ecoSeq[aria-hidden="true"] { display: none; } 730 } 731 732 /* ââ fashion show ââ */ 733 .fashion { max-width: none; padding: 0; position: relative; overflow: hidden; } 734 .fashion video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } 735 .fashion .veil { position: absolute; inset: 0; 736 background: linear-gradient(100deg, rgba(5,5,6,.88) 32%, rgba(5,5,6,.5) 68%, rgba(5,5,6,.3)); } 737 .fashion .content { position: relative; padding: 120px 6vw 110px; max-width: 1440px; margin: 0 auto; width: 100%; } 738 .fashion p { color: var(--dim); max-width: 56ch; font-size: 15px; line-height: 1.7; margin: 14px 0 22px; } 739 .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } 740 .kanji { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; } 741 .kanji span { cursor: pointer; display: inline-block; border: 1px solid rgba(var(--accent-rgb),.3); 742 border-radius: 2px; padding: 7px 11px; color: var(--accent); font-size: 13px; line-height: 1; 743 min-width: 31px; text-align: center; } 744 .tags span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--accent); 745 border: 1px solid rgba(var(--accent-rgb),.3); padding: 7px 13px; border-radius: 2px; text-transform: uppercase; } 746 747 /* ââ japan strip ââ */ 748 .stripwrap { max-width: none; padding: 0; } 749 .stripwrap .cap { text-align: center; padding: 26px 6vw 18px; } 750 .strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } 751 .strip figure { position: relative; overflow: hidden; } 752 .strip img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; 753 filter: contrast(1.02); transition: transform .6s ease; } 754 .strip figure:hover img { transform: scale(1.04); } 755 .strip figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--mono); 756 font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,243,240,.8); 757 text-shadow: 0 1px 8px rgba(0,0,0,.8); } 758 @media (max-width: 860px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip figure:nth-child(2) { display: none; } } 759 760 /* ââ agenda · day rail ââ */ 761 .ag-rail { display: grid; grid-template-columns: 1.12fr 1.12fr .84fr; margin-top: 84px; } 762 .ag-stop { position: relative; border-top: 1px solid rgba(var(--accent-rgb),.26); 763 padding: 52px 3.2rem 0 0; margin-top: 44px; } 764 .ag-stop:last-child { padding-right: 0; } 765 .ag-stop::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; 766 background: var(--bg); border: 1px solid var(--accent); } 767 .ag-stop::after { content: ""; position: absolute; top: 4px; left: 3px; width: 1px; height: 36px; 768 background: rgba(var(--accent-rgb),.32); } 769 .ag-date { position: absolute; top: -40px; left: 0; font-size: 11px; font-weight: 500; 770 letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } 771 .ag-date .ag-code { color: var(--faint); margin-right: 1.1em; } 772 .ag-tag { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; 773 color: var(--faint); margin-bottom: 12px; } 774 .ag-title { font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; 775 margin-bottom: 28px; max-width: 24ch; } 776 .ag-sessions { list-style: none; } 777 .ag-sessions li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; 778 border-top: 1px solid var(--line); padding: 13px 0; } 779 .ag-sessions li:last-child { border-bottom: 1px solid var(--line); } 780 .ag-num { font-size: 10px; letter-spacing: .1em; color: var(--faint); } 781 .ag-t { font-weight: 700; font-size: 14.5px; line-height: 1.35; letter-spacing: -.005em; } 782 .ag-sub { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.45; 783 color: var(--dim); margin-top: 3px; } 784 .ag-stop--finale { border-top-color: var(--accent); } 785 .ag-stop--finale::before { background: var(--accent); border-color: var(--accent); 786 box-shadow: 0 0 22px rgba(var(--accent-rgb),.85), 0 0 60px rgba(var(--accent-rgb),.35); } 787 .ag-stop--finale::after { background: rgba(var(--accent-rgb),.55); } 788 .ag-stop--finale .ag-date { color: var(--accent); } 789 .ag-stop--finale .ag-date .ag-code { color: rgba(var(--accent-rgb),.55); } 790 .ag-finale { border: 1px solid rgba(var(--accent-rgb),.3); 791 background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.015) 70%); 792 box-shadow: 0 0 44px rgba(var(--accent-rgb),.07) inset, 0 0 60px rgba(var(--accent-rgb),.05); 793 padding: 26px 24px 28px; } 794 .ag-finale .ag-tag { color: rgba(var(--accent-rgb),.75); } 795 .ag-finale-title { font-weight: 900; font-size: 23px; line-height: 1.14; letter-spacing: -.015em; 796 margin-bottom: 14px; } 797 .ag-finale-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } 798 .ag-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; 799 border-top: 1px solid var(--line); margin-top: 72px; padding-top: 34px; } 800 .ag-note { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } 801 @media (max-width: 860px) { 802 .ag-rail { display: block; border-left: 1px solid rgba(var(--accent-rgb),.26); 803 padding-left: 30px; margin-top: 60px; } 804 .ag-stop { border-top: none; padding: 0 0 52px 0; margin-top: 0; } 805 .ag-stop::before { top: 2px; left: -34px; } 806 .ag-stop::after { top: 5px; left: -30px; width: 22px; height: 1px; } 807 .ag-date { position: static; display: block; margin-bottom: 16px; } 808 .ag-stop--finale { padding-bottom: 0; } 809 .ag-cta { flex-direction: column; align-items: flex-start; gap: 1.4rem; } 810 } 811 812 /* ââ faq · ticket stubs ââ */ 813 @supports (interpolate-size: allow-keywords) { 814 :root { interpolate-size: allow-keywords; } 815 .faqItem::details-content { height: 0; overflow: clip; 816 transition: height .32s cubic-bezier(.4,0,.2,1), content-visibility .32s allow-discrete; }
817 .faqItem[open]::details-content { height: auto; } 818 } 819 .fq-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); 820 gap: 64px 88px; align-items: start; } 821 .fq-head { position: sticky; top: 48px; } 822 .fq-head .big { margin-bottom: 36px; } 823 .fq-tick { color: var(--accent); } 824 .fq-meta { border-top: 1px solid var(--line); padding-top: 20px; font-size: 10px; 825 letter-spacing: .2em; text-transform: uppercase; color: var(--faint); line-height: 2.2; } 826 .fq-meta strong { color: var(--dim); font-weight: 500; } 827 .fq-stubs { display: flex; flex-direction: column; gap: 12px; } 828 .faqItem { position: relative; border: 1px solid var(--line); 829 background: linear-gradient(180deg, rgba(244,243,240,.015), rgba(244,243,240,0)); 830 transition: border-color .25s ease, box-shadow .25s ease; } 831 .faqItem::before { content: attr(data-index); position: absolute; top: 0; bottom: 0; left: 0; 832 width: 56px; border-right: 1px dashed var(--line); display: grid; place-items: center; 833 writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px; font-weight: 500; 834 letter-spacing: .28em; text-transform: uppercase; color: var(--faint); 835 transition: color .25s ease, background .25s ease, border-color .25s ease; } 836 .faqItem:hover { border-color: rgba(var(--accent-rgb),.38); 837 box-shadow: 0 0 34px -10px rgba(var(--accent-rgb),.28), inset 0 0 24px -18px rgba(var(--accent-rgb),.35); } 838 .faqItem:hover::before { color: rgba(var(--accent-rgb),.85); } 839 .faqItem[open] { border-left-color: rgba(var(--accent-rgb),.6); } 840 .faqItem[open]::before { color: var(--accent); background: rgba(var(--accent-rgb),.05); 841 border-right-color: rgba(var(--accent-rgb),.3); } 842 .faqItem summary { list-style: none; cursor: pointer; display: flex; align-items: center; 843 gap: 24px; min-height: 64px; padding: 14px 24px 14px 84px; user-select: none; } 844 .faqItem summary::-webkit-details-marker { display: none; } 845 .faqItem summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } 846 .fq-q { flex: 1; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; } 847 .fq-barcode { flex: 0 0 44px; height: 20px; opacity: .45; transition: opacity .25s ease; 848 background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px, 849 var(--faint) 3px 5px, transparent 5px 7px, var(--faint) 7px 8px, transparent 8px 11px); } 850 .faqItem:hover .fq-barcode { opacity: .7; } 851 .faqItem[open] .fq-barcode { opacity: .8; 852 background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.7) 0 1px, transparent 1px 3px, 853 rgba(var(--accent-rgb),.7) 3px 5px, transparent 5px 7px, rgba(var(--accent-rgb),.7) 7px 8px, transparent 8px 11px); } 854 .fq-toggle { flex: 0 0 auto; font-size: 13px; color: var(--faint); width: 24px; 855 text-align: center; transition: color .2s ease; } 856 .fq-toggle::before { content: "[+]"; } 857 .faqItem[open] .fq-toggle::before { content: "[â]"; } 858 .faqItem[open] .fq-toggle, .faqItem:hover .fq-toggle { color: var(--accent); } 859 .fq-body { padding: 2px 96px 26px 84px; } 860 .fq-body p { max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--dim); 861 border-top: 1px solid var(--line); padding-top: 18px; } 862 .fq-foot { margin-top: 22px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; 863 color: var(--faint); display: flex; align-items: center; gap: 14px; } 864 .fq-foot::before { content: ""; flex: 0 0 24px; height: 1px; background: rgba(var(--accent-rgb),.4); } 865 @media (max-width: 1100px) { 866 .fq-grid { grid-template-columns: 1fr; gap: 56px; } 867 .fq-head { position: static; } 868 } 869 @media (max-width: 860px) { 870 .faqItem::before { writing-mode: horizontal-tb; top: 0; left: 0; right: 0; bottom: auto; 871 width: auto; height: 28px; border-right: none; border-bottom: 1px dashed var(--line); 872 place-items: center start; padding-left: 20px; } 873 .faqItem[open]::before { border-bottom-color: rgba(var(--accent-rgb),.3); border-right-color: var(--line); } 874 .faqItem summary { min-height: 0; padding: 44px 20px 16px 20px; gap: 16px; } 875 .fq-barcode { display: none; } 876 .fq-body { padding: 0 20px 22px 20px; } 877 } 878 879 /* ââ apply ââ */ 880 .applywrap { max-width: none; padding: 0; position: relative; overflow: hidden; } 881 .applywrap .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } 882 .applywrap .veil { position: absolute; inset: 0; 883 background: linear-gradient(to bottom, rgba(5,5,6,.92) 0%, rgba(5,5,6,.55) 45%, rgba(5,5,6,.88) 100%); } 884 .apply { position: relative; text-align: center; padding: 150px 6vw 150px; max-width: 1440px; margin: 0 auto; } 885 .apply h2 { font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 7vw, 104px); letter-spacing: -.015em; line-height: .95; margin: 16px 0 18px; 886 text-shadow: 0 2px 50px rgba(0,0,0,.6); } 887 .apply p.sub { color: rgba(244,243,240,.78); font-size: 16px; margin-bottom: 40px; text-shadow: 0 1px 20px rgba(0,0,0,.7); } 888 .apply .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } 889 .apply .row .btn { min-width: 200px; text-align: center; } 890 .apply .fine a { color: var(--accent); text-decoration: none; } 891 .apply .fine a:hover { text-decoration: underline; text-underline-offset: 4px; } 892 .apply .apply-jp { margin-top: 26px; max-width: 72ch; margin-left: auto; margin-right: auto; text-transform: none; letter-spacing: .06em; font-size: 11px; line-height: 1.8; color: rgba(244,243,240,.7); } 893 .apply .fine { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,243,240,.6); } 894 895 /* ââ footer ââ */ 896 footer { border-top: 1px solid var(--line); padding: 70px 6vw 60px; text-align: center; } 897 footer .see { font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3vw, 40px); letter-spacing: .02em; } 898 footer .date { font-family: var(--mono); color: var(--accent); letter-spacing: .4em; margin-top: 10px; font-size: 14px; } 899 #count { display: flex; gap: 34px; justify-content: center; margin-top: 30px; } 900 #count div { min-width: 64px; } 901 #count .v { font-weight: 800; font-size: clamp(26px, 4vw, 46px); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } 902 #count .k { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--faint); text-transform: uppercase; margin-top: 4px; } 903 @media (max-width: 380px) { #count { gap: 18px; } #count div { min-width: 56px; } } 904 footer .cdlabel { margin-top: 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
905 footer .jst { margin-top: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } 906 footer .jst b { color: var(--accent); font-weight: 500; } 907 footer .doors { display: flex; gap: 30px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } 908 footer .doors a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-decoration: none; display: inline-block; min-width: 150px; text-align: center; padding: 12px 8px; } 909 footer .doors a:hover { color: var(--ink); } 910 911 @media (prefers-reduced-motion: reduce) { .heroVideo { display: none; transition: none; } } 912</style> 913<noscript><style>.rv{opacity:1;transform:none}</style></noscript> 914</head> 915<body data-analytics-offer="mirai_city"> 916 917<a class="skip" href="#speakers" data-copy="menu.skipLink"></a> 918 919<div role="status" aria-live="polite" id="srStatus" style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)"></div>
920<script src="/nav.js"></script>
920 921 922<!-- âââ HERO OFFER âââ --> 923<section class="hero" id="top" data-track-section="hero" data-track-position="1"> 924 <div class="heroMedia"> 925 <!-- Video: Kobe Harborland at night, Pexels (pexels.com/video/35145859), Pexels license. 926 Re-encoded as a seamless crossfade loop (last 1.5s blends into the first). --> 927 <img class="heroPoster" src="kobe_harbor_night_poster.jpg" alt="" fetchpriority="high" decoding="async" /> 928 <video class="heroVideo" muted loop playsinline preload="none" aria-hidden="true"> 929 <source data-src="kobe_harbor_night.mp4" type="video/mp4" /> 930 </video> 931 <div class="heroVeil"></div> 932 </div> 933 <div class="heroContent"> 934 <h1 data-copy="hero.headline"></h1> 935 <p class="heroLead" data-copy="hero.lead"></p> 936 <p class="heroWhere" data-copy="hero.where"></p> 937 <div class="heroActions" data-copy="hero.buttons"></div> 938 <p class="heroJpRow" data-copy="hero.jpLink"></p> 939 </div> 940 <a class="heroContinue" href="#pillars" aria-label="Scroll to the next section" data-copy="hero.scrollHint"></a> 941</section> 942 943<!-- âââ INTRO + PILLARS: ACCELERATE / INSPIRE / LIVE âââ --> 944<section id="pillars" data-track-section="pillars" data-track-position="2"> 945 <p class="msl-lockup rv" data-copy="pillars.statement" 946 aria-label="Month-long popup city, for scientists, founders, and builders to experience Japan's Frontier Tech Renaissance."></p> 947 <article class="knt-pillar knt-p1 rv"> 948 <div class="knt-meta"><span class="knt-num" data-copy="pillars.num1"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss1"></span></div> 949 <div class="knt-stage"> 950 <div class="knt-band" aria-hidden="true"><div class="knt-track"> 951 <span><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i></span> 952 <span><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i><i>å é</i></span> 953 </div></div> 954 <h2 class="knt-title" data-copy="pillars.title1"></h2> 955 </div> 956 <div class="knt-row"> 957 <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints1"></aside> 958 <ul class="knt-list" data-copy="pillars.items1"></ul> 959 </div> 960 </article> 961 <article class="knt-pillar knt-p2 rv"> 962 <div class="knt-meta"><span class="knt-num" data-copy="pillars.num2"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss2"></span></div> 963 <div class="knt-stage"> 964 <div class="knt-band" aria-hidden="true"><div class="knt-track"> 965 <span><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i></span> 966 <span><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i><i>åºæ¿</i></span> 967 </div></div> 968 <h2 class="knt-title" data-copy="pillars.title2"></h2> 969 </div> 970 <div class="knt-row"> 971 <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints2"></aside> 972 <ul class="knt-list" data-copy="pillars.items2"></ul> 973 </div> 974 </article> 975 <article class="knt-pillar knt-p3 rv"> 976 <div class="knt-meta"><span class="knt-num" data-copy="pillars.num3"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss3"></span></div> 977 <div class="knt-stage"> 978 <div class="knt-band" aria-hidden="true"><div class="knt-track"> 979 <span><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i></span> 980 <span><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i><i>æ®ãã</i></span> 981 </div></div> 982 <h2 class="knt-title" data-copy="pillars.title3"></h2> 983 </div> 984 <div class="knt-row"> 985 <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints3"></aside> 986 <ul class="knt-list" data-copy="pillars.items3"></ul> 987 </div> 988 </article> 989</section> 990 991 992<!-- âââ PROOF: SPEAKERS + ECOSYSTEM âââ --> 993<section id="speakers" data-track-section="proof" data-track-position="3"> 994 <div class="eyebrow rv" data-copy="speakers.eyebrow"></div> 995 <h2 class="big rv" data-copy="speakers.headline"></h2>
996 <div class="headliners"> 997 <div class="hcard rv"><img src="img/aubrey.jpg" alt="Aubrey de Grey" loading="lazy" decoding="async" /> 998 <div class="meta"><div class="nm" data-copy="speakers.name"></div><div class="og" data-copy="speakers.org"></div></div></div> 999 <div class="hcard rv"><img src="img/kennedy.jpg" alt="Brian Kennedy" loading="lazy" decoding="async" /> 1000 <div class="meta"><div class="nm" data-copy="speakers.name5"></div><div class="og" data-copy="speakers.org5"></div></div></div> 1001 <div class="hcard rv"><img src="img/hayano.jpg" alt="Motoshi Hayano" loading="lazy" decoding="async" /> 1002 <div class="meta"><div class="nm" data-copy="speakers.name2"></div><div class="og" data-copy="speakers.org2"></div></div></div> 1003 <div class="hcard rv"><img src="img/yuki.jpg" alt="Yuki Hanyu" loading="lazy" decoding="async" /> 1004 <div class="meta"><div class="nm" data-copy="speakers.name3"></div><div class="og" data-copy="speakers.org3"></div></div></div> 1005 <div class="hcard rv"><img src="img/adam.jpg" alt="Adam Gries" loading="lazy" decoding="async" /> 1006 <div class="meta"><div class="nm" data-copy="speakers.name4"></div><div class="og" data-copy="speakers.org4"></div></div></div> 1007 </div> 1008 <p class="alsoline rv" data-copy="speakers.alsoLine"></p> 1009 <div class="followline rv" data-copy="speakers.followLine"></div> 1010 1011 <!-- Major partners · The two Kobe logos carry use approval #3182 (window: Aug 19 â Dec 15 2026) 1012 and self-hide via [data-kobe-permit]; the label and LEV Foundation stay. Kobe logo files are 1013 used verbatim per the approval terms â never edit, recompress, or recolor them. --> 1014 <div class="eyebrow rv ecoHead" data-copy="ecosystem.majorLabel"></div> 1015 <div class="majorPartners rv"> 1016 <a class="levWordmark" href="https://www.levf.org/" target="_blank" rel="noopener" title="LEV Foundation"><span class="lev">LEV</span><span class="found">Foundation</span></a> 1017 <a data-kobe-permit href="https://www.hosp.kobe-u.ac.jp/ikoujiso/en/" target="_blank" rel="noopener" title="Kobe University"><img src="img/partners/kobe-university.png" alt="Kobe University" loading="lazy" decoding="async" /></a> 1018 <a data-kobe-permit href="https://www.med.kobe-u.ac.jp/mic/en/" target="_blank" rel="noopener" title="MedTech Innovation Center, Kobe University"><img class="micLogo" src="img/partners/mic-kobe-university.png" alt="MIC â MedTech Innovation Center, Kobe University" loading="lazy" decoding="async" /></a> 1019 <a class="bscWordmark" href="https://brokensymmetry.capital/" target="_blank" rel="noopener" title="Broken Symmetry Capital"><span class="bsym">Broken Symmetry</span><span class="bcap">Capital</span></a> 1020 </div> 1021 1022 <div class="eyebrow rv ecoHead" data-copy="ecosystem.headline"></div> 1023 <div class="ecoWall rv" aria-label="Supporting organizations"> 1024 <div class="ecoTrack"> 1025 <div class="ecoSeq"> 1026 <a class="ecoCell plate" href="https://viva.city/" target="_blank" rel="noopener" title="Viva City"><img src="img/partners/viva-city.avif" alt="Viva City" loading="lazy" decoding="async" /></a> 1027 <a class="ecoCell stamp" href="https://www.fbri-kobe.org/kbic/english/" target="_blank" rel="noopener" title="KBIC"><img src="img/partners/kbic.svg" alt="KBIC" loading="lazy" decoding="async" /></a> 1028 <a class="ecoCell plate" href="https://www.learninglayer.ai/" target="_blank" rel="noopener" title="Learning Layer Labs"><img src="img/partners/learning-layer-labs.jpg" alt="Learning Layer Labs" loading="lazy" decoding="async" /></a> 1029 <a class="ecoCell plate" href="https://haus.fund/" target="_blank" rel="noopener" title="Biopunk"><img src="img/partners/biopunk.png" alt="Biopunk" loading="lazy" decoding="async" /></a> 1030 <a class="ecoCell luma" href="https://aevitashouse.bio/" target="_blank" rel="noopener" title="Aevitas"><img src="img/partners/aevitas.png" alt="Aevitas" loading="lazy" decoding="async" /></a> 1031 <a class="ecoCell plate" href="https://vibecodingnights.com/" target="_blank" rel="noopener" title="Vibe Coding Nights"><img src="img/partners/vibe-coding-nights.png" alt="Vibe Coding Nights" loading="lazy" decoding="async" /></a> 1032 <a class="ecoCell plate" href="https://alv.vc/" target="_blank" rel="noopener" title="Asagi Labs Ventures"><img src="img/partners/asagi-labs.jpg" alt="Asagi Labs Ventures" loading="lazy" decoding="async" /></a> 1033 <a class="ecoCell plate" href="https://zucity.org/en/market-homes" target="_blank" rel="noopener" title="ZuCity Japan"><img src="img/partners/zucity.svg" alt="ZuCity Japan" loading="lazy" decoding="async" /></a> 1034 <a class="ecoCell" href="https://ch-ange.de/" target="_blank" rel="noopener" title="CHANGE"><span class="ecoWord">CHANGE</span></a> 1035 <a class="ecoCell stamp" href="https://www.heka.bio/" target="_blank" rel="noopener" title="HekaBio"><img src="img/partners/hekabio.avif" alt="HekaBio" loading="lazy" decoding="async" /></a> 1036 <a class="ecoCell stamp" href="https://augmentationlab.org/" target="_blank" rel="noopener" title="Augmentation Lab"><img src="img/partners/augmentation-lab.png" alt="Augmentation Lab" loading="lazy" decoding="async" /></a> 1037 <a class="ecoCell plate" href="https://vitalistbay.com/" target="_blank" rel="noopener" title="Vitalist Bay"><img src="img/partners/vitalist-bay.png" alt="Vitalist Bay" loading="lazy" decoding="async" /></a> 1038 <a class="ecoCell stamp" href="https://the-mu.xyz/" target="_blank" rel="noopener" title="The MU"><img src="img/partners/the-mu.png" alt="The MU" loading="lazy" decoding="async" /></a> 1039 <a class="ecoCell stamp" href="https://www.greyrigge.com/" target="_blank" rel="noopener" title="GreyRigge Associates"><img src="img/partners/greyrigge.png" alt="GreyRigge Associates" loading="lazy" decoding="async" /></a> 1040 </div> 1041 <div class="ecoSeq" aria-hidden="true"> 1042 <a class="ecoCell plate" href="https://viva.city/" target="_blank" rel="noopener" title="Viva City" tabindex="-1"><img src="img/partners/viva-city.avif" alt="Viva City" loading="lazy" decoding="async" /></a> 1043 <a class="ecoCell stamp" href="https://www.fbri-kobe.org/kbic/english/" target="_blank" rel="noopener" title="KBIC" tabindex="-1"><img src="img/partners/kbic.svg" alt="KBIC" loading="lazy" decoding="async" /></a> 1044 <a class="ecoCell plate" href="https://www.learninglayer.ai/" target="_blank" rel="noopener" title="Learning Layer Labs" tabindex="-1"><img src="img/partners/learning-layer-labs.jpg" alt="Learning Layer Labs" loading="lazy" decoding="async" /></a> 1045 <a class="ecoCell plate" href="https://haus.fund/" target="_blank" rel="noopener" title="Biopunk" tabindex="-1"><img src="img/partners/biopunk.png" alt="Biopunk" loading="lazy" decoding="async" /></a> 1046 <a class="ecoCell luma" href="https://aevitashouse.bio/" target="_blank" rel="noopener" title="Aevitas" tabindex="-1"><img src="img/partners/aevitas.png" alt="Aevitas" loading="lazy" decoding="async" /></a> 1047 <a class="ecoCell plate" href="https://vibecodingnights.com/" target="_blank" rel="noopener" title="Vibe Coding Nights" tabindex="-1"><img src="img/partners/vibe-coding-nights.png" alt="Vibe Coding Nights" loading="lazy" decoding="async" /></a> 1048 <a class="ecoCell plate" href="https://alv.vc/" target="_blank" rel="noopener" title="Asagi Labs Ventures" tabindex="-1"><img src="img/partners/asagi-labs.jpg" alt="Asagi Labs Ventures" loading="lazy" decoding="async" /></a> 1049 <a class="ecoCell plate" href="https://zucity.org/en/market-homes" target="_blank" rel="noopener" title="ZuCity Japan" tabindex="-1"><img src="img/partners/zucity.svg" alt="ZuCity Japan" loading="lazy" decoding="async" /></a> 1050 <a class="ecoCell" href="https://ch-ange.de/" target="_blank" rel="noopener" title="CHANGE" tabindex="-1"><span class="ecoWord">CHANGE</span></a> 1051 <a class="ecoCell stamp" href="https://www.heka.bio/" target="_blank" rel="noopener" title="HekaBio" tabindex="-1"><img src="img/partners/hekabio.avif" alt="HekaBio" loading="lazy" decoding="async" /></a> 1052 <a class="ecoCell stamp" href="https://augmentationlab.org/" target="_blank" rel="noopener" title="Augmentation Lab" tabindex="-1"><img src="img/partners/augmentation-lab.png" alt="Augmentation Lab" loading="lazy" decoding="async" /></a> 1053 <a class="ecoCell plate" href="https://vitalistbay.com/" target="_blank" rel="noopener" title="Vitalist Bay" tabindex="-1"><img src="img/partners/vitalist-bay.png" alt="Vitalist Bay" loading="lazy" decoding="async" /></a> 1054 <a class="ecoCell stamp" href="https://the-mu.xyz/" target="_blank" rel="noopener" title="The MU" tabindex="-1"><img src="img/partners/the-mu.png" alt="The MU" loading="lazy" decoding="async" /></a> 1055 <a class="ecoCell stamp" href="https://www.greyrigge.com/" target="_blank" rel="noopener" title="GreyRigge Associates" tabindex="-1"><img src="img/partners/greyrigge.png" alt="GreyRigge Associates" loading="lazy" decoding="async" /></a> 1056 </div> 1057 </div> 1058 </div> 1059</section> 1060 1061<!-- âââ WHY JAPAN: THE APPROVAL RECORD (Kessai-ran) âââ --> 1062<section id="whyjapan" class="hkb rv" data-track-section="whyjapan" data-track-position="4"> 1063 <div class="hkb-doc"> 1064 <div class="hkb-head">
1065 <span data-copy="whyjapan.head1"></span> 1066 <span data-copy="whyjapan.head2"></span> 1067 </div> 1068 1069 <h2 class="hkb-claim" data-copy="whyjapan.claim"></h2> 1070 <p class="hkb-gloss" aria-hidden="true" data-copy="whyjapan.gloss"></p> 1071 1072 <ul class="hkb-strip"> 1073 <li class="hkb-cell hkb-c1"> 1074 <h3 class="hkb-mach" data-copy="whyjapan.mach1"></h3> 1075 <div class="hkb-stat" data-copy="whyjapan.stat1"></div> 1076 <div class="hkb-qual" data-copy="whyjapan.qual1"></div> 1077 <p class="hkb-fact" data-copy="whyjapan.fact1"></p> 1078 <span class="hkb-seal" style="--rot:-7deg" aria-hidden="true"> 1079 <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"> 1080 <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/> 1081 <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/> 1082 <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">æ¿</text> 1083 <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">èª</text> 1084 </svg> 1085 </span> 1086 </li> 1087 <li class="hkb-cell hkb-c2"> 1088 <h3 class="hkb-mach" data-copy="whyjapan.mach2"></h3> 1089 <div class="hkb-stat" data-copy="whyjapan.stat2"></div> 1090 <div class="hkb-qual" data-copy="whyjapan.qual2"></div> 1091 <p class="hkb-fact" data-copy="whyjapan.fact2"></p> 1092 <span class="hkb-seal" style="--rot:4deg" aria-hidden="true"> 1093 <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"> 1094 <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/> 1095 <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/> 1096 <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">å©</text> 1097 <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">æ</text> 1098 </svg> 1099 </span> 1100 </li> 1101 <li class="hkb-cell hkb-c3"> 1102 <h3 class="hkb-mach" data-copy="whyjapan.mach3"></h3> 1103 <div class="hkb-stat" data-copy="whyjapan.stat3"></div> 1104 <div class="hkb-qual" data-copy="whyjapan.qual3"></div> 1105 <p class="hkb-fact" data-copy="whyjapan.fact3"></p> 1106 <span class="hkb-seal" style="--rot:-3deg" aria-hidden="true"> 1107 <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"> 1108 <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/> 1109 <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/> 1110 <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">é</text> 1111 <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">ç©</text> 1112 </svg> 1113 </span> 1114 </li> 1115 </ul> 1116 1117 <div class="hkb-foot"> 1118 <span data-copy="whyjapan.footLabel"></span> 1119 <span data-copy="whyjapan.footLink"></span> 1120 </div> 1121 </div> 1122</section> 1123 1124<hr class="rule" /> 1125 1126<!-- âââ SUMMITS âââ --> 1127<section id="summits" data-track-section="summits" data-track-position="5"> 1128 <div class="eyebrow rv" data-copy="summits.eyebrow"></div> 1129 <h2 class="big rv" data-copy="summits.headline"></h2> 1130 <div class="summit"> 1131 <div class="card rv"> 1132 <!-- Photo: National Cancer Institute on Unsplash (unsplash.com/photos/ct10qdGv1hQ, Unsplash license) --> 1133 <img class="cardBg" src="img/summit-pathologist.jpg" alt="" loading="lazy" decoding="async" style="object-position: center 32%" /> 1134 <div class="cardVeil" aria-hidden="true"></div> 1135 <div class="num" data-copy="summits.label"></div> 1136 <div class="date" data-copy="summits.date"></div> 1137 <h3 data-copy="summits.title"></h3> 1138 <p data-copy="summits.body"></p> 1139 <div class="topics" data-copy="summits.topics"></div> 1140 <div class="priceRow" data-copy="summits.priceRow"></div> 1141 <div data-copy="summits.block"></div> 1142 <div class="fine" data-copy="summits.footnote"></div> 1143 </div> 1144 <div class="card rv"> 1145 <img class="cardBg" src="img/early-bird-bridge.jpg" alt="" loading="lazy" decoding="async" style="object-position: center bottom" /> 1146 <div class="cardVeil" aria-hidden="true"></div> 1147 <div class="num" data-copy="summits.label2"></div> 1148 <div class="date" data-copy="summits.date2"></div> 1149 <h3 data-copy="summits.title2"></h3> 1150 <p data-copy="summits.body2"></p> 1151 <div class="topics" data-copy="summits.topics2"></div> 1152 <div class="tiein" data-copy="summits.tieIn"></div> 1153 <div class="priceRow" data-copy="summits.priceRow2"></div> 1154 <div data-copy="summits.block2"></div> 1155 <div class="fine" data-copy="summits.footnote2"></div> 1156 </div> 1157 <div class="card pkg rv" id="summit-package" data-package-promo data-track-section="summit_package" data-track-position="6"> 1158 <div class="pkg-top"> 1159 <div class="num" data-copy="package.name"></div> 1160 <div class="eyebrow" data-copy="package.eyebrow"></div> 1161 </div> 1162 <div class="pkg-grid"> 1163 <div class="pkg-pitch"> 1164 <h3 data-copy="package.headline"></h3> 1165 <p class="bundle-feature__promise" data-copy="package.promise"></p> 1166 <div class="pkg-foot"> 1167 <p class="bundle-feature__friction" data-copy="package.friction"></p> 1168 <div class="bundle-feature__links" data-copy="package.detailsLink"></div> 1169 </div> 1170 </div> 1171 <div class="pkg-buy"> 1172 <div class="pkg-ledger"> 1173 <div data-copy="package.fact"></div> 1174 <div data-copy="package.fact2"></div> 1175 <div class="pkg-sub" data-copy="package.subtotal"></div> 1176 <div class="pkg-add" data-copy="package.fact3"></div> 1177 <div class="pkg-add" data-fashion data-copy="package.fact4"></div> 1178 </div> 1179 <div class="bundle-feature__price" data-copy="package.price"></div> 1180 <a class="btn accent bundle-feature__checkout bundle-checkout" href="https://luma.com/an4zotn9?coupon=SFSH&utm_source=mirai-site&utm_campaign=summit-hotel-package" data-luma-action="checkout" data-luma-event-id="evt-OUCqVyqoZI5Jeg4" data-luma-ticket-type="ttype-0BjQv0xV4yY5P0l" data-luma-coupon="SFSH" data-luma-utm-source="mirai-site" data-analytics-action="checkout" data-analytics-location="summit_package" data-analytics-target="summit_hotel" data-copy="package.button"></a> 1181 </div> 1182 </div> 1183 </div> 1184 </div> 1185 <div class="voicesbar rv"> 1186 <div class="faces"> 1187 <img src="img/aubrey.jpg" alt="Aubrey de Grey" loading="lazy" decoding="async" /><img src="img/hayano.jpg" alt="Motoshi Hayano" loading="lazy" decoding="async" /><img src="img/yuki.jpg" alt="Yuki Hanyu" loading="lazy" decoding="async" /><img src="img/adam.jpg" alt="Adam Gries" loading="lazy" decoding="async" /> 1188 </div> 1189 <div class="who" data-copy="summits.line"></div> 1190 <a class="more" href="#speakers" data-copy="summits.link"></a> 1191 <a class="more" href="/pricing/" data-analytics-action="site_navigation" data-analytics-location="summits" data-analytics-target="pricing" data-copy="summits.pricingLink"></a> 1192 <a class="more" href="/jp/" lang="ja" hreflang="ja" data-analytics-action="site_navigation" data-analytics-location="summits" data-analytics-target="japan" data-copy="summits.jpLink"></a> 1193 </div> 1194</section> 1195 1196<hr class="rule" /> 1197 1198<!-- âââ FASHION SHOW âââ --> 1199<section class="fashion" id="fashion" data-fashion data-track-section="fashion" data-track-position="7"> 1200 <video muted loop playsinline preload="none" loading="lazy" poster="augment_poster.jpg" aria-hidden="true"> 1201 <source data-src="augment.mp4" type="video/mp4" /></video> 1202 <div class="veil"></div> 1203 <div class="content"> 1204 <div class="eyebrow" data-copy="fashion.eyebrow"></div> 1205 <h2 class="big" data-copy="fashion.headline"></h2> 1206 <p data-copy="fashion.body"></p> 1207 <div class="tags" data-copy="fashion.tags"></div> 1208 <div class="mono" style="margin-bottom:26px; color:var(--faint)" data-copy="fashion.block"></div> 1209 <div style="display:flex; gap:14px; flex-wrap:wrap" data-copy="fashion.block2"></div> 1210 </div> 1211</section> 1212 1213<!-- âââ JAPAN STRIP âââ --> 1214<section class="stripwrap" aria-label="One evening in Kobe" data-track-section="
1214kobe_evening" data-track-position="8"> 1215 <div class="cap mono rv" data-copy="kobe.caption"></div> 1216 <div class="strip"> 1217 <figure><img src="img/harbor-golden-hour.jpg" alt="Kobe harbor at golden hour" loading="lazy" /><figcaption data-copy="kobe.caption2"></figcaption></figure> 1218 <figure><img src="img/izakaya-counter.jpg" alt="Izakaya counter seat" loading="lazy" /><figcaption data-copy="kobe.caption3"></figcaption></figure> 1219 <figure><img src="img/lanterns.jpg" alt="Lantern night" loading="lazy" /><figcaption data-copy="kobe.caption4"></figcaption></figure> 1220 <figure><img src="img/port-tower-night.jpg" alt="Port Tower at night" loading="lazy" /><figcaption data-copy="kobe.caption5"></figcaption></figure> 1221 <figure><img src="img/rokko-night.jpg" alt="Mt. Rokko night view" loading="lazy" /><figcaption data-copy="kobe.caption6"></figcaption></figure> 1222 </div> 1223</section> 1224 1225<!-- âââ AGENDA · DAY RAIL (the stashed "Full Program" section lives in ../retreat/full-program-section.html) âââ --> 1226<section id="agenda" data-track-section="agenda" data-track-position="9"> 1227 <div class="eyebrow rv" data-copy="agenda.eyebrow"></div> 1228 <h2 class="big rv" data-copy="agenda.headline"></h2> 1229 1230 <div class="ag-rail"> 1231 <div class="ag-stop rv"> 1232 <div class="ag-date mono" data-copy="agenda.stn1"></div> 1233 <div class="ag-tag mono" data-copy="agenda.tag1"></div> 1234 <div class="ag-title" data-copy="agenda.summit1"></div> 1235 <ul class="ag-sessions"> 1236 <li><span class="ag-num mono">01</span><span class="ag-t"><span data-copy="agenda.t1"></span><span class="ag-sub" data-copy="agenda.p1"></span></span></li> 1237 <li><span class="ag-num mono">02</span><span class="ag-t" data-copy="agenda.t2"></span></li> 1238 <li><span class="ag-num mono">03</span><span class="ag-t" data-copy="agenda.t3"></span></li> 1239 <li><span class="ag-num mono">04</span><span class="ag-t"><span data-copy="agenda.t4"></span><span class="ag-sub" data-copy="agenda.p4"></span></span></li> 1240 <li><span class="ag-num mono">05</span><span class="ag-t" data-copy="agenda.t5"></span></li> 1241 </ul> 1242 </div> 1243 1244 <div class="ag-stop rv"> 1245 <div class="ag-date mono" data-copy="agenda.stn2"></div> 1246 <div class="ag-tag mono" data-copy="agenda.tag2"></div> 1247 <div class="ag-title" data-copy="agenda.summit2"></div> 1248 <ul class="ag-sessions"> 1249 <li><span class="ag-num mono">01</span><span class="ag-t"><span data-copy="agenda.t6"></span><span class="ag-sub" data-copy="agenda.p6"></span></span></li> 1250 <li><span class="ag-num mono">02</span><span class="ag-t"><span data-copy="agenda.t7"></span><span class="ag-sub" data-copy="agenda.p7"></span></span></li> 1251 <li><span class="ag-num mono">03</span><span class="ag-t"><span data-copy="agenda.t8"></span><span class="ag-sub" data-copy="agenda.p8"></span></span></li> 1252 <li><span class="ag-num mono">04</span><span class="ag-t" data-copy="agenda.t9"></span></li> 1253 </ul> 1254 </div> 1255 1256 <div class="ag-stop ag-stop--finale rv"> 1257 <div class="ag-date mono" data-copy="agenda.stn3"></div> 1258 <div class="ag-finale"> 1259 <div class="ag-tag mono" data-copy="agenda.tag3"></div> 1260 <div class="ag-finale-title" data-copy="agenda.t10"></div> 1261 <div class="ag-finale-sub mono" data-copy="agenda.p10"></div> 1262 </div> 1263 </div> 1264 </div> 1265 1266 <div class="ag-cta rv"> 1267 <div class="ag-note mono" data-copy="agenda.ctaNote"></div> 1268 <div data-copy="agenda.cta"></div> 1269 </div> 1270</section> 1271 1272 1273<!-- âââ FAQ · TICKET STUBS âââ --> 1274<section id="faq" data-track-section="faq" data-track-position="10"> 1275 <div class="fq-grid"> 1276 <header class="fq-head rv"> 1277 <div class="eyebrow" data-copy="faq.eyebrow"></div> 1278 <h2 class="big" data-copy="faq.headline"></h2> 1279 <div class="fq-meta mono" data-copy="faq.meta"></div> 1280 </header> 1281 1282 <div class="fq-stubs rv"> 1283 <details class="faqItem" data-index="Q·01" data-track-faq="What is a popup city?" data-track-position="1" open> 1284 <summary><span class="fq-q" data-copy="faq.q1"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1285 <div class="fq-body"><p data-copy="faq.a1"></p></div> 1286 </details> 1287 <details class="faqItem" data-index="Q·02" data-track-faq="Where exactly in Kobe?" data-track-position="2"> 1288 <summary><span class="fq-q" data-copy="faq.q2"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1289 <div class="fq-body"><p data-copy="faq.a2"></p></div> 1290 </details> 1291 <details class="faqItem" data-index="Q·03" data-track-faq="Do I have to stay the whole month?" data-track-position="3"> 1292 <summary><span class="fq-q" data-copy="faq.q3"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1293 <div class="fq-body"><p data-copy="faq.a3"></p></div> 1294 </details> 1295 <details class="faqItem" data-index="Q·04" data-track-faq="Where do I stay?" data-track-position="4"> 1296 <summary><span class="fq-q" data-copy="faq.q4"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1297 <div class="fq-body"><p data-copy="faq.a4"></p></div> 1298 </details> 1299 <details class="faqItem" data-index="Q·05" data-track-faq="How do tickets and applications work?" data-track-position="5"> 1300 <summary><span class="fq-q" data-copy="faq.q6"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1301 <div class="fq-body"><p data-copy="faq.a6"></p></div> 1302 </details> 1303 <!-- Hidden while showFashionShow is off; numbered last so Q·01â05 stay contiguous --> 1304 <details class="faqItem" data-index="Q·06" data-fashion data-track-faq="What is the Frontier Human Fashion Show?" data-track-position="6"> 1305 <summary><span class="fq-q" data-copy="faq.q5"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary> 1306 <div class="fq-body"><p data-copy="faq.a5"></p></div> 1307 </details> 1308 <p class="fq-foot mono" data-copy="faq.foot"></p> 1309 </div> 1310 </div> 1311</section> 1312 1313<!-- âââ APPLY âââ --> 1314<div class="applywrap" id="apply" data-track-section="apply" data-track-position="11"> 1315 <img class="bg" src="img/future-city-1440.webp" 1316 srcset="img/future-city-960.webp 960w, img/future-city-1440.webp 1440w, img/future-city-1792.webp 1792w" 1317 sizes="100vw" alt="" aria-hidden="true" loading="lazy" decoding="async" /> 1318 <div class="veil"></div> 1319 <section class="apply"> 1320 <div class="eyebrow rv" data-copy="apply.eyebrow"></div> 1321 <h2 class="rv" data-copy="apply.headline"></h2> 1322 <p class="sub rv" data-copy="apply.buttons"></p> 1323 <div class="row rv" data-copy="apply.buttons2"></div> 1324 <div class="fine rv" data-copy="apply.footnote"></div> 1325 <div class="fine rv" style="margin-top:10px" data-copy="apply.footnote2"></div> 1326 <div class="fine rv apply-jp" data-copy="apply.footnote3"></div> 1327 </section> 1328</div> 1329 1330<!-- âââ FOOTER âââ --> 1331<footer> 1332 <div class="see" data-copy="footer.signoff"></div> 1333 <div class="date" data-copy="footer.date"></div> 1334 <div id="count"> 1335 <div><div class="v" id="cd">â</div><div class="k" data-copy="footer.statLabel"></div></div> 1336 <div><div class="v" id="ch">â</div><div class="k" data-copy="footer.statLabel2"></div></div> 1337 <div><div class="v" id="cm">â</div><div class="k" data-copy="footer.statLabel3"></div></div> 1338 <div><div class="v" id="cs">â</div><div class="k" data-copy="footer.statLabel4"></div></div> 1339 </div> 1340 <div class="cdlabel" data-copy="footer.countdownLabel"></div> 1341 <div class="jst" data-copy="footer.jst"></div> 1342 <div class="doors" id="doors" data-copy="footer.links"></div> 1343 <div style="margin-top:36px"> 1344 <img class="daruma foot" id="darumaFoot" src="img/daruma.png" alt="Daruma" title="One eye at the start. The other on October 1." /> 1345 </div> 1346 <div class="mono" style="margin-top:18px; font-size:9px; letter-spacing:.14em; color:var(--faint)" data-copy="footer.block"></div> 1347</footer> 1348
1349<script>applyCopy(); 1350/* Hero word cycle: backspace "frontier tech" and retype the next word from 1351 data-words. Accelerating delete, decelerating type with a little jitter, 1352 a light scramble on alternate letters, 2.4s hold. Pauses when the tab is 1353 hidden or the hero is scrolled away. Off under prefers-reduced-motion. */ 1354(function () { 1355 var el = document.querySelector('.heroRot'); 1356 if (!el || matchMedia('(prefers-reduced-motion: reduce)').matches) return; 1357 var line = el.parentNode, h1 = el.closest('h1'); 1358 h1.setAttribute('aria-label', h1.textContent.trim()); 1359 var words = el.getAttribute('data-words').split('|'); 1360 var pool = words.join('').replace(/\s/g, ''); 1361 var wi = 0, n = words[0].length, del = true, inView = true, timer = 0; 1362 function ease(t) { return 1 - Math.pow(1 - t, 3); } 1363 function go(ms) { clearTimeout(timer); timer = setTimeout(tick, ms); } 1364 function tick() { 1365 if (document.hidden || !inView) { timer = null; return; } 1366 var w = words[wi % words.length]; 1367 if (del) { 1368 n--; el.textContent = w.slice(0, n); line.classList.add('typing'); 1369 if (n === 0) { del = false; wi++; go(220); } 1370 else go(26 + 29 * (n / w.length)); 1371 return; 1372 } 1373 n++; 1374 var shown = w.slice(0, n); 1375 if (n < w.length && n % 2 === 0 && w[n - 1] !== ' ') { 1376 el.textContent = shown.slice(0, -1) + pool[Math.floor(Math.random() * pool.length)]; 1377 setTimeout(function () { el.textContent = shown; }, 34); 1378 } else el.textContent = shown; 1379 if (n === w.length) { del = true; line.classList.remove('typing'); go(2400); } 1380 else go(92 - 46 * ease(n / w.length) + Math.random() * 26 + (n === 1 ? 90 : 0)); 1381 } 1382 function resume() { if (timer === null) go(220); } 1383 document.addEventListener('visibilitychange', resume); 1384 new IntersectionObserver(function (e) { inView = e[0].isIntersecting; resume(); }).observe(h1); 1385 (document.fonts ? document.fonts.ready : Promise.resolve()).then(function () { go(1600); }); 1386})(); 1387/* Split pillar titles into letters for the staggered rise (runs after 1388 copy hydration; titles stay plain strings in copy.js). */ 1389document.querySelectorAll('.knt-title').forEach(function (h) { 1390 var t = h.textContent; 1391 h.setAttribute('aria-label', t); 1392 h.innerHTML = '<span aria-hidden="true">' + t.split('').map(function (c, i) { 1393 return c === ' ' ? ' ' : '<i style="--i:' + i + '">' + c + '</i>'; 1394 }).join('') + '</span>'; 1395});</script>
1395 1396
1397<script id="luma-checkout"></script>
vendor: 1 bytes, line 1397
1397
1398<script> 1399 const noMotion = matchMedia('(prefers-reduced-motion: reduce)').matches; 1400 1401 // The package keeps a normal Luma href as its resilient fallback. Load the 1402 // enhanced overlay only when the package is near view or a pointer/focus 1403 // indicates intent, so its script and stylesheet do not compete with LCP. 1404 const lumaScript = document.getElementById('luma-checkout'); 1405 function loadLumaCheckout() { 1406 if (lumaScript.src) return; 1407 lumaScript.src = 'https://embed.lu.ma/checkout-button.js'; 1408 lumaScript.async = true; 1409 } 1410 document.querySelectorAll('[data-luma-action="checkout"]').forEach(link => { 1411 link.addEventListener('pointerenter', loadLumaCheckout, { once: true }); 1412 link.addEventListener('focus', loadLumaCheckout, { once: true }); 1413 }); 1414 const packageSection = document.getElementById('summit-package'); 1415 if (packageSection) { 1416 const lumaObserver = new IntersectionObserver(entries => { 1417 if (!entries.some(entry => entry.isIntersecting)) return; 1418 loadLumaCheckout(); 1419 lumaObserver.disconnect(); 1420 }, { rootMargin: '600px 0px' }); 1421 lumaObserver.observe(packageSection); 1422 } 1423 1424 // summit + hotel package is capped by spots, not by a date: set 1425 // MIRAI_COPY.js.packageSpotsLeft in copy.js. At 0 it falls back to standard pricing. 1426 if (MIRAI_COPY.js.packageSpotsLeft <= 0) { 1427 const offerLabel = document.querySelector('#summit-package .eyebrow'); 1428 const offerPrice = document.querySelector('.bundle-feature__price'); 1429 const total = MIRAI_COPY.js.packageSpotsTotal; 1430 if (offerLabel) offerLabel.textContent = MIRAI_COPY.js.packageSoldOutLabel; 1431 if (offerPrice) offerPrice.innerHTML = 1432 MIRAI_COPY.js.packageSoldOutPrice.replace(/\{spotsTotal\}/g, total); 1433 document.querySelectorAll('.bundle-checkout').forEach(a => { 1434 a.textContent = MIRAI_COPY.js.packageSoldOutCta; 1435 a.href = 'https://luma.com/an4zotn9?coupon=SFSH&utm_source=post-hotel-package&utm_campaign=post-hotel-package'; 1436 a.dataset.lumaUtmSource = 'post-hotel-package'; 1437 }); 1438 } 1439 1440 // early-bird window closes Aug 31 (JST): page self-heals to standard pricing 1441 const EB_END = new Date('2026-09-01T00:00:00+09:00').getTime(); 1442 if (Date.now() >= EB_END) { 1443 document.documentElement.classList.add('ebOver'); 1444 document.querySelectorAll('.ebTag, .left, .ebClock').forEach(el => el.remove()); 1445 document.querySelectorAll('.ebPrice, .tracks .t .price').forEach(el => { 1446 const s = el.querySelector('s'); 1447 if (s) el.textContent = s.textContent; 1448 }); 1449 } 1450 1451 // The poster is the only eager hero asset. Desktop video starts after the 1452 // poster has rendered and the main thread is idle; mobile/data-saver stays static. 1453 const hero = document.querySelector('.hero'); 1454 const heroPoster = hero.querySelector('.heroPoster'); 1455 const heroVideo = hero.querySelector('.heroVideo'); 1456 const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; 1457 const slowConnection = connection && /(^|-)2g$/.test(connection.effectiveType || ''); 1458 const canPlayHeroVideo = !noMotion && matchMedia('(min-width: 761px)').matches && 1459 !connection?.saveData && !slowConnection; 1460 1461 function loadHeroVideo() { 1462 const source = heroVideo.querySelector('source[data-src]'); 1463 if (!source || source.src) return; 1464 source.src = source.dataset.src; 1465 heroVideo.load(); 1466 heroVideo.play().then(() => heroVideo.classList.add('playing')).catch(() => {}); 1467 } 1468 1469 function scheduleHeroVideo() { 1470 const start = () => loadHeroVideo(); 1471 if ('requestIdleCallback' in window) requestIdleCallback(start, { timeout: 2500 }); 1472 else setTimeout(start, 1200); 1473 } 1474 1475 if (canPlayHeroVideo) { 1476 if (heroPoster.complete) scheduleHeroVideo(); 1477 else heroPoster.addEventListener('load', scheduleHeroVideo, { once: true }); 1478 } 1479 1480 new IntersectionObserver(es => es.forEach(e => { 1481 if (!heroVideo.currentSrc) return; 1482 if (e.isIntersecting) heroVideo.play().catch(() => {}); 1483 else heroVideo.pause(); 1484 }), { threshold: .05 }).observe(hero); 1485 1486 // Fashion-show video gets a source only when its section approaches view. 1487 const fv = document.querySelector('.fashion video'); 1488 new IntersectionObserver(es =>
1488 es.forEach(e => { 1489 if (e.isIntersecting) { 1490 const source = fv.querySelector('source[data-src]'); 1491 if (source && !source.src) { 1492 source.src = source.dataset.src; 1493 fv.load(); 1494 } 1495 if (!noMotion && !connection?.saveData) fv.play().catch(() => {}); 1496 } else fv.pause(); 1497 }), { rootMargin: '200px 0px', threshold: .01 }).observe(fv); 1498 1499 // reveal-on-scroll 1500 const ro = new IntersectionObserver(es => es.forEach(e => { 1501 if (e.isIntersecting) { e.target.classList.add('in'); ro.unobserve(e.target); } 1502 }), { threshold: .12 }); 1503 document.querySelectorAll('.rv').forEach(el => ro.observe(el)); 1504 1505 // kanji tap-to-reveal (touch has no title tooltips) 1506 document.querySelectorAll('.kanji span').forEach(k => { 1507 k.setAttribute('tabindex', '0'); 1508 k.setAttribute('role', 'button'); 1509 k.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); k.click(); } }); 1510 k.addEventListener('click', () => { 1511 if (k._orig) return; 1512 k._orig = k.textContent; 1513 k.textContent = k.getAttribute('title').split(' â ')[0]; 1514 setTimeout(() => { k.textContent = k._orig; k._orig = null; }, 1500); 1515 }); 1516 }); 1517 1518 // placeholder links: never navigate, flash an honest note 1519 document.querySelectorAll('a[href="#"]').forEach(a => { 1520 a.addEventListener('click', e => { 1521 e.preventDefault(); 1522 if (a._flash) return; 1523 a._flash = a.textContent; 1524 a.textContent = MIRAI_COPY.js.placeholderLink; 1525 const sr = document.getElementById('srStatus'); 1526 sr.textContent = ''; 1527 requestAnimationFrame(() => { sr.textContent = MIRAI_COPY.js.placeholderLink; }); 1528 setTimeout(() => { a.textContent = a._flash; a._flash = null; }, 1400); 1529 }); 1530 }); 1531 1532 // daruma: knock him over, he rights himself 1533 const df = document.getElementById('darumaFoot'); 1534 df.addEventListener('click', () => { 1535 df.classList.remove('wobble'); 1536 void df.offsetWidth; 1537 df.classList.add('wobble'); 1538 }); 1539 1540 // countdown to Oct 1 2026 JST + live JST clock 1541 const t0 = new Date('2026-10-01T00:00:00+09:00').getTime(); 1542 const JST_FMT = new Intl.DateTimeFormat('en-GB', { 1543 timeZone: 'Asia/Tokyo', weekday: 'short', hour: '2-digit', minute: '2-digit' }); 1544 const pad = n => String(n).padStart(2, '0'); 1545 const ebClocks = [...document.querySelectorAll('.ebc')]; 1546 function tick() { 1547 if (ebClocks.length) { 1548 let e = Math.max(0, EB_END - Date.now()); 1549 const ed = Math.floor(e / 864e5), eh = Math.floor(e % 864e5 / 36e5), 1550 em = Math.floor(e % 36e5 / 6e4), es = Math.floor(e % 6e4 / 1e3); 1551 const t = pad(ed) + 'D · ' + pad(eh) + 'H · ' + pad(em) + 'M · ' + pad(es) + 'S'; 1552 ebClocks.forEach(el => { el.textContent = t; }); 1553 } 1554 let d = Math.max(0, t0 - Date.now()); 1555 if (d === 0) document.getElementById('cdtext').textContent = MIRAI_COPY.js.countdownOpen; 1556 const day = Math.floor(d / 864e5); d -= day * 864e5; 1557 const hr = Math.floor(d / 36e5); d -= hr * 36e5; 1558 const mn = Math.floor(d / 6e4); d -= mn * 6e4; 1559 const sc = Math.floor(d / 1e3); 1560 cd.textContent = day; ch.textContent = pad(hr); cm.textContent = pad(mn); cs.textContent = pad(sc); 1561 jst.textContent = JST_FMT.format(new Date()); 1562 } 1563 tick(); setInterval(tick, 1000); 1564</script>
1564 1565 1566</body> 1567</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.