: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; line-height: 1.18; text-orientation: mixed; 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); } .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 48%; mix-blend-mode: multiply; filter: saturate(1.02) contrast(1.02); transform: scale(1.015); 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; } .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; } }