diff --git a/public/neon-mirai/assets/agenda-architecture.webp b/public/neon-mirai/assets/agenda-architecture.webp new file mode 100644 index 000000000..88f39434f Binary files /dev/null and b/public/neon-mirai/assets/agenda-architecture.webp differ diff --git a/public/neon-mirai/assets/hero-city.webp b/public/neon-mirai/assets/hero-city.webp new file mode 100644 index 000000000..d285118c8 Binary files /dev/null and b/public/neon-mirai/assets/hero-city.webp differ diff --git a/public/neon-mirai/assets/install-dream.webp b/public/neon-mirai/assets/install-dream.webp new file mode 100644 index 000000000..2c8394249 Binary files /dev/null and b/public/neon-mirai/assets/install-dream.webp differ diff --git a/public/neon-mirai/assets/install-echoes.webp b/public/neon-mirai/assets/install-echoes.webp new file mode 100644 index 000000000..b1c6238b7 Binary files /dev/null and b/public/neon-mirai/assets/install-echoes.webp differ diff --git a/public/neon-mirai/assets/install-flux.webp b/public/neon-mirai/assets/install-flux.webp new file mode 100644 index 000000000..1434758c8 Binary files /dev/null and b/public/neon-mirai/assets/install-flux.webp differ diff --git a/public/neon-mirai/assets/manifesto-fuji-clean.webp b/public/neon-mirai/assets/manifesto-fuji-clean.webp new file mode 100644 index 000000000..f10634ab5 Binary files /dev/null and b/public/neon-mirai/assets/manifesto-fuji-clean.webp differ diff --git a/public/neon-mirai/assets/manifesto-fuji.webp b/public/neon-mirai/assets/manifesto-fuji.webp new file mode 100644 index 000000000..931a2253d Binary files /dev/null and b/public/neon-mirai/assets/manifesto-fuji.webp differ diff --git a/public/neon-mirai/assets/pine-ticket.png b/public/neon-mirai/assets/pine-ticket.png new file mode 100644 index 000000000..a2ecda1b3 Binary files /dev/null and b/public/neon-mirai/assets/pine-ticket.png differ diff --git a/public/neon-mirai/assets/pine-ticket.webp b/public/neon-mirai/assets/pine-ticket.webp new file mode 100644 index 000000000..e8af26e3c Binary files /dev/null and b/public/neon-mirai/assets/pine-ticket.webp differ diff --git a/public/neon-mirai/assets/speaker-aiko-watanabe.webp b/public/neon-mirai/assets/speaker-aiko-watanabe.webp new file mode 100644 index 000000000..70e26823a Binary files /dev/null and b/public/neon-mirai/assets/speaker-aiko-watanabe.webp differ diff --git a/public/neon-mirai/assets/speaker-daichi-ito.webp b/public/neon-mirai/assets/speaker-daichi-ito.webp new file mode 100644 index 000000000..ccbed1375 Binary files /dev/null and b/public/neon-mirai/assets/speaker-daichi-ito.webp differ diff --git a/public/neon-mirai/assets/speaker-emi-kobayashi.webp b/public/neon-mirai/assets/speaker-emi-kobayashi.webp new file mode 100644 index 000000000..48ebc5b47 Binary files /dev/null and b/public/neon-mirai/assets/speaker-emi-kobayashi.webp differ diff --git a/public/neon-mirai/assets/speaker-hana-mori.webp b/public/neon-mirai/assets/speaker-hana-mori.webp new file mode 100644 index 000000000..fd78cf81f Binary files /dev/null and b/public/neon-mirai/assets/speaker-hana-mori.webp differ diff --git a/public/neon-mirai/assets/speaker-keisuke-tanaka.webp b/public/neon-mirai/assets/speaker-keisuke-tanaka.webp new file mode 100644 index 000000000..7fbc3d1f0 Binary files /dev/null and b/public/neon-mirai/assets/speaker-keisuke-tanaka.webp differ diff --git a/public/neon-mirai/assets/speaker-kenji-arata.webp b/public/neon-mirai/assets/speaker-kenji-arata.webp new file mode 100644 index 000000000..beb0955b9 Binary files /dev/null and b/public/neon-mirai/assets/speaker-kenji-arata.webp differ diff --git a/public/neon-mirai/assets/speaker-mina-kuroda.webp b/public/neon-mirai/assets/speaker-mina-kuroda.webp new file mode 100644 index 000000000..07691d492 Binary files /dev/null and b/public/neon-mirai/assets/speaker-mina-kuroda.webp differ diff --git a/public/neon-mirai/assets/speaker-naomi-koga.webp b/public/neon-mirai/assets/speaker-naomi-koga.webp new file mode 100644 index 000000000..e3209b5a2 Binary files /dev/null and b/public/neon-mirai/assets/speaker-naomi-koga.webp differ diff --git a/public/neon-mirai/assets/speaker-ren-sato.webp b/public/neon-mirai/assets/speaker-ren-sato.webp new file mode 100644 index 000000000..146e3ba0c Binary files /dev/null and b/public/neon-mirai/assets/speaker-ren-sato.webp differ diff --git a/public/neon-mirai/assets/speaker-row-01.webp b/public/neon-mirai/assets/speaker-row-01.webp new file mode 100644 index 000000000..6fadbd5f5 Binary files /dev/null and b/public/neon-mirai/assets/speaker-row-01.webp differ diff --git a/public/neon-mirai/assets/speaker-row-02.webp b/public/neon-mirai/assets/speaker-row-02.webp new file mode 100644 index 000000000..1914678dc Binary files /dev/null and b/public/neon-mirai/assets/speaker-row-02.webp differ diff --git a/public/neon-mirai/assets/speaker-row-03.webp b/public/neon-mirai/assets/speaker-row-03.webp new file mode 100644 index 000000000..83b2b62f0 Binary files /dev/null and b/public/neon-mirai/assets/speaker-row-03.webp differ diff --git a/public/neon-mirai/assets/speaker-row-04.webp b/public/neon-mirai/assets/speaker-row-04.webp new file mode 100644 index 000000000..b79f48cce Binary files /dev/null and b/public/neon-mirai/assets/speaker-row-04.webp differ diff --git a/public/neon-mirai/assets/speaker-ryo-fujimoto.webp b/public/neon-mirai/assets/speaker-ryo-fujimoto.webp new file mode 100644 index 000000000..dac4056e4 Binary files /dev/null and b/public/neon-mirai/assets/speaker-ryo-fujimoto.webp differ diff --git a/public/neon-mirai/assets/speaker-sophia-lee.webp b/public/neon-mirai/assets/speaker-sophia-lee.webp new file mode 100644 index 000000000..2e9a426be Binary files /dev/null and b/public/neon-mirai/assets/speaker-sophia-lee.webp differ diff --git a/public/neon-mirai/assets/speaker-strip.webp b/public/neon-mirai/assets/speaker-strip.webp new file mode 100644 index 000000000..94ec18070 Binary files /dev/null and b/public/neon-mirai/assets/speaker-strip.webp differ diff --git a/public/neon-mirai/assets/speaker-yumi-nakamura.webp b/public/neon-mirai/assets/speaker-yumi-nakamura.webp new file mode 100644 index 000000000..aee8e55ff Binary files /dev/null and b/public/neon-mirai/assets/speaker-yumi-nakamura.webp differ diff --git a/public/neon-mirai/assets/stamp-seal.svg b/public/neon-mirai/assets/stamp-seal.svg new file mode 100644 index 000000000..303064cbb --- /dev/null +++ b/public/neon-mirai/assets/stamp-seal.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/neon-mirai/index.html b/public/neon-mirai/index.html new file mode 100644 index 000000000..f03fd81a0 --- /dev/null +++ b/public/neon-mirai/index.html @@ -0,0 +1,344 @@ + + + + + + + NEO MIRAI AI Design Conference + + + + + + + + + +
+ + + + NEO + MIRAI + + + + + + + + + Get tickets + + +
+ +
+
+ + +
+

新しい未来デザインカンファレンス

+

+ NEO MIRAI + AI DESIGN + CONFERENCE +

+

Tokyo 2042

+

Illustration, interfaces, machines, optimism

+
+ May 20–22, 2042 + Tokyo International Forum +
+
+ +
+ An illustrated golden future Tokyo skyline with towers, terraces, and visitors walking toward the conference venue. +
Systems with warmth. Machines with a human horizon.
+
+
+ +
+
+

Agenda

+

Three days of ideas and inspiration

+ +
    +
  1. + +
    +

    New Frontiers

    +

    Keynotes, visions, and emerging paradigms.

    +
    +
    2. +
  2. + +
    +

    Design x Intelligence

    +

    Crafting experiences with AI.

    +
    +
    3. +
  3. + +
    +

    Society & Imagination

    +

    Systems, ethics, and collective futures.

    +
    +
    4. +
+ + View full agenda +
+ +
+ A quiet illustrated architectural platform with amber circles, slim towers, and a lone visitor. +
創造は、未来をつくる最初の一歩。
+
+
+ +
+
+

Speakers

+

Pioneers shaping tomorrow

+ View full speakers +
+ +
+
+
+
    +
  • + Yumi Nakamura illustrated in profile before a golden sun and distant future city. +
    + Yumi Nakamura + AI Ethicist & Researcher +
    +
    • +
  • + Keisuke Tanaka illustrated before an amber sun and speculative city towers. +
    + Keisuke Tanaka + Interaction Designer & Creative Director +
    +
    • +
  • + Sophia Lee illustrated in profile near circular geometry and a temple skyline. +
    + Sophia Lee + Machine Learning Artist +
    +
    • +
+
+ + + + + + +
+ +
+ + + + +
+
+
+ +
+
+

Installations

+

Experiences beyond the screen

+ Explore installations +
+ +
+
+ A tiny visitor standing before a glowing orange spherical installation. +

Harmonic Flux

+

Immersive environment

+
+
+ An illustrated generative ribbon floating through an amber exhibition space. +

Dream Compiler

+

Generative sculpture

+
+
+ A lone visitor in a circular sound installation with a dark center. +

Echoes of Tomorrow

+

AI soundscape

+
+
+
+ +
+
+

Manifesto

+

We believe the future is something we design together.

+ The NEO MIRAI manifesto +
+
+ Mount Fuji and a golden future city beneath a red sun. +
+
+ +
+ +
+

Tickets

+

Choose your experience

+
+ +
+
+

Attendee

+

Full access to all talks and installations.

+ ¥ 49,000 + Select +
+
+

Student

+

Access for students and educators.

+ ¥ 19,000 + Select +
+
+

Supporter

+

Support the community and get benefits.

+ ¥ 99,000 + Select +
+
+

Group

+

For teams of five or more.

+ Contact us + Inquire +
+
+ + +
+
+ + + + + + diff --git a/public/neon-mirai/script.js b/public/neon-mirai/script.js new file mode 100644 index 000000000..d02ac05ff --- /dev/null +++ b/public/neon-mirai/script.js @@ -0,0 +1,155 @@ +const header = document.querySelector(".site-header"); +const nav = document.querySelector("#site-nav"); +const navToggle = document.querySelector(".nav-toggle"); +const revealTargets = document.querySelectorAll("[data-reveal]"); +const navLinks = document.querySelectorAll(".site-nav a"); +const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); + +const setHeaderState = () => { + header.classList.toggle("is-scrolled", window.scrollY > 12); +}; + +setHeaderState(); +window.addEventListener("scroll", setHeaderState, { passive: true }); + +if (navToggle && nav) { + navToggle.addEventListener("click", () => { + const isOpen = navToggle.getAttribute("aria-expanded") === "true"; + navToggle.setAttribute("aria-expanded", String(!isOpen)); + nav.classList.toggle("is-open", !isOpen); + }); + + nav.addEventListener("click", (event) => { + if (event.target instanceof HTMLAnchorElement) { + navToggle.setAttribute("aria-expanded", "false"); + nav.classList.remove("is-open"); + } + }); +} + +const revealObserver = new IntersectionObserver( + (entries, observer) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + }); + }, + { threshold: 0.16, rootMargin: "0px 0px -8% 0px" } +); + +revealTargets.forEach((target) => { + const section = target.closest("section"); + const localTargets = section + ? Array.from(section.querySelectorAll("[data-reveal]")) + : Array.from(revealTargets); + const localIndex = Math.max(localTargets.indexOf(target), 0); + const delay = Math.min(localIndex, 4) * 110; + + target.style.setProperty("--reveal-delay", `${delay}ms`); + revealObserver.observe(target); +}); + +window.setTimeout(() => { + revealTargets.forEach((target) => target.classList.add("is-visible")); +}, 1600); + +const sections = Array.from(document.querySelectorAll("main section[id]")); + +const activeObserver = new IntersectionObserver( + (entries) => { + const visible = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; + + if (!visible) return; + + navLinks.forEach((link) => { + const isActive = link.getAttribute("href") === `#${visible.target.id}`; + if (isActive) { + link.setAttribute("aria-current", "page"); + } else { + link.removeAttribute("aria-current"); + } + }); + }, + { threshold: [0.24, 0.42, 0.64], rootMargin: "-18% 0px -52% 0px" } +); + +sections.forEach((section) => activeObserver.observe(section)); + +const speakerCarousel = document.querySelector(".speaker-carousel"); + +if (speakerCarousel) { + const speakerTrack = speakerCarousel.querySelector(".speaker-track"); + const speakerSlides = Array.from(speakerCarousel.querySelectorAll(".speaker-slide")); + const speakerDots = Array.from(speakerCarousel.querySelectorAll(".speaker-dot")); + let activeSpeakerIndex = 0; + let speakerTimer = null; + + const setSpeakerSlide = (index) => { + activeSpeakerIndex = (index + speakerSlides.length) % speakerSlides.length; + speakerCarousel.style.setProperty("--speaker-index", activeSpeakerIndex); + speakerCarousel.style.setProperty("--speaker-offset", `${activeSpeakerIndex * -100}%`); + + speakerSlides.forEach((slide, slideIndex) => { + const isActive = slideIndex === activeSpeakerIndex; + slide.classList.toggle("is-active", isActive); + slide.toggleAttribute("aria-hidden", !isActive); + }); + + speakerDots.forEach((dot, dotIndex) => { + const isActive = dotIndex === activeSpeakerIndex; + dot.classList.toggle("is-active", isActive); + if (isActive) { + dot.setAttribute("aria-current", "true"); + } else { + dot.removeAttribute("aria-current"); + } + }); + }; + + const stopSpeakerTimer = () => { + if (!speakerTimer) return; + window.clearInterval(speakerTimer); + speakerTimer = null; + }; + + const startSpeakerTimer = () => { + if (reducedMotion.matches || speakerSlides.length < 2 || speakerTimer) return; + speakerTimer = window.setInterval(() => { + setSpeakerSlide(activeSpeakerIndex + 1); + }, 5600); + }; + + speakerDots.forEach((dot) => { + dot.addEventListener("click", () => { + const slideIndex = Number(dot.dataset.slide); + if (Number.isNaN(slideIndex)) return; + setSpeakerSlide(slideIndex); + stopSpeakerTimer(); + startSpeakerTimer(); + }); + }); + + speakerCarousel.addEventListener("pointerenter", stopSpeakerTimer); + speakerCarousel.addEventListener("pointerleave", startSpeakerTimer); + speakerCarousel.addEventListener("focusin", stopSpeakerTimer); + speakerCarousel.addEventListener("focusout", startSpeakerTimer); + speakerCarousel.addEventListener("keydown", (event) => { + if (event.key === "ArrowDown" || event.key === "ArrowRight") { + event.preventDefault(); + setSpeakerSlide(activeSpeakerIndex + 1); + } + + if (event.key === "ArrowUp" || event.key === "ArrowLeft") { + event.preventDefault(); + setSpeakerSlide(activeSpeakerIndex - 1); + } + }); + + if (speakerTrack) { + setSpeakerSlide(0); + startSpeakerTimer(); + } +} diff --git a/public/neon-mirai/styles.css b/public/neon-mirai/styles.css new file mode 100644 index 000000000..996259618 --- /dev/null +++ b/public/neon-mirai/styles.css @@ -0,0 +1,2065 @@ +:root { + color-scheme: light; + --paper: oklch(94% 0.035 78); + --paper-soft: oklch(91% 0.045 78); + --paper-deep: oklch(84% 0.06 73); + --ink: oklch(18% 0.035 82); + --ink-soft: oklch(32% 0.045 80); + --ash: oklch(54% 0.04 80); + --line: oklch(73% 0.055 77); + --gold: oklch(68% 0.145 74); + --gold-bright: oklch(76% 0.165 80); + --sun: oklch(64% 0.19 43); + --sun-deep: oklch(52% 0.17 38); + --night: oklch(17% 0.035 185); + --night-soft: oklch(24% 0.04 170); + --rice: oklch(97% 0.02 82); + --focus: oklch(58% 0.18 42); + --shadow: 0 28px 90px oklch(24% 0.05 75 / 0.22); + --ease: cubic-bezier(0.16, 1, 0.3, 1); + --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); + --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); + --font-display: "Chakra Petch", "Noto Sans JP", sans-serif; + --font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", serif; + --font-mono: "Azeret Mono", "SFMono-Regular", monospace; + --header-height: 74px; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + width: 100%; + background: var(--paper); + scroll-behavior: smooth; + overflow-x: clip; +} + +body { + margin: 0; + width: 100%; + min-width: 320px; + color: var(--ink); + background: + radial-gradient(circle at 66% 7%, oklch(82% 0.11 79 / 0.55), transparent 17rem), + linear-gradient(90deg, oklch(20% 0.015 80 / 0.035) 1px, transparent 1px), + linear-gradient(0deg, oklch(20% 0.015 80 / 0.028) 1px, transparent 1px), + var(--paper); + background-size: auto, 112px 112px, 112px 112px, auto; + font-family: var(--font-serif); + line-height: 1.55; + overflow-x: clip; +} + +body::before { + position: fixed; + inset: 0; + z-index: 10; + pointer-events: none; + content: ""; + opacity: 0.42; + mix-blend-mode: multiply; + background: + radial-gradient(circle at 18% 21%, oklch(100% 0 0 / 0.6), transparent 0.08rem), + radial-gradient(circle at 76% 63%, oklch(36% 0.05 70 / 0.18), transparent 0.07rem), + radial-gradient(circle at 48% 88%, oklch(38% 0.07 35 / 0.14), transparent 0.06rem); + background-size: 0.7rem 0.85rem, 1.1rem 1.3rem, 0.95rem 1.05rem; +} + +img { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +a { + -webkit-tap-highlight-color: transparent; +} + +:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 5px; +} + +.skip-link { + position: fixed; + top: 1rem; + left: 1rem; + z-index: 30; + padding: 0.75rem 1rem; + color: var(--rice); + background: var(--night); + transform: translateY(-160%); + transition: transform 240ms var(--ease); + font-family: var(--font-mono); + font-size: 0.78rem; +} + +.skip-link:focus { + transform: translateY(0); +} + +.site-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 20; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 1.5rem; + min-height: var(--header-height); + padding: max(0.7rem, env(safe-area-inset-top)) clamp(1rem, 2.7vw, 2rem) 0.7rem; + color: var(--ink); + background: linear-gradient(180deg, oklch(94% 0.035 78 / 0.94), oklch(94% 0.035 78 / 0.72), transparent); +} + +.site-header.is-scrolled { + background: var(--paper); + border-bottom: 1px solid oklch(58% 0.06 76 / 0.25); + box-shadow: 0 18px 50px oklch(18% 0.03 76 / 0.08); +} + +.brand-lockup { + display: inline-flex; + align-items: center; + gap: 0.62rem; + min-height: 44px; +} + +.brand-lockup-small { + min-height: 0; +} + +.brand-mark { + position: relative; + width: 2.18rem; + aspect-ratio: 1; + border-radius: 50%; + overflow: hidden; + border: 1px solid oklch(30% 0.035 78 / 0.45); + background: + linear-gradient(90deg, transparent 49%, var(--ink) 49% 51%, transparent 51%), + linear-gradient(0deg, transparent 49%, var(--ink) 49% 51%, transparent 51%), + radial-gradient(circle at 72% 25%, var(--rice) 0 19%, transparent 20%), + linear-gradient(135deg, var(--gold) 0 38%, var(--sun) 38% 58%, var(--night-soft) 58%); +} + +.brand-mark span { + position: absolute; + inset: 58% 0 0; + background: oklch(84% 0.04 78 / 0.65); +} + +.brand-word { + display: grid; + gap: 0.07rem; + font-family: var(--font-mono); + font-size: 0.76rem; + line-height: 1; + text-transform: uppercase; +} + +.site-nav { + justify-self: center; + display: flex; + align-items: center; + gap: clamp(0.95rem, 2.05vw, 2.2rem); + margin-left: clamp(1.15rem, 2.7vw, 2.4rem); + font-family: var(--font-mono); + font-size: 0.62rem; + text-transform: uppercase; +} + +.site-nav a { + position: relative; + min-height: 44px; + display: inline-flex; + align-items: center; + color: var(--ink-soft); + transition: color 180ms var(--ease), transform 240ms var(--ease); +} + +.site-nav a::after { + position: absolute; + left: 50%; + bottom: 0.55rem; + width: 0.32rem; + height: 0.32rem; + border-radius: 50%; + background: currentColor; + content: ""; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: opacity 180ms var(--ease), transform 240ms var(--ease); +} + +.site-nav a:hover, +.site-nav a:focus-visible, +.site-nav a[aria-current="page"] { + color: var(--ink); +} + +.site-nav a:hover::after, +.site-nav a:focus-visible::after, +.site-nav a[aria-current="page"]::after { + opacity: 1; + transform: translate(-50%, 0); +} + +.ticket-pill { + display: inline-flex; + align-items: center; + gap: 0.58rem; + min-height: 44px; + padding: 0.58rem 0.56rem 0.58rem 0.86rem; + color: var(--rice); + background: var(--gold); + font-family: var(--font-mono); + font-size: 0.64rem; + font-weight: 700; + text-transform: uppercase; + white-space: nowrap; + transition: background 180ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease); +} + +.ticket-pill svg, +.text-action span { + width: 1.44rem; + height: 1.44rem; + border: 1px solid currentColor; + border-radius: 50%; +} + +.ticket-pill svg { + padding: 0.3rem; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.5; +} + +.ticket-pill:hover, +.ticket-pill:focus-visible { + background: var(--sun-deep); + box-shadow: 0 18px 52px oklch(50% 0.15 50 / 0.32); + transform: translateY(-2px); +} + +.nav-toggle { + display: none; +} + +section[id] { + scroll-margin-top: var(--header-height); +} + +.hero { + position: relative; + height: clamp(32.5rem, 60.3vw, 54.4rem); + display: block; + padding-top: var(--header-height); + overflow: clip; + border-bottom: 1px solid var(--line); +} + +.hero::after { + position: absolute; + inset: 0; + z-index: 2; + background: + linear-gradient( + 90deg, + oklch(94% 0.035 78 / 0.98) 0 28.8%, + oklch(94% 0.035 78 / 0.88) 31.2%, + oklch(94% 0.035 78 / 0.34) 38.5%, + transparent 47% + ); + content: ""; + pointer-events: none; +} + +.vertical-poem { + position: absolute; + left: clamp(1rem, 3.2vw, 2.8rem); + top: 37%; + z-index: 4; + display: flex; + flex-direction: column; + align-items: center; + gap: clamp(0.95rem, 1.45vw, 1.35rem); + color: var(--ink-soft); + font-family: var(--font-serif); + font-size: clamp(0.9rem, 1.4vw, 1.15rem); +} + +.vertical-poem span { + writing-mode: vertical-rl; + animation: ink-settle 900ms var(--ease) 260ms both; +} + +.vertical-poem i { + display: block; + width: 1px; + height: clamp(5rem, 11vw, 9rem); + background: var(--line); + transform-origin: top; + animation: vertical-line-draw 720ms var(--ease-quart) 760ms both; +} + +.vertical-poem img { + width: clamp(1.45rem, 2.1vw, 1.95rem); + height: auto; + opacity: 0.9; + animation: stamp-press 520ms var(--ease-quint) 1240ms both; +} + +.hero-copy { + position: relative; + z-index: 4; + width: min(50rem, calc(100% - 2rem)); + padding: clamp(2.6rem, 4.6vw, 4.2rem) 0 0 clamp(5.8rem, 9vw, 8rem); +} + +.kicker { + position: absolute; + left: clamp(2.1rem, 3.3vw, 3.2rem); + top: clamp(0.8rem, 1.4vw, 1.3rem); + margin: 0; + color: var(--ink-soft); + font-family: var(--font-serif); + font-size: 1rem; + writing-mode: vertical-rl; +} + +.hero h1 { + max-width: 5.75em; + margin: 0; + font-family: var(--font-display); + font-size: clamp(3.45rem, 7.3vw, 6.55rem); + font-weight: 300; + line-height: 0.96; + text-transform: uppercase; +} + +.hero h1 span { + display: block; +} + +.hero-place { + margin: 0.9rem 0 0; + color: var(--sun-deep); + font-family: var(--font-serif); + font-size: clamp(1.65rem, 3.1vw, 3.1rem); + line-height: 1; +} + +.hero-summary { + max-width: 18rem; + margin: 1.05rem 0 clamp(2.8rem, 4.8vw, 4.8rem); + color: var(--ink-soft); + font-size: clamp(1rem, 1.35vw, 1.35rem); + line-height: 1.38; +} + +.hero-meta { + display: grid; + gap: 0.3rem; + color: var(--ink); + font-family: var(--font-mono); + font-size: 0.75rem; + text-transform: uppercase; +} + +.hero-art { + position: absolute; + z-index: 1; + inset: 0; + margin: 0; + display: grid; + align-items: end; +} + +.hero-art::after { + position: absolute; + right: clamp(1.3rem, 3.2vw, 3rem); + top: clamp(4.9rem, 8vw, 7rem); + z-index: 2; + width: clamp(3.5rem, 5.6vw, 5.4rem); + height: clamp(7.2rem, 12vw, 11.5rem); + border: 1px solid oklch(28% 0.04 78 / 0.55); + background: + radial-gradient(circle at 50% 19%, transparent 0 1.1rem, var(--ink) 1.13rem 1.18rem, transparent 1.2rem), + linear-gradient(90deg, transparent 49%, oklch(24% 0.04 78 / 0.45) 49% 51%, transparent 51%), + linear-gradient(0deg, transparent 21%, oklch(24% 0.04 78 / 0.28) 21% 22%, transparent 22%), + oklch(91% 0.035 78 / 0.78); + color: var(--ink); + content: "新しい未来\aデザイン\aカンファレンス"; + display: grid; + place-items: center; + padding: 2.4rem 0.25rem 0.55rem; + font-size: clamp(0.58rem, 0.9vw, 0.82rem); + line-height: 1.1; + text-align: center; + white-space: pre; + writing-mode: vertical-rl; + box-shadow: 0 18px 55px oklch(18% 0.04 75 / 0.12); +} + +.hero-art img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; + mix-blend-mode: multiply; + filter: saturate(1.02) contrast(1.05); +} + +.hero-art figcaption { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.agenda-block { + display: grid; + grid-template-columns: minmax(16.5rem, 32vw) 1fr; + height: clamp(23.1rem, 43vw, 38.7rem); + border-bottom: 1px solid var(--line); +} + +.agenda-panel { + position: relative; + display: grid; + align-content: start; + min-height: 0; + padding: clamp(1.35rem, 2.55vw, 2.35rem); + color: var(--rice); + background: + radial-gradient(circle at 100% 0, oklch(40% 0.08 74 / 0.35), transparent 16rem), + linear-gradient(135deg, var(--night), oklch(13% 0.035 180)); + overflow: clip; +} + +.agenda-panel::after { + position: absolute; + right: -10.8rem; + top: 0; + z-index: 0; + width: 21.6rem; + aspect-ratio: 1; + border-radius: 50%; + background: linear-gradient(180deg, var(--gold-bright), var(--sun)); + content: ""; + opacity: 0.86; + mix-blend-mode: multiply; + pointer-events: none; +} + +.agenda-panel > * { + position: relative; + z-index: 1; +} + +.agenda-panel .section-label, +.agenda-panel h2, +.agenda-days li, +.agenda-panel .text-action { + opacity: 0; + filter: blur(3px); + transform: translate3d(-0.85rem, 0, 0); + transition: + opacity 560ms var(--ease), + filter 640ms var(--ease), + transform 760ms var(--ease-quint); +} + +.agenda-panel.is-visible .section-label, +.agenda-panel.is-visible h2, +.agenda-panel.is-visible .agenda-days li, +.agenda-panel.is-visible .text-action { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0); +} + +.agenda-panel.is-visible h2 { + transition-delay: 110ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(1) { + transition-delay: 220ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(2) { + transition-delay: 340ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(3) { + transition-delay: 460ms; +} + +.agenda-panel.is-visible .text-action { + transition-delay: 610ms; +} + +.section-label { + margin: 0 0 0.72rem; + color: inherit; + font-family: var(--font-display); + font-size: clamp(1.9rem, 3.4vw, 3rem); + font-weight: 300; + line-height: 1; + text-transform: uppercase; +} + +.agenda-panel h2, +.section-intro h2, +.tickets-heading h2 { + max-width: 17rem; + margin: 0; + color: inherit; + font-size: 1.1rem; + font-weight: 400; + line-height: 1.42; +} + +.agenda-days { + position: relative; + z-index: 1; + display: grid; + gap: clamp(0.58rem, 1.2vw, 1.08rem); + margin: clamp(1rem, 1.75vw, 1.65rem) 0 clamp(0.72rem, 1.25vw, 1.25rem); + padding: 0; + list-style: none; +} + +.agenda-days li { + position: relative; + display: grid; + grid-template-columns: 4.6rem 1fr; + gap: 2.05rem; +} + +.agenda-days li::before { + position: absolute; + left: 5.18rem; + top: 0.25rem; + width: 0.88rem; + aspect-ratio: 1; + border: 1px solid var(--gold-bright); + border-radius: 50%; + box-shadow: inset 0 0 0 0.25rem var(--night); + content: ""; + opacity: 0; + transform: scale(0.45); + transition: opacity 420ms var(--ease), transform 580ms var(--ease-quint); +} + +.agenda-days li:not(:last-child)::after { + position: absolute; + left: calc(5.18rem + 0.44rem); + top: 1.2rem; + width: 1px; + height: calc(100% + 1.2rem); + background: var(--gold-bright); + content: ""; + opacity: 0.76; + transform: scaleY(0); + transform-origin: top; + transition: transform 720ms var(--ease-quart); +} + +.agenda-panel.is-visible .agenda-days li::before { + opacity: 1; + transform: scale(1); +} + +.agenda-panel.is-visible .agenda-days li:nth-child(1)::before { + transition-delay: 330ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(2)::before { + transition-delay: 470ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(3)::before { + transition-delay: 610ms; +} + +.agenda-panel.is-visible .agenda-days li:not(:last-child)::after { + transform: scaleY(1); +} + +.agenda-panel.is-visible .agenda-days li:nth-child(1)::after { + transition-delay: 420ms; +} + +.agenda-panel.is-visible .agenda-days li:nth-child(2)::after { + transition-delay: 560ms; +} + +.agenda-days time { + color: var(--sun); + font-family: var(--font-mono); + font-size: clamp(0.68rem, 0.92vw, 0.78rem); + font-weight: 700; + text-transform: uppercase; +} + +.agenda-days time span { + display: block; + color: var(--rice); + font-weight: 500; +} + +.agenda-days h3 { + margin: 0 0 0.14rem; + color: var(--gold-bright); + font-size: clamp(0.72rem, 1vw, 0.86rem); + font-weight: 600; +} + +.agenda-days p { + max-width: 12rem; + margin: 0; + color: oklch(91% 0.035 78 / 0.84); + font-size: clamp(0.72rem, 1vw, 0.84rem); + line-height: 1.2; +} + +.text-action { + display: inline-flex; + align-items: center; + gap: 0.7rem; + width: fit-content; + min-height: 44px; + color: var(--ink-soft); + font-family: var(--font-mono); + font-size: 0.72rem; + font-weight: 600; + text-transform: uppercase; + transition: color 180ms var(--ease), transform 240ms var(--ease); +} + +.text-action span { + display: inline-grid; + place-items: center; + font-family: var(--font-serif); +} + +.agenda-panel .text-action, +.text-action-light { + color: var(--gold-bright); +} + +.text-action:hover, +.text-action:focus-visible { + color: var(--sun-deep); + transform: translateX(0.2rem); +} + +.agenda-art { + position: relative; + min-height: 0; + height: 100%; + margin: 0; + overflow: hidden; + background: var(--paper-soft); +} + +.agenda-art img { + width: 100%; + height: 100%; + object-fit: cover; + mix-blend-mode: multiply; +} + +.agenda-art figcaption { + position: absolute; + left: 2.2rem; + top: 4rem; + color: var(--ink-soft); + font-size: clamp(0.98rem, 1.7vw, 1.25rem); + writing-mode: vertical-rl; +} + +.speakers, +.installations { + display: grid; + grid-template-columns: minmax(12rem, 25%) 1fr; + gap: 0; + padding: 0 clamp(1.2rem, 3.5vw, 3rem); + border-bottom: 1px solid var(--line); +} + +.section-intro { + display: grid; + align-content: start; + gap: 0.9rem; + padding-top: clamp(3.3rem, 6.8vw, 6rem); +} + +.section-intro .text-action { + margin-top: 3.5rem; +} + +.speaker-carousel { + --speaker-index: 0; + --speaker-offset: 0%; + position: relative; + min-width: 0; + min-height: 0; + overflow: clip; + background: var(--paper-soft); + isolation: isolate; +} + +.speaker-track { + display: flex; + flex-direction: column; + height: 100%; + transform: translate3d(0, var(--speaker-offset), 0); + transition: transform 620ms var(--ease-quint); + will-change: transform; +} + +.speaker-slide { + position: relative; + flex: 0 0 100%; + min-width: 0; + min-height: 100%; + height: 100%; + overflow: clip; +} + +.speaker-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + height: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.speaker-person { + --speaker-focus-x: 50%; + --speaker-focus-y: 48%; + position: relative; + min-width: 0; + overflow: clip; + background: + linear-gradient(90deg, oklch(20% 0.015 80 / 0.035) 1px, transparent 1px), + linear-gradient(0deg, oklch(20% 0.015 80 / 0.026) 1px, transparent 1px), + var(--paper-soft); + background-size: 112px 112px, 112px 112px, auto; + isolation: isolate; +} + +.speaker-person + .speaker-person { + border-left: 1px solid oklch(50% 0.04 78 / 0.24); +} + +.speaker-person::after { + position: absolute; + inset: 0; + z-index: 1; + background: + radial-gradient(circle at 50% 58%, oklch(81% 0.14 78 / 0.14), transparent 28%), + linear-gradient(0deg, oklch(12% 0.025 80 / 0.72), oklch(12% 0.025 80 / 0.28) 31%, transparent 58%); + content: ""; + opacity: 0.82; + transition: opacity 420ms var(--ease); +} + +.speaker-person img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: var(--speaker-focus-x) var(--speaker-focus-y); + filter: saturate(1.04) contrast(1.08); + transform: scale(1.035); + transition: transform 920ms var(--ease-quint), filter 520ms var(--ease); + will-change: transform; +} + +.speaker-carousel:hover .speaker-slide.is-active .speaker-person img, +.speaker-carousel:focus-within .speaker-slide.is-active .speaker-person img { + filter: saturate(1.1) contrast(1.13); + transform: scale(1.06); +} + +.speaker-person:hover img, +.speaker-person:focus-within img { + filter: saturate(1.16) contrast(1.16); + transform: scale(1.09); +} + +.speaker-person:hover::after, +.speaker-person:focus-within::after { + opacity: 1; +} + +.speaker-meta { + position: absolute; + left: clamp(1rem, 1.6vw, 1.55rem); + bottom: clamp(1rem, 1.75vw, 1.65rem); + z-index: 2; + display: grid; + max-width: min(12rem, calc(100% - 3rem)); + opacity: 0; + text-shadow: 0 2px 18px oklch(10% 0.02 80 / 0.78); + transform: translate3d(0, 0.78rem, 0); + transition: + opacity 580ms var(--ease), + transform 780ms var(--ease-quint); + will-change: transform; +} + +.speaker-carousel.is-visible .speaker-slide.is-active .speaker-meta { + opacity: 1; + transform: translate3d(0, 0, 0); +} + +.speaker-carousel.is-visible .speaker-slide.is-active .speaker-person:nth-child(2) .speaker-meta { + transition-delay: 110ms; +} + +.speaker-carousel.is-visible .speaker-slide.is-active .speaker-person:nth-child(3) .speaker-meta { + transition-delay: 220ms; +} + +.speaker-person:hover .speaker-meta, +.speaker-person:focus-within .speaker-meta { + transform: translate3d(0, -0.22rem, 0); +} + +.speaker-person::before { + position: absolute; + top: clamp(1rem, 1.65vw, 1.65rem); + right: clamp(0.8rem, 1.45vw, 1.35rem); + z-index: 2; + color: oklch(91% 0.045 78 / 0.72); + content: attr(data-kanji); + font-size: clamp(0.68rem, 0.9vw, 0.9rem); + letter-spacing: 0.12em; + line-height: 1.15; + text-shadow: 0 2px 14px oklch(12% 0.03 80 / 0.56); + transform: translate3d(0, 0, 0); + transition: color 260ms var(--ease), transform 520ms var(--ease-quint); + will-change: transform; + writing-mode: vertical-rl; +} + +.speaker-person:hover::before, +.speaker-person:focus-within::before { + color: oklch(97% 0.04 78 / 0.86); + transform: translate3d(0, -0.22rem, 0); +} + +.speaker-meta span, +.speaker-meta small { + display: block; +} + +.speaker-meta span { + color: var(--gold-bright); + font-size: clamp(0.88rem, 1.04vw, 1.22rem); + line-height: 1.1; +} + +.speaker-meta small { + margin-top: 0.22rem; + color: oklch(94% 0.032 78 / 0.84); + font-size: clamp(0.58rem, 0.7vw, 0.78rem); + line-height: 1.18; +} + +.speaker-controls { + position: absolute; + top: 50%; + left: clamp(1.35rem, 3vw, 3.1rem); + right: auto; + z-index: 2; + display: grid; + gap: 0.48rem; + transform: translateY(-50%); +} + +.speaker-dot { + width: 1rem; + height: 1rem; + padding: 0; + border: 0; + border-radius: 50%; + background: radial-gradient(circle, var(--ink-soft) 0 0.22rem, transparent 0.24rem); + opacity: 0.55; + cursor: pointer; + transition: opacity 180ms var(--ease), transform 320ms var(--ease-quint), background 180ms var(--ease); +} + +.speaker-dot:hover, +.speaker-dot:focus-visible, +.speaker-dot.is-active { + background: radial-gradient(circle, var(--sun) 0 0.24rem, transparent 0.26rem); + opacity: 1; + transform: scale(1.2); +} + +.installations { + grid-template-columns: minmax(13.75rem, 28%) 1fr; + align-items: start; + min-height: clamp(15.3rem, 28.7vw, 25.5rem); + padding-top: clamp(0.82rem, 1.5vw, 1.5rem); + padding-bottom: clamp(0.78rem, 1.4vw, 1.45rem); +} + +.speakers { + grid-template-columns: 1fr minmax(12rem, 25%); + height: clamp(17.9rem, 33.4vw, 30rem); + padding: 0; + overflow: clip; +} + +.speakers .section-intro { + grid-column: 2; + grid-row: 1; + padding-top: clamp(3.45rem, 6.6vw, 5.8rem); + padding-right: clamp(1.85rem, 3.5vw, 3rem); + padding-left: clamp(1.35rem, 2.2vw, 2rem); +} + +.speakers .speaker-carousel { + grid-column: 1; + grid-row: 1; +} + +.installations .section-intro { + padding-top: clamp(2rem, 3.9vw, 3.5rem); +} + +.installations .section-intro .text-action { + margin-top: 1.65rem; + gap: 0.54rem; +} + +.installations .section-label { + font-size: clamp(1.55rem, 3vw, 2.65rem); +} + +.installation-rhythm { + display: grid; + grid-template-columns: repeat(3, minmax(9rem, clamp(10rem, 13.5vw, 18rem))); + align-items: start; + gap: clamp(1.2rem, 3.1vw, 3.8rem); + justify-content: space-between; +} + +.installation-item { + position: relative; +} + +.installation-rhythm .installation-item { + opacity: 0; + filter: blur(3px); + transform: translate3d(0, 1rem, 0); + transition: + opacity 560ms var(--ease), + filter 680ms var(--ease), + transform 780ms var(--ease-quint); +} + +.installation-rhythm.is-visible .installation-item { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0); +} + +.installation-rhythm.is-visible .installation-item:nth-child(2) { + transition-delay: 120ms; +} + +.installation-rhythm.is-visible .installation-item:nth-child(3) { + transition-delay: 240ms; +} + +.installation-item img { + width: 100%; + aspect-ratio: 1.04; + object-fit: cover; + background: var(--paper-soft); + filter: saturate(0.98) contrast(1.03); + transition: transform 520ms var(--ease-quint), box-shadow 520ms var(--ease-quint); +} + +.installation-item h3 { + margin: clamp(0.72rem, 1.1vw, 1.05rem) 0 0.04rem; + color: var(--ink-soft); + font-size: clamp(1rem, 1.45vw, 1.62rem); + font-weight: 500; +} + +.installation-item p { + margin: 0; + color: var(--ash); + font-size: clamp(0.86rem, 1.1vw, 1.16rem); +} + +.installation-item::before { + position: absolute; + inset: 0.45rem auto auto -0.9rem; + width: 0.32rem; + height: 0.32rem; + border-radius: 50%; + background: var(--sun); + box-shadow: 0 0.74rem 0 oklch(66% 0.15 74 / 0.48), 0 1.48rem 0 oklch(66% 0.15 74 / 0.28); + content: ""; + opacity: 0; + transition: opacity 240ms var(--ease), transform 420ms var(--ease); + transform: translateY(-0.5rem); +} + +.installation-item:hover img, +.installation-item:focus-within img { + box-shadow: var(--shadow); + transform: translateY(-0.45rem); +} + +.installation-item:hover::before, +.installation-item:focus-within::before { + opacity: 1; + transform: translateY(0); +} + +.manifesto { + display: grid; + grid-template-columns: 1fr 1fr; + min-height: clamp(11.6rem, 21.4vw, 18rem); + overflow: clip; + border-bottom: 1px solid var(--line); +} + +.manifesto-copy { + position: relative; + display: grid; + align-content: start; + min-height: 0; + overflow: clip; + padding: clamp(2.35rem, 4.55vw, 4.1rem) clamp(1.2rem, 7vw, 7.2rem) clamp(1.45rem, 2.7vw, 2.7rem); + color: var(--rice); + background: + linear-gradient(90deg, oklch(12% 0.025 185 / 0.28) 1px, transparent 1px), + linear-gradient(0deg, oklch(12% 0.025 185 / 0.2) 1px, transparent 1px), + linear-gradient(135deg, var(--sun), var(--sun-deep)); + background-size: 80px 80px, 80px 80px, auto; +} + +.manifesto-copy h2 { + max-width: 25rem; + margin: 0 0 clamp(1rem, 2vw, 1.8rem); + font-size: clamp(1.95rem, 3.25vw, 3.15rem); + font-weight: 400; + line-height: 1.1; +} + +.manifesto-copy .section-label { + margin-bottom: 0.82rem; + font-size: 0.72rem; + font-family: var(--font-mono); +} + +.manifesto-art { + min-height: 0; + margin: 0; + overflow: hidden; +} + +.manifesto-art img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 43%; + mix-blend-mode: multiply; + transform: scale(1.075); + transform-origin: center; +} + +.tickets { + position: relative; + display: grid; + grid-template-columns: minmax(8.5rem, 16.5%) minmax(9.2rem, 17.5%) minmax(0, 1fr) minmax(8.4rem, 14.5%); + gap: 0; + align-items: center; + min-height: clamp(11.2rem, 21.5vw, 14.35rem); + padding: clamp(0.58rem, 1.05vw, 1rem) clamp(1.2rem, 3vw, 2rem); + overflow-x: clip; + overflow-y: visible; +} + +.ticket-pine { + position: absolute; + left: clamp(-5.8rem, -8.8vw, -3rem); + top: clamp(-4.4rem, -5.6vw, -2.2rem); + z-index: 0; + width: clamp(15.8rem, 29vw, 30rem); + pointer-events: none; + opacity: 0.98; + transform: translate3d(-0.6rem, 0.4rem, 0); + transition: transform 1000ms var(--ease), opacity 760ms var(--ease); +} + +.tickets:has(.tickets-heading.is-visible) .ticket-pine { + transform: translate3d(0, 0, 0); +} + +.tickets-heading { + grid-column: 2; + position: relative; + z-index: 1; + transform: translateY(-0.28rem); +} + +.ticket-options { + grid-column: 3; + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(4, minmax(5.65rem, 1fr)); + gap: 0; + padding-right: clamp(0.65rem, 1.45vw, 1.35rem); +} + +.ticket-options article { + position: relative; + display: grid; + justify-items: center; + align-content: start; + grid-template-rows: 0.58rem auto 2.55rem 1.52rem 2.35rem; + row-gap: 0.34rem; + min-height: 7rem; + padding: 0 0.38rem; + text-align: center; + opacity: 0; + transform: translate3d(0, 0.75rem, 0); + transition: opacity 480ms var(--ease), transform 620ms var(--ease-quint); +} + +.ticket-options.is-visible article { + opacity: 1; + transform: translate3d(0, 0, 0); +} + +.ticket-options.is-visible article:nth-child(2) { + transition-delay: 90ms; +} + +.ticket-options.is-visible article:nth-child(3) { + transition-delay: 180ms; +} + +.ticket-options.is-visible article:nth-child(4) { + transition-delay: 270ms; +} + +.ticket-options article + article { + border-left: 1px solid var(--line); +} + +.ticket-options article::before { + width: 0.58rem; + aspect-ratio: 1; + border: 1px solid var(--gold); + border-radius: 50%; + box-shadow: inset 0 0 0 0.2rem var(--paper); + content: ""; + transform: scale(0.72); + transition: transform 360ms var(--ease-quint), background 260ms var(--ease); +} + +.ticket-options.is-visible article::before { + transform: scale(1); +} + +.ticket-options article:hover::before, +.ticket-options article:focus-within::before { + background: var(--gold); +} + +.ticket-options h3 { + margin: 0; + color: var(--ink-soft); + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 500; + text-transform: uppercase; +} + +.ticket-options p { + max-width: 6.7rem; + margin: 0; + color: var(--ink-soft); + font-size: 0.68rem; + line-height: 1.18; +} + +.ticket-options strong { + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--sun-deep); + font-family: var(--font-serif); + font-size: 0.86rem; + font-weight: 600; +} + +.ticket-options a, +.ticket-seal a { + display: inline-grid; + place-items: center; + width: 2.35rem; + aspect-ratio: 1; + margin-top: 0; + border-radius: 50%; + color: var(--rice); + background: var(--ink); + font-family: var(--font-mono); + font-size: 0.52rem; + font-weight: 700; + text-transform: uppercase; + transition: background 180ms var(--ease), transform 240ms var(--ease); +} + +.ticket-options a:hover, +.ticket-options a:focus-visible, +.ticket-seal a:hover, +.ticket-seal a:focus-visible { + background: var(--sun-deep); + transform: translateY(-0.22rem); +} + +.ticket-seal { + grid-column: 4; + position: relative; + z-index: 2; + align-self: stretch; + display: grid; + place-items: center; + align-content: center; + gap: clamp(0.65rem, 1vw, 0.95rem); + min-height: 8.6rem; + margin: 0 -1.15rem 0 0.65rem; + padding: clamp(1.45rem, 2.2vw, 2rem) 0 clamp(1rem, 1.5vw, 1.45rem); + overflow: hidden; + color: var(--rice); + background: linear-gradient(135deg, var(--sun), var(--sun-deep)); + font-family: var(--font-mono); + font-size: 0.82rem; + font-weight: 700; + line-height: 1.1; + text-transform: uppercase; +} + +.ticket-seal-label { + position: relative; + z-index: 1; + display: grid; + place-content: center; + justify-items: center; + gap: 0.48rem; + width: clamp(5.05rem, 7.2vw, 7.7rem); + aspect-ratio: 1; + border: 2px solid var(--gold-bright); + border-radius: 50%; + line-height: 1; + transform: scale(0.94); + transition: transform 420ms var(--ease-quint), border-color 240ms var(--ease); +} + +.ticket-seal a { + position: relative; + z-index: 1; +} + +.ticket-seal a { + border: 1px solid var(--rice); + background: transparent; + font-size: 1.1rem; +} + +.ticket-seal.is-visible .ticket-seal-label { + transform: scale(1); +} + +.ticket-seal:hover .ticket-seal-label, +.ticket-seal:focus-within .ticket-seal-label { + border-color: var(--rice); + transform: translateY(-0.12rem) scale(1.015); +} + +.site-footer { + display: grid; + grid-template-columns: auto 1fr auto auto; + align-items: center; + gap: clamp(1rem, 4vw, 4rem); + padding: 0.5rem clamp(1.2rem, 3vw, 2rem); + color: var(--gold-bright); + background: var(--night); + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; +} + +.site-footer .brand-mark { + width: 1.55rem; +} + +.site-footer p { + margin: 0; + color: oklch(74% 0.08 84 / 0.8); +} + +.site-footer nav, +.language-switch { + display: flex; + align-items: center; + gap: clamp(0.8rem, 2vw, 1.8rem); +} + +.site-footer a { + transition: color 180ms var(--ease); +} + +.site-footer a:hover, +.site-footer a:focus-visible { + color: var(--rice); +} + +@media (min-width: 1200px) { + .agenda-panel { + align-content: center; + padding: clamp(2.4rem, 3.4vw, 3.9rem); + } + + .agenda-panel::after { + right: -13rem; + width: clamp(22rem, 33vw, 31rem); + } + + .agenda-panel .section-label { + margin-bottom: 0.95rem; + font-size: clamp(3rem, 3.55vw, 4.5rem); + } + + .agenda-panel h2 { + max-width: 27rem; + font-size: clamp(1.2rem, 1.34vw, 1.62rem); + line-height: 1.3; + } + + .agenda-days { + gap: clamp(1rem, 1.35vw, 1.55rem); + margin: clamp(1.75rem, 2.3vw, 2.65rem) 0 clamp(1.1rem, 1.55vw, 1.8rem); + } + + .agenda-days li { + grid-template-columns: clamp(4.9rem, 5.45vw, 6.4rem) minmax(14rem, 19rem); + gap: clamp(1.75rem, 2.1vw, 2.45rem); + } + + .agenda-days li::before { + left: calc(clamp(4.9rem, 5.45vw, 6.4rem) + clamp(0.88rem, 1.05vw, 1.22rem)); + width: clamp(0.92rem, 1vw, 1.15rem); + } + + .agenda-days li:not(:last-child)::after { + left: calc(clamp(4.9rem, 5.45vw, 6.4rem) + clamp(0.88rem, 1.05vw, 1.22rem) + clamp(0.46rem, 0.5vw, 0.575rem)); + top: 1.25rem; + height: calc(100% + 1.35rem); + } + + .agenda-days time { + font-size: clamp(0.82rem, 0.94vw, 1.08rem); + letter-spacing: 0.03em; + } + + .agenda-days h3 { + margin-bottom: 0.24rem; + font-size: clamp(0.95rem, 1.05vw, 1.25rem); + } + + .agenda-days p { + max-width: 18rem; + font-size: clamp(0.84rem, 0.93vw, 1.08rem); + line-height: 1.25; + } + + .agenda-panel .text-action { + gap: 0.95rem; + font-size: clamp(0.78rem, 0.82vw, 0.95rem); + } +} + +@media (max-width: 980px) and (min-width: 761px) { + .tickets { + grid-template-columns: minmax(14rem, 34%) minmax(0, 1fr); + align-items: start; + min-height: auto; + gap: clamp(1.2rem, 2.4vw, 2rem); + padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.25rem, 3vw, 1.8rem) clamp(1.55rem, 3vw, 2.15rem); + } + + .ticket-pine { + left: clamp(-5.5rem, -7vw, -3.2rem); + top: clamp(-3.9rem, -4.8vw, -2.4rem); + width: clamp(14rem, 25vw, 19rem); + } + + .tickets-heading { + grid-column: 1; + padding-left: clamp(6.3rem, 14vw, 8rem); + transform: none; + } + + .ticket-options { + grid-column: 2; + grid-row: 1 / span 2; + grid-template-columns: repeat(2, minmax(9rem, 1fr)); + gap: 1.55rem 0; + padding-right: 0; + } + + .ticket-options article { + min-height: 8.8rem; + } + + .ticket-options article:nth-child(3) { + border-left: 0; + } + + .ticket-seal { + grid-column: 1; + grid-row: 2; + justify-self: stretch; + align-self: end; + width: auto; + min-height: 12.5rem; + margin: clamp(2rem, 4vw, 3rem) 0 0; + padding: 1.7rem 0 1.35rem; + } +} + +[data-reveal] { + --reveal-x: 0rem; + --reveal-y: 1.15rem; + --reveal-scale: 1; + --reveal-blur: 0px; + opacity: 0; + filter: blur(var(--reveal-blur)); + transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)); + transition: + opacity 700ms var(--ease), + filter 820ms var(--ease), + transform 920ms var(--ease-quint); + transition-delay: var(--reveal-delay, 0ms); + will-change: opacity, filter, transform; +} + +[data-reveal].is-visible { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0) scale(1); + will-change: auto; +} + +.hero-copy[data-reveal] { + --reveal-x: -1.1rem; + --reveal-y: 0rem; + --reveal-blur: 2px; +} + +.hero-art[data-reveal], +.agenda-art[data-reveal], +.speaker-carousel[data-reveal] { + --reveal-x: 0.9rem; + --reveal-y: 0rem; + --reveal-scale: 1.025; + --reveal-blur: 8px; + transform-origin: center; +} + +.section-intro[data-reveal], +.tickets-heading[data-reveal] { + --reveal-x: -0.8rem; + --reveal-y: 0rem; + --reveal-blur: 3px; +} + +.ticket-seal[data-reveal] { + --reveal-y: 0.7rem; + --reveal-scale: 0.97; + --reveal-blur: 2px; +} + +.hero-copy h1 span { + opacity: 0; + transform: translate3d(-0.55rem, 0, 0); +} + +.hero-copy.is-visible h1 span { + animation: title-rise 720ms var(--ease-quint) both; +} + +.hero-copy.is-visible h1 span:nth-child(2) { + animation-delay: 90ms; +} + +.hero-copy.is-visible h1 span:nth-child(3) { + animation-delay: 180ms; +} + +@keyframes title-rise { + from { + opacity: 0; + transform: translate3d(-0.55rem, 0, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@keyframes ink-settle { + from { + opacity: 0; + filter: blur(4px); + transform: translate3d(0, -0.45rem, 0); + } + + to { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes vertical-line-draw { + from { + opacity: 0; + transform: scaleY(0); + } + + to { + opacity: 1; + transform: scaleY(1); + } +} + +@keyframes stamp-press { + 0% { + opacity: 0; + filter: blur(3px); + transform: scale(1.2); + } + + 100% { + opacity: 0.9; + filter: blur(0); + transform: scale(1); + } +} + +@media (max-width: 760px) { + .site-header { + grid-template-columns: auto auto 1fr auto; + } + + .nav-toggle { + justify-self: end; + display: inline-flex; + align-items: center; + gap: 0.7rem; + min-height: 44px; + padding: 0; + border: 0; + color: var(--ink); + background: transparent; + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; + cursor: pointer; + } + + .nav-toggle i, + .nav-toggle i::before, + .nav-toggle i::after { + display: block; + width: 1.55rem; + height: 1px; + background: currentColor; + content: ""; + transition: transform 240ms var(--ease), opacity 180ms var(--ease); + } + + .nav-toggle i { + position: relative; + } + + .nav-toggle i::before, + .nav-toggle i::after { + position: absolute; + left: 0; + } + + .nav-toggle i::before { + top: -0.45rem; + } + + .nav-toggle i::after { + top: 0.45rem; + } + + .nav-toggle[aria-expanded="true"] i { + background: transparent; + } + + .nav-toggle[aria-expanded="true"] i::before { + transform: translateY(0.45rem) rotate(45deg); + } + + .nav-toggle[aria-expanded="true"] i::after { + transform: translateY(-0.45rem) rotate(-45deg); + } + + .site-nav { + position: absolute; + top: 100%; + left: 1rem; + right: 1rem; + display: grid; + justify-items: start; + gap: 0; + padding: 1rem 1.25rem 1.15rem; + border: 1px solid var(--line); + background: var(--rice); + box-shadow: var(--shadow); + opacity: 0; + pointer-events: none; + transform: translateY(-0.75rem); + transition: opacity 220ms var(--ease), transform 260ms var(--ease); + } + + .site-nav.is-open { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + + .site-nav a { + width: 100%; + } + + .ticket-pill { + grid-column: 4; + } + + .hero { + grid-template-columns: minmax(1.2rem, 1fr) minmax(18rem, 32rem) minmax(12rem, 28rem) minmax(1.2rem, 1fr); + } + + .hero h1 { + font-size: clamp(3rem, 8vw, 5.2rem); + } + + .tickets { + grid-template-columns: minmax(7rem, 12rem) minmax(11rem, 15rem) 1fr; + } + + .ticket-seal { + grid-column: 1 / -1; + min-height: 9rem; + margin: 0 -2rem -3rem; + } +} + +@media (max-width: 760px) { + .site-header { + grid-template-columns: auto 1fr auto; + } + + .ticket-pill { + display: none; + } + + .hero { + height: auto; + min-height: 100svh; + display: grid; + grid-template-columns: 1rem 1fr 1rem; + grid-auto-rows: auto; + overflow: hidden; + } + + .hero::before, + .hero::after, + .hero-art::after, + .vertical-poem { + display: none; + } + + .hero-copy { + grid-column: 2; + grid-row: 1; + width: auto; + padding: calc(var(--header-height) + 2.25rem) 0 1.7rem; + } + + .hero-copy[data-reveal], + .hero-art[data-reveal], + .agenda-art[data-reveal], + .speaker-carousel[data-reveal] { + --reveal-x: 0rem; + --reveal-scale: 1; + } + + .kicker { + position: static; + display: block; + max-width: 100%; + margin-bottom: 1.5rem; + writing-mode: horizontal-tb; + line-break: strict; + overflow-wrap: anywhere; + } + + .hero h1 { + max-width: 7em; + font-size: clamp(2.8rem, 13vw, 5rem); + } + + .hero-summary { + margin-bottom: 1.35rem; + } + + .hero-meta { + gap: 0.45rem; + font-size: clamp(0.68rem, 2.9vw, 0.78rem); + line-height: 1.35; + overflow-wrap: anywhere; + } + + .hero-art { + position: relative; + inset: auto; + grid-column: 1 / -1; + grid-row: 2; + min-height: clamp(18rem, 72vw, 28rem); + } + + .hero-art figcaption { + top: 2rem; + right: 1.1rem; + } + + .agenda-block, + .speakers, + .installations, + .manifesto, + .tickets { + grid-template-columns: 1fr; + } + + .agenda-block { + height: auto; + } + + .agenda-panel { + min-height: auto; + padding: clamp(2.6rem, 8vw, 4rem) clamp(1.15rem, 5vw, 2rem); + } + + .agenda-panel::after { + right: -4rem; + width: 10rem; + } + + .agenda-art { + min-height: 23rem; + } + + .speakers, + .installations { + padding: 3.2rem 1rem; + } + + .speakers { + height: auto; + } + + .speakers .section-intro { + grid-column: auto; + grid-row: auto; + padding-left: 0; + padding-right: 0; + } + + .speakers .speaker-carousel { + grid-column: auto; + grid-row: auto; + } + + .speaker-carousel { + height: clamp(29rem, 108vw, 36rem); + min-height: 0; + } + + .speaker-track, + .speaker-slide, + .speaker-grid { + height: 100%; + min-height: 0; + } + + .speaker-grid { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, minmax(0, 1fr)); + grid-auto-rows: 0; + } + + .speaker-person + .speaker-person { + border-top: 1px solid oklch(50% 0.04 78 / 0.24); + border-left: 0; + } + + .speaker-person::before { + display: none; + } + + .speaker-person img { + object-fit: cover; + object-position: var(--speaker-focus-x) var(--speaker-focus-y); + transform: scale(1.02); + } + + .speaker-meta { + left: 0.95rem; + bottom: 0.82rem; + max-width: calc(100% - 4.25rem); + } + + .speaker-meta span { + font-size: 1rem; + } + + .speaker-meta small { + font-size: 0.68rem; + } + + .speaker-controls { + left: 1rem; + right: auto; + } + + .section-intro .text-action { + margin-top: 0.7rem; + } + + .installation-rhythm { + grid-template-columns: 1fr; + } + + .item-dream, + .item-echoes { + margin-top: 0; + } + + .manifesto-copy { + min-height: 20rem; + } + + .manifesto-art { + min-height: 17rem; + } + + .tickets { + gap: 1.35rem; + padding: 3.5rem 1rem 2.4rem; + } + + .ticket-pine { + opacity: 0.32; + } + + .tickets-heading, + .ticket-options, + .ticket-seal { + grid-column: 1; + } + + .ticket-options { + grid-template-columns: repeat(2, minmax(9rem, 1fr)); + gap: 2rem 0; + } + + .ticket-seal { + justify-self: center; + width: min(21rem, 100%); + min-height: 13.2rem; + margin: 1.4rem 0 0; + padding: 1.65rem 0 1.35rem; + } + + .ticket-options article:nth-child(3) { + border-left: 0; + } + + .site-footer { + grid-template-columns: 1fr; + align-items: start; + } + + .site-footer p { + line-break: strict; + overflow-wrap: anywhere; + } +} + +@media (max-width: 540px) { + .site-header { + padding-left: 0.8rem; + padding-right: 0.8rem; + } + + .brand-mark { + width: 2.15rem; + } + + .brand-word { + font-size: 0.72rem; + } + + .hero h1 { + font-size: clamp(2.45rem, 14vw, 3.9rem); + } + + .hero-art { + min-height: clamp(17.5rem, 78vw, 22rem); + } + + .agenda-panel { + padding: 3rem 1.1rem; + } + + .agenda-days li { + grid-template-columns: 4.15rem minmax(0, 1fr); + gap: 2rem; + } + + .agenda-days li::before { + left: 4.92rem; + } + + .agenda-days li:not(:last-child)::after { + left: calc(4.92rem + 0.44rem); + } + + .agenda-days h3, + .agenda-days p { + max-width: 100%; + overflow-wrap: anywhere; + } + + .agenda-days p { + line-height: 1.28; + } + + .ticket-options { + grid-template-columns: 1fr; + gap: 1.65rem; + } + + .ticket-options article, + .ticket-options article + article, + .ticket-options article:nth-child(3) { + grid-template-rows: 0.64rem auto auto 2.85rem; + row-gap: 0.62rem; + border-left: 0; + border-top: 1px solid var(--line); + padding-top: 1.8rem; + } + + .ticket-options article:first-child { + border-top: 0; + } + + .ticket-options strong { + min-height: 1.8rem; + } + + .ticket-seal { + width: min(18rem, 100%); + min-height: 12.4rem; + margin-top: 1.8rem; + } +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } + + [data-reveal] { + opacity: 1; + filter: none; + transform: none; + } + + .vertical-poem span, + .vertical-poem i, + .vertical-poem img, + .hero-copy h1 span, + .agenda-panel .section-label, + .agenda-panel h2, + .agenda-days li, + .agenda-panel .text-action, + .installation-rhythm .installation-item, + .speaker-meta, + .ticket-options article { + opacity: 1; + filter: none; + transform: none; + } + + .agenda-days li::before, + .agenda-days li:not(:last-child)::after, + .ticket-options article::before, + .ticket-seal-label { + opacity: 1; + transform: none; + } +}