1:root {
2 color-scheme: light;
3 --paper: oklch(94% 0.035 78);
4 --paper-soft: oklch(91% 0.045 78);
5 --paper-deep: oklch(84% 0.06 73);
6 --ink: oklch(18% 0.035 82);
7 --ink-soft: oklch(32% 0.045 80);
8 --ash: oklch(54% 0.04 80);
9 --line: oklch(73% 0.055 77);
10 --gold: oklch(68% 0.145 74);
11 --gold-bright: oklch(76% 0.165 80);
12 --sun: oklch(64% 0.19 43);
13 --sun-deep: oklch(52% 0.17 38);
14 --night: oklch(17% 0.035 185);
15 --night-soft: oklch(24% 0.04 170);
16 --rice: oklch(97% 0.02 82);
17 --focus: oklch(58% 0.18 42);
18 --shadow: 0 28px 90px oklch(24% 0.05 75 / 0.22);
19 --ease: cubic-bezier(0.16, 1, 0.3, 1);
20 --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
21 --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
22 --font-display: "Chakra Petch", "Noto Sans JP", sans-serif;
23 --font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
24 --font-mono: "Azeret Mono", "SFMono-Regular", monospace;
25 --header-height: 74px;
26}
27
28*,
29*::before,
30*::after {
31 box-sizing: border-box;
32}
33
34html {
35 width: 100%;
36 background: var(--paper);
37 scroll-behavior: smooth;
38 overflow-x: clip;
39}
40
41body {
42 margin: 0;
43 width: 100%;
44 min-width: 320px;
45 color: var(--ink);
46 background:
47 radial-gradient(circle at 66% 7%, oklch(82% 0.11 79 / 0.55), transparent 17rem),
48 linear-gradient(90deg, oklch(20% 0.015 80 / 0.035) 1px, transparent 1px),
49 linear-gradient(0deg, oklch(20% 0.015 80 / 0.028) 1px, transparent 1px),
50 var(--paper);
51 background-size: auto, 112px 112px, 112px 112px, auto;
52 font-family: var(--font-serif);
53 line-height: 1.55;
54 overflow-x: clip;
55}
56
57body::before {
58 position: fixed;
59 inset: 0;
60 z-index: 10;
61 pointer-events: none;
62 content: "";
63 opacity: 0.42;
64 mix-blend-mode: multiply;
65 background:
66 radial-gradient(circle at 18% 21%, oklch(100% 0 0 / 0.6), transparent 0.08rem),
67 radial-gradient(circle at 76% 63%, oklch(36% 0.05 70 / 0.18), transparent 0.07rem),
68 radial-gradient(circle at 48% 88%, oklch(38% 0.07 35 / 0.14), transparent 0.06rem);
69 background-size: 0.7rem 0.85rem, 1.1rem 1.3rem, 0.95rem 1.05rem;
70}
71
72img {
73 display: block;
74 max-width: 100%;
75}
76
77a {
78 color: inherit;
79 text-decoration: none;
80}
81
82button,
83a {
84 -webkit-tap-highlight-color: transparent;
85}
86
87:focus-visible {
88 outline: 3px solid var(--focus);
89 outline-offset: 5px;
90}
91
92.skip-link {
93 position: fixed;
94 top: 1rem;
95 left: 1rem;
96 z-index: 30;
97 padding: 0.75rem 1rem;
98 color: var(--rice);
99 background: var(--night);
100 transform: translateY(-160%);
101 transition: transform 240ms var(--ease);
102 font-family: var(--font-mono);
103 font-size: 0.78rem;
104}
105
106.skip-link:focus {
107 transform: translateY(0);
108}
109
110.site-header {
111 position: fixed;
112 top: 0;
113 left: 0;
114 right: 0;
115 z-index: 20;
116 display: grid;
117 grid-template-columns: auto 1fr auto;
118 align-items: center;
119 gap: 1.5rem;
120 min-height: var(--header-height);
121 padding: max(0.7rem, env(safe-area-inset-top)) clamp(1rem, 2.7vw, 2rem) 0.7rem;
122 color: var(--ink);
123 background: linear-gradient(180deg, oklch(94% 0.035 78 / 0.94), oklch(94% 0.035 78 / 0.72), transparent);
124}
125
126.site-header.is-scrolled {
127 background: var(--paper);
128 border-bottom: 1px solid oklch(58% 0.06 76 / 0.25);
129 box-shadow: 0 18px 50px oklch(18% 0.03 76 / 0.08);
130}
131
132.brand-lockup {
133 display: inline-flex;
134 align-items: center;
135 gap: 0.62rem;
136 min-height: 44px;
137}
138
139.brand-lockup-small {
140 min-height: 0;
141}
142
143.brand-mark {
144 position: relative;
145 width: 2.18rem;
146 aspect-ratio: 1;
147 border-radius: 50%;
148 overflow: hidden;
149 border: 1px solid oklch(30% 0.035 78 / 0.45);
150 background:
151 linear-gradient(90deg, transparent 49%, var(--ink) 49% 51%, transparent 51%),
152 linear-gradient(0deg, transparent 49%, var(--ink) 49% 51%, transparent 51%),
153 radial-gradient(circle at 72% 25%, var(--rice) 0 19%, transparent 20%),
154 linear-gradient(135deg, var(--gold) 0 38%, var(--sun) 38% 58%, var(--night-soft) 58%);
155}
156
157.brand-mark span {
158 position: absolute;
159 inset: 58% 0 0;
160 background: oklch(84% 0.04 78 / 0.65);
161}
162
163.brand-word {
164 display: grid;
165 gap: 0.07rem;
166 font-family: var(--font-mono);
167 font-size: 0.76rem;
168 line-height: 1;
169 text-transform: uppercase;
170}
171
172.site-nav {
173 justify-self: center;
174 display: flex;
175 align-items: center;
176 gap: clamp(0.95rem, 2.05vw, 2.2rem);
177 margin-left: clamp(1.15rem, 2.7vw, 2.4rem);
178 font-family: var(--font-mono);
179 font-size: 0.62rem;
180 text-transform: uppercase;
181}
182
183.site-nav a {
184 position: relative;
185 min-height: 44px;
186 display: inline-flex;
187 align-items: center;
188 color: var(--ink-soft);
189 transition: color 180ms var(--ease), transform 240ms var(--ease);
190}
191
192.site-nav a::after {
193 position: absolute;
194 left: 50%;
195 bottom: 0.55rem;
196 width: 0.32rem;
197 height: 0.32rem;
198 border-radius: 50%;
199 background: currentColor;
200 content: "";
201 opacity: 0;
202 transform: translate(-50%, 0.25rem);
203 transition: opacity 180ms var(--ease), transform 240ms var(--ease);
204}
205
206.site-nav a:hover,
207.site-nav a:focus-visible,
208.site-nav a[aria-current="page"] {
209 color: var(--ink);
210}
211
212.site-nav a:hover::after,
213.site-nav a:focus-visible::after,
214.site-nav a[aria-current="page"]::after {
215 opacity: 1;
216 transform: translate(-50%, 0);
217}
218
219.ticket-pill {
220 display: inline-flex;
221 align-items: center;
222 gap: 0.58rem;
223 min-height: 44px;
224 padding: 0.58rem 0.56rem 0.58rem 0.86rem;
225 color: var(--rice);
226 background: var(--gold);
227 font-family: var(--font-mono);
228 font-size: 0.64rem;
229 font-weight: 700;
230 text-transform: uppercase;
231 white-space: nowrap;
232 transition: background 180ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
233}
234
235.ticket-pill svg,
236.text-action span {
237 width: 1.44rem;
238 height: 1.44rem;
239 border: 1px solid currentColor;
240 border-radius: 50%;
241}
242
243.ticket-pill svg {
244 padding: 0.3rem;
245 fill: none;
246 stroke: currentColor;
247 stroke-linecap: round;
248 stroke-linejoin: round;
249 stroke-width: 1.5;
250}
251
252.ticket-pill:hover,
253.ticket-pill:focus-visible {
254 background: var(--sun-deep);
255 box-shadow: 0 18px 52px oklch(50% 0.15 50 / 0.32);
256 transform: translateY(-2px);
257}
258
259.nav-toggle {
260 display: none;
261}
262
263section[id] {
264 scroll-margin-top: var(--header-height);
265}
266
267.hero {
268 position: relative;
269 height: clamp(32.5rem, 60.3vw, 54.4rem);
270 display: block;
271 padding-top: var(--header-height);
272 overflow: clip;
273 border-bottom: 1px solid var(--line);
274}
275
276.hero::after {
277 position: absolute;
278 inset: 0;
279 z-index: 2;
280 background:
281 linear-gradient(
282 90deg,
283 oklch(94% 0.035 78 / 0.98) 0 28.8%,
284 oklch(94% 0.035 78 / 0.88) 31.2%,
285 oklch(94% 0.035 78 / 0.34) 38.5%,
286 transparent 47%
287 );
288 content: "";
289 pointer-events: none;
290}
291
292.vertical-poem {
293 position: absolute;
294 left: clamp(1rem, 3.2vw, 2.8rem);
295 top: 37%;
296 z-index: 4;
297 display: flex;
298 flex-direction: column;
299 align-items: center;
300 gap: clamp(0.95rem, 1.45vw, 1.35rem);
301 color: var(--ink-soft);
302 font-family: var(--font-serif);
303 font-size: clamp(0.9rem, 1.4vw, 1.15rem);
304}
305
306.vertical-poem span {
307 writing-mode: vertical-rl;
308 line-height: 1.18;
309 text-orientation: mixed;
310 animation: ink-settle 900ms var(--ease) 260ms both;
311}
312
313.vertical-poem i {
314 display: block;
315 width: 1px;
316 height: clamp(5rem, 11vw, 9rem);
317 background: var(--line);
318 transform-origin: top;
319 animation: vertical-line-draw 720ms var(--ease-quart) 760ms both;
320}
321
322.vertical-poem img {
323 width: clamp(1.45rem, 2.1vw, 1.95rem);
324 height: auto;
325 opacity: 0.9;
326 animation: stamp-press 520ms var(--ease-quint) 1240ms both;
327}
328
329.hero-copy {
330 position: relative;
331 z-index: 4;
332 width: min(50rem, calc(100% - 2rem));
333 padding: clamp(2.6rem, 4.6vw, 4.2rem) 0 0 clamp(5.8rem, 9vw, 8rem);
334}
335
336.hero h1 {
337 max-width: 5.75em;
338 margin: 0;
339 font-family: var(--font-display);
340 font-size: clamp(3.45rem, 7.3vw, 6.55rem);
341 font-weight: 300;
342 line-height: 0.96;
343 text-transform: uppercase;
344}
345
346.hero h1 span {
347 display: block;
348}
349
350.hero-place {
351 margin: 0.9rem 0 0;
352 color: var(--sun-deep);
353 font-family: var(--font-serif);
354 font-size: clamp(1.65rem, 3.1vw, 3.1rem);
355 line-height: 1;
356}
357
358.hero-summary {
359 max-width: 18rem;
360 margin: 1.05rem 0 clamp(2.8rem, 4.8vw, 4.8rem);
361 color: var(--ink-soft);
362 font-size: clamp(1rem, 1.35vw, 1.35rem);
363 line-height: 1.38;
364}
365
366.hero-meta {
367 display: grid;
368 gap: 0.3rem;
369 color: var(--ink);
370 font-family: var(--font-mono);
371 font-size: 0.75rem;
372 text-transform: uppercase;
373}
374
375.hero-art {
376 position: absolute;
377 z-index: 1;
378 inset: 0;
379 margin: 0;
380 display: grid;
381 align-items: end;
382}
383
384.hero-art::after {
385 position: absolute;
386 right: clamp(1.3rem, 3.2vw, 3rem);
387 top: clamp(4.9rem, 8vw, 7rem);
388 z-index: 2;
389 width: clamp(3.5rem, 5.6vw, 5.4rem);
390 height: clamp(7.2rem, 12vw, 11.5rem);
391 border: 1px solid oklch(28% 0.04 78 / 0.55);
392 background:
393 radial-gradient(circle at 50% 19%, transparent 0 1.1rem, var(--ink) 1.13rem 1.18rem, transparent 1.2rem),
394 linear-gradient(90deg, transparent 49%, oklch(24% 0.04 78 / 0.45) 49% 51%, transparent 51%),
395 linear-gradient(0deg, transparent 21%, oklch(24% 0.04 78 / 0.28) 21% 22%, transparent 22%),
396 oklch(91% 0.035 78 / 0.78);
397 color: var(--ink);
398 content: "新しい未来\aデザイン\aカンファレンス";
399 display: grid;
400 place-items: center;
401 padding: 2.4rem 0.25rem 0.55rem;
402 font-size: clamp(0.58rem, 0.9vw, 0.82rem);
403 line-height: 1.1;
404 text-align: center;
405 white-space: pre;
406 writing-mode: vertical-rl;
407 box-shadow: 0 18px 55px oklch(18% 0.04 75 / 0.12);
408}
409
410.hero-art img {
411 width: 100%;
412 height: 100%;
413 object-fit: cover;
414 object-position: center top;
415 mix-blend-mode: multiply;
416 filter: saturate(1.02) contrast(1.05);
417}
418
419.hero-art figcaption {
420 position: absolute;
421 width: 1px;
422 height: 1px;
423 margin: -1px;
424 padding: 0;
425 overflow: hidden;
426 clip: rect(0, 0, 0, 0);
427 white-space: nowrap;
428 border: 0;
429}
430
431.agenda-block {
432 display: grid;
433 grid-template-columns: minmax(16.5rem, 32vw) 1fr;
434 height: clamp(23.1rem, 43vw, 38.7rem);
435 border-bottom: 1px solid var(--line);
436}
437
438.agenda-panel {
439 position: relative;
440 display: grid;
441 align-content: start;
442 min-height: 0;
443 padding: clamp(1.35rem, 2.55vw, 2.35rem);
444 color: var(--rice);
445 background:
446 radial-gradient(circle at 100% 0, oklch(40% 0.08 74 / 0.35), transparent 16rem),
447 linear-gradient(135deg, var(--night), oklch(13% 0.035 180));
448 overflow: clip;
449}
450
451.agenda-panel::after {
452 position: absolute;
453 right: -10.8rem;
454 top: 0;
455 z-index: 0;
456 width: 21.6rem;
457 aspect-ratio: 1;
458 border-radius: 50%;
459 background: linear-gradient(180deg, var(--gold-bright), var(--sun));
460 content: "";
461 opacity: 0.86;
462 mix-blend-mode: multiply;
463 pointer-events: none;
464}
465
466.agenda-panel > * {
467 position: relative;
468 z-index: 1;
469}
470
471.agenda-panel .section-label,
472.agenda-panel h2,
473.agenda-days li,
474.agenda-panel .text-action {
475 opacity: 0;
476 filter: blur(3px);
477 transform: translate3d(-0.85rem, 0, 0);
478 transition:
479 opacity 560ms var(--ease),
480 filter 640ms var(--ease),
481 transform 760ms var(--ease-quint);
482}
483
484.agenda-panel.is-visible .section-label,
485.agenda-panel.is-visible h2,
486.agenda-panel.is-visible .agenda-days li,
487.agenda-panel.is-visible .text-action {
488 opacity: 1;
489 filter: blur(0);
490 transform: translate3d(0, 0, 0);
491}
492
493.agenda-panel.is-visible h2 {
494 transition-delay: 110ms;
495}
496
497.agenda-panel.is-visible .agenda-days li:nth-child(1) {
498 transition-delay: 220ms;
499}
500
501.agenda-panel.is-visible .agenda-days li:nth-child(2) {
502 transition-delay: 340ms;
503}
504
505.agenda-panel.is-visible .agenda-days li:nth-child(3) {
506 transition-delay: 460ms;
507}
508
509.agenda-panel.is-visible .text-action {
510 transition-delay: 610ms;
511}
512
513.section-label {
514 margin: 0 0 0.72rem;
515 color: inherit;
516 font-family: var(--font-display);
517 font-size: clamp(1.9rem, 3.4vw, 3rem);
518 font-weight: 300;
519 line-height: 1;
520 text-transform: uppercase;
521}
522
523.agenda-panel h2,
524.section-intro h2,
525.tickets-heading h2 {
526 max-width: 17rem;
527 margin: 0;
528 color: inherit;
529 font-size: 1.1rem;
530 font-weight: 400;
531 line-height: 1.42;
532}
533
534.agenda-days {
535 position: relative;
536 z-index: 1;
537 display: grid;
538 gap: clamp(0.58rem, 1.2vw, 1.08rem);
539 margin: clamp(1rem, 1.75vw, 1.65rem) 0 clamp(0.72rem, 1.25vw, 1.25rem);
540 padding: 0;
541 list-style: none;
542}
543
544.agenda-days li {
545 position: relative;
546 display: grid;
547 grid-template-columns: 4.6rem 1fr;
548 gap: 2.05rem;
549}
550
551.agenda-days li::before {
552 position: absolute;
553 left: 5.18rem;
554 top: 0.25rem;
555 width: 0.88rem;
556 aspect-ratio: 1;
557 border: 1px solid var(--gold-bright);
558 border-radius: 50%;
559 box-shadow: inset 0 0 0 0.25rem var(--night);
560 content: "";
561 opacity: 0;
562 transform: scale(0.45);
563 transition: opacity 420ms var(--ease), transform 580ms var(--ease-quint);
564}
565
566.agenda-days li:not(:last-child)::after {
567 position: absolute;
568 left: calc(5.18rem + 0.44rem);
569 top: 1.2rem;
570 width: 1px;
571 height: calc(100% + 1.2rem);
572 background: var(--gold-bright);
573 content: "";
574 opacity: 0.76;
575 transform: scaleY(0);
576 transform-origin: top;
577 transition: transform 720ms var(--ease-quart);
578}
579
580.agenda-panel.is-visible .agenda-days li::before {
581 opacity: 1;
582 transform: scale(1);
583}
584
585.agenda-panel.is-visible .agenda-days li:nth-child(1)::before {
586 transition-delay: 330ms;
587}
588
589.agenda-panel.is-visible .agenda-days li:nth-child(2)::before {
590 transition-delay: 470ms;
591}
592
593.agenda-panel.is-visible .agenda-days li:nth-child(3)::before {
594 transition-delay: 610ms;
595}
596
597.agenda-panel.is-visible .agenda-days li:not(:last-child)::after {
598 transform: scaleY(1);
599}
600
601.agenda-panel.is-visible .agenda-days li:nth-child(1)::after {
602 transition-delay: 420ms;
603}
604
605.agenda-panel.is-visible .agenda-days li:nth-child(2)::after {
606 transition-delay: 560ms;
607}
608
609.agenda-days time {
610 color: var(--sun);
611 font-family: var(--font-mono);
612 font-size: clamp(0.68rem, 0.92vw, 0.78rem);
613 font-weight: 700;
614 text-transform: uppercase;
615}
616
617.agenda-days time span {
618 display: block;
619 color: var(--rice);
620 font-weight: 500;
621}
622
623.agenda-days h3 {
624 margin: 0 0 0.14rem;
625 color: var(--gold-bright);
626 font-size: clamp(0.72rem, 1vw, 0.86rem);
627 font-weight: 600;
628}
629
630.agenda-days p {
631 max-width: 12rem;
632 margin: 0;
633 color: oklch(91% 0.035 78 / 0.84);
634 font-size: clamp(0.72rem, 1vw, 0.84rem);
635 line-height: 1.2;
636}
637
638.text-action {
639 display: inline-flex;
640 align-items: center;
641 gap: 0.7rem;
642 width: fit-content;
643 min-height: 44px;
644 color: var(--ink-soft);
645 font-family: var(--font-mono);
646 font-size: 0.72rem;
647 font-weight: 600;
648 text-transform: uppercase;
649 transition: color 180ms var(--ease), transform 240ms var(--ease);
650}
651
652.text-action span {
653 display: inline-grid;
654 place-items: center;
655 font-family: var(--font-serif);
656}
657
658.agenda-panel .text-action,
659.text-action-light {
660 color: var(--gold-bright);
661}
662
663.text-action:hover,
664.text-action:focus-visible {
665 color: var(--sun-deep);
666 transform: translateX(0.2rem);
667}
668
669.agenda-art {
670 position: relative;
671 min-height: 0;
672 height: 100%;
673 margin: 0;
674 overflow: hidden;
675 background: var(--paper-soft);
676}
677
678.agenda-art img {
679 width: 100%;
680 height: 100%;
681 object-fit: cover;
682 mix-blend-mode: multiply;
683}
684
685.agenda-art figcaption {
686 position: absolute;
687 left: 2.2rem;
688 top: 4rem;
689 color: var(--ink-soft);
690 font-size: clamp(0.98rem, 1.7vw, 1.25rem);
691 writing-mode: vertical-rl;
692}
693
694.speakers,
695.installations {
696 display: grid;
697 grid-template-columns: minmax(12rem, 25%) 1fr;
698 gap: 0;
699 padding: 0 clamp(1.2rem, 3.5vw, 3rem);
700 border-bottom: 1px solid var(--line);
701}
702
703.section-intro {
704 display: grid;
705 align-content: start;
706 gap: 0.9rem;
707 padding-top: clamp(3.3rem, 6.8vw, 6rem);
708}
709
710.section-intro .text-action {
711 margin-top: 3.5rem;
712}
713
714.speaker-carousel {
715 --speaker-index: 0;
716 --speaker-offset: 0%;
717 position: relative;
718 min-width: 0;
719 min-height: 0;
720 overflow: clip;
721 background: var(--paper-soft);
722 isolation: isolate;
723}
724
725.speaker-track {
726 display: flex;
727 flex-direction: column;
728 height: 100%;
729 transform: translate3d(0, var(--speaker-offset), 0);
730 transition: transform 620ms var(--ease-quint);
731 will-change: transform;
732}
733
734.speaker-slide {
735 position: relative;
736 flex: 0 0 100%;
737 min-width: 0;
738 min-height: 100%;
739 height: 100%;
740 overflow: clip;
741}
742
743.speaker-grid {
744 display: grid;
745 grid-template-columns: repeat(3, minmax(0, 1fr));
746 height: 100%;
747 margin: 0;
748 padding: 0;
749 list-style: none;
750}
751
752.speaker-person {
753 --speaker-focus-x: 50%;
754 --speaker-focus-y: 48%;
755 position: relative;
756 min-width: 0;
757 overflow: clip;
758 background:
759 linear-gradient(90deg, oklch(20% 0.015 80 / 0.035) 1px, transparent 1px),
760 linear-gradient(0deg, oklch(20% 0.015 80 / 0.026) 1px, transparent 1px),
761 var(--paper-soft);
762 background-size: 112px 112px, 112px 112px, auto;
763 isolation: isolate;
764}
765
766.speaker-person + .speaker-person {
767 border-left: 1px solid oklch(50% 0.04 78 / 0.24);
768}
769
770.speaker-person::after {
771 position: absolute;
772 inset: 0;
773 z-index: 1;
774 background:
775 radial-gradient(circle at 50% 58%, oklch(81% 0.14 78 / 0.14), transparent 28%),
776 linear-gradient(0deg, oklch(12% 0.025 80 / 0.72), oklch(12% 0.025 80 / 0.28) 31%, transparent 58%);
777 content: "";
778 opacity: 0.82;
779 transition: opacity 420ms var(--ease);
780}
781
782.speaker-person img {
783 width: 100%;
784 height: 100%;
785 object-fit: cover;
786 object-position: var(--speaker-focus-x) var(--speaker-focus-y);
787 filter: saturate(1.04) contrast(1.08);
788 transform: scale(1.035);
789 transition: transform 920ms var(--ease-quint), filter 520ms var(--ease);
790 will-change: transform;
791}
792
793.speaker-carousel:hover .speaker-slide.is-active .speaker-person img,
794.speaker-carousel:focus-within .speaker-slide.is-active .speaker-person img {
795 filter: saturate(1.1) contrast(1.13);
796 transform: scale(1.06);
797}
798
799.speaker-person:hover img,
800.speaker-person:focus-within img {
801 filter: saturate(1.16) contrast(1.16);
802 transform: scale(1.09);
803}
804
805.speaker-person:hover::after,
806.speaker-person:focus-within::after {
807 opacity: 1;
808}
809
810.speaker-meta {
811 position: absolute;
812 left: clamp(1rem, 1.6vw, 1.55rem);
813 bottom: clamp(1rem, 1.75vw, 1.65rem);
814 z-index: 2;
815 display: grid;
816 max-width: min(12rem, calc(100% - 3rem));
817 opacity: 0;
818 text-shadow: 0 2px 18px oklch(10% 0.02 80 / 0.78);
819 transform: translate3d(0, 0.78rem, 0);
820 transition:
821 opacity 580ms var(--ease),
822 transform 780ms var(--ease-quint);
823 will-change: transform;
824}
825
826.speaker-carousel.is-visible .speaker-slide.is-active .speaker-meta {
827 opacity: 1;
828 transform: translate3d(0, 0, 0);
829}
830
831.speaker-carousel.is-visible .speaker-slide.is-active .speaker-person:nth-child(2) .speaker-meta {
832 transition-delay: 110ms;
833}
834
835.speaker-carousel.is-visible .speaker-slide.is-active .speaker-person:nth-child(3) .speaker-meta {
836 transition-delay: 220ms;
837}
838
839.speaker-person:hover .speaker-meta,
840.speaker-person:focus-within .speaker-meta {
841 transform: translate3d(0, -0.22rem, 0);
842}
843
844.speaker-person::before {
845 position: absolute;
846 top: clamp(1rem, 1.65vw, 1.65rem);
847 right: clamp(0.8rem, 1.45vw, 1.35rem);
848 z-index: 2;
849 color: oklch(91% 0.045 78 / 0.72);
850 content: attr(data-kanji);
851 font-size: clamp(0.68rem, 0.9vw, 0.9rem);
852 letter-spacing: 0.12em;
853 line-height: 1.15;
854 text-shadow: 0 2px 14px oklch(12% 0.03 80 / 0.56);
855 transform: translate3d(0, 0, 0);
856 transition: color 260ms var(--ease), transform 520ms var(--ease-quint);
857 will-change: transform;
858 writing-mode: vertical-rl;
859}
860
861.speaker-person:hover::before,
862.speaker-person:focus-within::before {
863 color: oklch(97% 0.04 78 / 0.86);
864 transform: translate3d(0, -0.22rem, 0);
865}
866
867.speaker-meta span,
868.speaker-meta small {
869 display: block;
870}
871
872.speaker-meta span {
873 color: var(--gold-bright);
874 font-size: clamp(0.88rem, 1.04vw, 1.22rem);
875 line-height: 1.1;
876}
877
878.speaker-meta small {
879 margin-top: 0.22rem;
880 color: oklch(94% 0.032 78 / 0.84);
881 font-size: clamp(0.58rem, 0.7vw, 0.78rem);
882 line-height: 1.18;
883}
884
885.speaker-controls {
886 position: absolute;
887 top: 50%;
888 left: clamp(1.35rem, 3vw, 3.1rem);
889 right: auto;
890 z-index: 2;
891 display: grid;
892 gap: 0.48rem;
893 transform: translateY(-50%);
894}
895
896.speaker-dot {
897 width: 1rem;
898 height: 1rem;
899 padding: 0;
900 border: 0;
901 border-radius: 50%;
902 background: radial-gradient(circle, var(--ink-soft) 0 0.22rem, transparent 0.24rem);
903 opacity: 0.55;
904 cursor: pointer;
905 transition: opacity 180ms var(--ease), transform 320ms var(--ease-quint), background 180ms var(--ease);
906}
907
908.speaker-dot:hover,
909.speaker-dot:focus-visible,
910.speaker-dot.is-active {
911 background: radial-gradient(circle, var(--sun) 0 0.24rem, transparent 0.26rem);
912 opacity: 1;
913 transform: scale(1.2);
914}
915
916.installations {
917 grid-template-columns: minmax(13.75rem, 28%) 1fr;
918 align-items: start;
919 min-height: clamp(15.3rem, 28.7vw, 25.5rem);
920 padding-top: clamp(0.82rem, 1.5vw, 1.5rem);
921 padding-bottom: clamp(0.78rem, 1.4vw, 1.45rem);
922}
923
924.speakers {
925 grid-template-columns: 1fr minmax(12rem, 25%);
926 height: clamp(17.9rem, 33.4vw, 30rem);
927 padding: 0;
928 overflow: clip;
929}
930
931.speakers .section-intro {
932 grid-column: 2;
933 grid-row: 1;
934 padding-top: clamp(3.45rem, 6.6vw, 5.8rem);
935 padding-right: clamp(1.85rem, 3.5vw, 3rem);
936 padding-left: clamp(1.35rem, 2.2vw, 2rem);
937}
938
939.speakers .speaker-carousel {
940 grid-column: 1;
941 grid-row: 1;
942}
943
944.installations .section-intro {
945 padding-top: clamp(2rem, 3.9vw, 3.5rem);
946}
947
948.installations .section-intro .text-action {
949 margin-top: 1.65rem;
950 gap: 0.54rem;
951}
952
953.installations .section-label {
954 font-size: clamp(1.55rem, 3vw, 2.65rem);
955}
956
957.installation-rhythm {
958 display: grid;
959 grid-template-columns: repeat(3, minmax(9rem, clamp(10rem, 13.5vw, 18rem)));
960 align-items: start;
961 gap: clamp(1.2rem, 3.1vw, 3.8rem);
962 justify-content: space-between;
963}
964
965.installation-item {
966 position: relative;
967}
968
969.installation-rhythm .installation-item {
970 opacity: 0;
971 filter: blur(3px);
972 transform: translate3d(0, 1rem, 0);
973 transition:
974 opacity 560ms var(--ease),
975 filter 680ms var(--ease),
976 transform 780ms var(--ease-quint);
977}
978
979.installation-rhythm.is-visible .installation-item {
980 opacity: 1;
981 filter: blur(0);
982 transform: translate3d(0, 0, 0);
983}
984
985.installation-rhythm.is-visible .installation-item:nth-child(2) {
986 transition-delay: 120ms;
987}
988
989.installation-rhythm.is-visible .installation-item:nth-child(3) {
990 transition-delay: 240ms;
991}
992
993.installation-item img {
994 width: 100%;
995 aspect-ratio: 1.04;
996 object-fit: cover;
997 background: var(--paper-soft);
998 filter: saturate(0.98) contrast(1.03);
999 transition: transform 520ms var(--ease-quint), box-shadow 520ms var(--ease-quint);
1000}
1001
1002.installation-item h3 {
1003 margin: clamp(0.72rem, 1.1vw, 1.05rem) 0 0.04rem;
1004 color: var(--ink-soft);
1005 font-size: clamp(1rem, 1.45vw, 1.62rem);
1006 font-weight: 500;
1007}
1008
1009.installation-item p {
1010 margin: 0;
1011 color: var(--ash);
1012 font-size: clamp(0.86rem, 1.1vw, 1.16rem);
1013}
1014
1015.installation-item::before {
1016 position: absolute;
1017 inset: 0.45rem auto auto -0.9rem;
1018 width: 0.32rem;
1019 height: 0.32rem;
1020 border-radius: 50%;
1021 background: var(--sun);
1022 box-shadow: 0 0.74rem 0 oklch(66% 0.15 74 / 0.48), 0 1.48rem 0 oklch(66% 0.15 74 / 0.28);
1023 content: "";
1024 opacity: 0;
1025 transition: opacity 240ms var(--ease), transform 420ms var(--ease);
1026 transform: translateY(-0.5rem);
1027}
1028
1029.installation-item:hover img,
1030.installation-item:focus-within img {
1031 box-shadow: var(--shadow);
1032 transform: translateY(-0.45rem);
1033}
1034
1035.installation-item:hover::before,
1036.installation-item:focus-within::before {
1037 opacity: 1;
1038 transform: translateY(0);
1039}
1040
1041.manifesto {
1042 display: grid;
1043 grid-template-columns: 1fr 1fr;
1044 min-height: clamp(11.6rem, 21.4vw, 18rem);
1045 overflow: clip;
1046 border-bottom: 1px solid var(--line);
1047}
1048
1049.manifesto-copy {
1050 position: relative;
1051 display: grid;
1052 align-content: start;
1053 min-height: 0;
1054 overflow: clip;
1055 padding: clamp(2.35rem, 4.55vw, 4.1rem) clamp(1.2rem, 7vw, 7.2rem) clamp(1.45rem, 2.7vw, 2.7rem);
1056 color: var(--rice);
1057 background:
1058 linear-gradient(90deg, oklch(12% 0.025 185 / 0.28) 1px, transparent 1px),
1059 linear-gradient(0deg, oklch(12% 0.025 185 / 0.2) 1px, transparent 1px),
1060 linear-gradient(135deg, var(--sun), var(--sun-deep));
1061 background-size: 80px 80px, 80px 80px, auto;
1062}
1063
1064.manifesto-copy h2 {
1065 max-width: 25rem;
1066 margin: 0 0 clamp(1rem, 2vw, 1.8rem);
1067 font-size: clamp(1.95rem, 3.25vw, 3.15rem);
1068 font-weight: 400;
1069 line-height: 1.1;
1070}
1071
1072.manifesto-copy .section-label {
1073 margin-bottom: 0.82rem;
1074 font-size: 0.72rem;
1075 font-family: var(--font-mono);
1076}
1077
1078.manifesto-art {
1079 min-height: 0;
1080 margin: 0;
1081 overflow: hidden;
1082}
1083
1084.manifesto-art img {
1085 width: 100%;
1086 height: 100%;
1087 object-fit: cover;
1088 object-position: center 48%;
1089 mix-blend-mode: multiply;
1090 filter: saturate(1.02) contrast(1.02);
1091 transform: scale(1.015);
1092 transform-origin: center;
1093}
1094
1095.tickets {
1096 position: relative;
1097 display: grid;
1098 grid-template-columns: minmax(8.5rem, 16.5%) minmax(9.2rem, 17.5%) minmax(0, 1fr) minmax(8.4rem, 14.5%);
1099 gap: 0;
1100 align-items: center;
1101 min-height: clamp(11.2rem, 21.5vw, 14.35rem);
1102 padding: clamp(0.58rem, 1.05vw, 1rem) clamp(1.2rem, 3vw, 2rem);
1103 overflow-x: clip;
1104 overflow-y: visible;
1105}
1106
1107.ticket-pine {
1108 position: absolute;
1109 left: clamp(-5.8rem, -8.8vw, -3rem);
1110 top: clamp(-4.4rem, -5.6vw, -2.2rem);
1111 z-index: 0;
1112 width: clamp(15.8rem, 29vw, 30rem);
1113 pointer-events: none;
1114 opacity: 0.98;
1115 transform: translate3d(-0.6rem, 0.4rem, 0);
1116 transition: transform 1000ms var(--ease), opacity 760ms var(--ease);
1117}
1118
1119.tickets:has(.tickets-heading.is-visible) .ticket-pine {
1120 transform: translate3d(0, 0, 0);
1121}
1122
1123.tickets-heading {
1124 grid-column: 2;
1125 position: relative;
1126 z-index: 1;
1127 transform: translateY(-0.28rem);
1128}
1129
1130.ticket-options {
1131 grid-column: 3;
1132 position: relative;
1133 z-index: 1;
1134 display: grid;
1135 grid-template-columns: repeat(4, minmax(5.65rem, 1fr));
1136 gap: 0;
1137 padding-right: clamp(0.65rem, 1.45vw, 1.35rem);
1138}
1139
1140.ticket-options article {
1141 position: relative;
1142 display: grid;
1143 justify-items: center;
1144 align-content: start;
1145 grid-template-rows: 0.58rem auto 2.55rem 1.52rem 2.35rem;
1146 row-gap: 0.34rem;
1147 min-height: 7rem;
1148 padding: 0 0.38rem;
1149 text-align: center;
1150 opacity: 0;
1151 transform: translate3d(0, 0.75rem, 0);
1152 transition: opacity 480ms var(--ease), transform 620ms var(--ease-quint);
1153}
1154
1155.ticket-options.is-visible article {
1156 opacity: 1;
1157 transform: translate3d(0, 0, 0);
1158}
1159
1160.ticket-options.is-visible article:nth-child(2) {
1161 transition-delay: 90ms;
1162}
1163
1164.ticket-options.is-visible article:nth-child(3) {
1165 transition-delay: 180ms;
1166}
1167
1168.ticket-options.is-visible article:nth-child(4) {
1169 transition-delay: 270ms;
1170}
1171
1172.ticket-options article + article {
1173 border-left: 1px solid var(--line);
1174}
1175
1176.ticket-options article::before {
1177 width: 0.58rem;
1178 aspect-ratio: 1;
1179 border: 1px solid var(--gold);
1180 border-radius: 50%;
1181 box-shadow: inset 0 0 0 0.2rem var(--paper);
1182 content: "";
1183 transform: scale(0.72);
1184 transition: transform 360ms var(--ease-quint), background 260ms var(--ease);
1185}
1186
1187.ticket-options.is-visible article::before {
1188 transform: scale(1);
1189}
1190
1191.ticket-options article:hover::before,
1192.ticket-options article:focus-within::before {
1193 background: var(--gold);
1194}
1195
1196.ticket-options h3 {
1197 margin: 0;
1198 color: var(--ink-soft);
1199 font-family: var(--font-mono);
1200 font-size: 0.68rem;
1201 font-weight: 500;
1202 text-transform: uppercase;
1203}
1204
1205.ticket-options p {
1206 max-width: 6.7rem;
1207 margin: 0;
1208 color: var(--ink-soft);
1209 font-size: 0.68rem;
1210 line-height: 1.18;
1211}
1212
1213.ticket-options strong {
1214 display: inline-flex;
1215 align-items: center;
1216 justify-content: center;
1217 color: var(--sun-deep);
1218 font-family: var(--font-serif);
1219 font-size: 0.86rem;
1220 font-weight: 600;
1221}
1222
1223.ticket-options a,
1224.ticket-seal a {
1225 display: inline-grid;
1226 place-items: center;
1227 width: 2.35rem;
1228 aspect-ratio: 1;
1229 margin-top: 0;
1230 border-radius: 50%;
1231 color: var(--rice);
1232 background: var(--ink);
1233 font-family: var(--font-mono);
1234 font-size: 0.52rem;
1235 font-weight: 700;
1236 text-transform: uppercase;
1237 transition: background 180ms var(--ease), transform 240ms var(--ease);
1238}
1239
1240.ticket-options a:hover,
1241.ticket-options a:focus-visible,
1242.ticket-seal a:hover,
1243.ticket-seal a:focus-visible {
1244 background: var(--sun-deep);
1245 transform: translateY(-0.22rem);
1246}
1247
1248.ticket-seal {
1249 grid-column: 4;
1250 position: relative;
1251 z-index: 2;
1252 align-self: stretch;
1253 display: grid;
1254 place-items: center;
1255 align-content: center;
1256 gap: clamp(0.65rem, 1vw, 0.95rem);
1257 min-height: 8.6rem;
1258 margin: 0 -1.15rem 0 0.65rem;
1259 padding: clamp(1.45rem, 2.2vw, 2rem) 0 clamp(1rem, 1.5vw, 1.45rem);
1260 overflow: hidden;
1261 color: var(--rice);
1262 background: linear-gradient(135deg, var(--sun), var(--sun-deep));
1263 font-family: var(--font-mono);
1264 font-size: 0.82rem;
1265 font-weight: 700;
1266 line-height: 1.1;
1267 text-transform: uppercase;
1268}
1269
1270.ticket-seal-label {
1271 position: relative;
1272 z-index: 1;
1273 display: grid;
1274 place-content: center;
1275 justify-items: center;
1276 gap: 0.48rem;
1277 width: clamp(5.05rem, 7.2vw, 7.7rem);
1278 aspect-ratio: 1;
1279 border: 2px solid var(--gold-bright);
1280 border-radius: 50%;
1281 line-height: 1;
1282 transform: scale(0.94);
1283 transition: transform 420ms var(--ease-quint), border-color 240ms var(--ease);
1284}
1285
1286.ticket-seal a {
1287 position: relative;
1288 z-index: 1;
1289}
1290
1291.ticket-seal a {
1292 border: 1px solid var(--rice);
1293 background: transparent;
1294 font-size: 1.1rem;
1295}
1296
1297.ticket-seal.is-visible .ticket-seal-label {
1298 transform: scale(1);
1299}
1300
1301.ticket-seal:hover .ticket-seal-label,
1302.ticket-seal:focus-within .ticket-seal-label {
1303 border-color: var(--rice);
1304 transform: translateY(-0.12rem) scale(1.015);
1305}
1306
1307.site-footer {
1308 display: grid;
1309 grid-template-columns: auto 1fr auto auto;
1310 align-items: center;
1311 gap: clamp(1rem, 4vw, 4rem);
1312 padding: 0.5rem clamp(1.2rem, 3vw, 2rem);
1313 color: var(--gold-bright);
1314 background: var(--night);
1315 font-family: var(--font-mono);
1316 font-size: 0.7rem;
1317 text-transform: uppercase;
1318}
1319
1320.site-footer .brand-mark {
1321 width: 1.55rem;
1322}
1323
1324.site-footer p {
1325 margin: 0;
1326 color: oklch(74% 0.08 84 / 0.8);
1327}
1328
1329.site-footer nav,
1330.language-switch {
1331 display: flex;
1332 align-items: center;
1333 gap: clamp(0.8rem, 2vw, 1.8rem);
1334}
1335
1336.site-footer a {
1337 transition: color 180ms var(--ease);
1338}
1339
1340.site-footer a:hover,
1341.site-footer a:focus-visible {
1342 color: var(--rice);
1343}
1344
1345@media (min-width: 1200px) {
1346 .agenda-panel {
1347 align-content: center;
1348 padding: clamp(2.4rem, 3.4vw, 3.9rem);
1349 }
1350
1351 .agenda-panel::after {
1352 right: -13rem;
1353 width: clamp(22rem, 33vw, 31rem);
1354 }
1355
1356 .agenda-panel .section-label {
1357 margin-bottom: 0.95rem;
1358 font-size: clamp(3rem, 3.55vw, 4.5rem);
1359 }
1360
1361 .agenda-panel h2 {
1362 max-width: 27rem;
1363 font-size: clamp(1.2rem, 1.34vw, 1.62rem);
1364 line-height: 1.3;
1365 }
1366
1367 .agenda-days {
1368 gap: clamp(1rem, 1.35vw, 1.55rem);
1369 margin: clamp(1.75rem, 2.3vw, 2.65rem) 0 clamp(1.1rem, 1.55vw, 1.8rem);
1370 }
1371
1372 .agenda-days li {
1373 grid-template-columns: clamp(4.9rem, 5.45vw, 6.4rem) minmax(14rem, 19rem);
1374 gap: clamp(1.75rem, 2.1vw, 2.45rem);
1375 }
1376
1377 .agenda-days li::before {
1378 left: calc(clamp(4.9rem, 5.45vw, 6.4rem) + clamp(0.88rem, 1.05vw, 1.22rem));
1379 width: clamp(0.92rem, 1vw, 1.15rem);
1380 }
1381
1382 .agenda-days li:not(:last-child)::after {
1383 left: calc(clamp(4.9rem, 5.45vw, 6.4rem) + clamp(0.88rem, 1.05vw, 1.22rem) + clamp(0.46rem, 0.5vw, 0.575rem));
1384 top: 1.25rem;
1385 height: calc(100% + 1.35rem);
1386 }
1387
1388 .agenda-days time {
1389 font-size: clamp(0.82rem, 0.94vw, 1.08rem);
1390 letter-spacing: 0.03em;
1391 }
1392
1393 .agenda-days h3 {
1394 margin-bottom: 0.24rem;
1395 font-size: clamp(0.95rem, 1.05vw, 1.25rem);
1396 }
1397
1398 .agenda-days p {
1399 max-width: 18rem;
1400 font-size: clamp(0.84rem, 0.93vw, 1.08rem);
1401 line-height: 1.25;
1402 }
1403
1404 .agenda-panel .text-action {
1405 gap: 0.95rem;
1406 font-size: clamp(0.78rem, 0.82vw, 0.95rem);
1407 }
1408}
1409
1410@media (max-width: 980px) and (min-width: 761px) {
1411 .tickets {
1412 grid-template-columns: minmax(14rem, 34%) minmax(0, 1fr);
1413 align-items: start;
1414 min-height: auto;
1415 gap: clamp(1.2rem, 2.4vw, 2rem);
1416 padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.25rem, 3vw, 1.8rem) clamp(1.55rem, 3vw, 2.15rem);
1417 }
1418
1419 .ticket-pine {
1420 left: clamp(-5.5rem, -7vw, -3.2rem);
1421 top: clamp(-3.9rem, -4.8vw, -2.4rem);
1422 width: clamp(14rem, 25vw, 19rem);
1423 }
1424
1425 .tickets-heading {
1426 grid-column: 1;
1427 padding-left: clamp(6.3rem, 14vw, 8rem);
1428 transform: none;
1429 }
1430
1431 .ticket-options {
1432 grid-column: 2;
1433 grid-row: 1 / span 2;
1434 grid-template-columns: repeat(2, minmax(9rem, 1fr));
1435 gap: 1.55rem 0;
1436 padding-right: 0;
1437 }
1438
1439 .ticket-options article {
1440 min-height: 8.8rem;
1441 }
1442
1443 .ticket-options article:nth-child(3) {
1444 border-left: 0;
1445 }
1446
1447 .ticket-seal {
1448 grid-column: 1;
1449 grid-row: 2;
1450 justify-self: stretch;
1451 align-self: end;
1452 width: auto;
1453 min-height: 12.5rem;
1454 margin: clamp(2rem, 4vw, 3rem) 0 0;
1455 padding: 1.7rem 0 1.35rem;
1456 }
1457}
1458
1459[data-reveal] {
1460 --reveal-x: 0rem;
1461 --reveal-y: 1.15rem;
1462 --reveal-scale: 1;
1463 --reveal-blur: 0px;
1464 opacity: 0;
1465 filter: blur(var(--reveal-blur));
1466 transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
1467 transition:
1468 opacity 700ms var(--ease),
1469 filter 820ms var(--ease),
1470 transform 920ms var(--ease-quint);
1471 transition-delay: var(--reveal-delay, 0ms);
1472 will-change: opacity, filter, transform;
1473}
1474
1475[data-reveal].is-visible {
1476 opacity: 1;
1477 filter: blur(0);
1478 transform: translate3d(0, 0, 0) scale(1);
1479 will-change: auto;
1480}
1481
1482.hero-copy[data-reveal] {
1483 --reveal-x: -1.1rem;
1484 --reveal-y: 0rem;
1485 --reveal-blur: 2px;
1486}
1487
1488.hero-art[data-reveal],
1489.agenda-art[data-reveal],
1490.speaker-carousel[data-reveal] {
1491 --reveal-x: 0.9rem;
1492 --reveal-y: 0rem;
1493 --reveal-scale: 1.025;
1494 --reveal-blur: 8px;
1495 transform-origin: center;
1496}
1497
1498.section-intro[data-reveal],
1499.tickets-heading[data-reveal] {
1500 --reveal-x: -0.8rem;
1501 --reveal-y: 0rem;
1502 --reveal-blur: 3px;
1503}
1504
1505.ticket-seal[data-reveal] {
1506 --reveal-y: 0.7rem;
1507 --reveal-scale: 0.97;
1508 --reveal-blur: 2px;
1509}
1510
1511.hero-copy h1 span {
1512 opacity: 0;
1513 transform: translate3d(-0.55rem, 0, 0);
1514}
1515
1516.hero-copy.is-visible h1 span {
1517 animation: title-rise 720ms var(--ease-quint) both;
1518}
1519
1520.hero-copy.is-visible h1 span:nth-child(2) {
1521 animation-delay: 90ms;
1522}
1523
1524.hero-copy.is-visible h1 span:nth-child(3) {
1525 animation-delay: 180ms;
1526}
1527
1528@keyframes title-rise {
1529 from {
1530 opacity: 0;
1531 transform: translate3d(-0.55rem, 0, 0);
1532 }
1533
1534 to {
1535 opacity: 1;
1536 transform: translate3d(0, 0, 0);
1537 }
1538}
1539
1540@keyframes ink-settle {
1541 from {
1542 opacity: 0;
1543 filter: blur(4px);
1544 transform: translate3d(0, -0.45rem, 0);
1545 }
1546
1547 to {
1548 opacity: 1;
1549 filter: blur(0);
1550 transform: translate3d(0, 0, 0);
1551 }
1552}
1553
1554@keyframes vertical-line-draw {
1555 from {
1556 opacity: 0;
1557 transform: scaleY(0);
1558 }
1559
1560 to {
1561 opacity: 1;
1562 transform: scaleY(1);
1563 }
1564}
1565
1566@keyframes stamp-press {
1567 0% {
1568 opacity: 0;
1569 filter: blur(3px);
1570 transform: scale(1.2);
1571 }
1572
1573 100% {
1574 opacity: 0.9;
1575 filter: blur(0);
1576 transform: scale(1);
1577 }
1578}
1579
1580@media (max-width: 760px) {
1581 .site-header {
1582 grid-template-columns: auto auto 1fr auto;
1583 }
1584
1585 .nav-toggle {
1586 justify-self: end;
1587 display: inline-flex;
1588 align-items: center;
1589 gap: 0.7rem;
1590 min-height: 44px;
1591 padding: 0;
1592 border: 0;
1593 color: var(--ink);
1594 background: transparent;
1595 font-family: var(--font-mono);
1596 font-size: 0.7rem;
1597 text-transform: uppercase;
1598 cursor: pointer;
1599 }
1600
1601 .nav-toggle i,
1602 .nav-toggle i::before,
1603 .nav-toggle i::after {
1604 display: block;
1605 width: 1.55rem;
1606 height: 1px;
1607 background: currentColor;
1608 content: "";
1609 transition: transform 240ms var(--ease), opacity 180ms var(--ease);
1610 }
1611
1612 .nav-toggle i {
1613 position: relative;
1614 }
1615
1616 .nav-toggle i::before,
1617 .nav-toggle i::after {
1618 position: absolute;
1619 left: 0;
1620 }
1621
1622 .nav-toggle i::before {
1623 top: -0.45rem;
1624 }
1625
1626 .nav-toggle i::after {
1627 top: 0.45rem;
1628 }
1629
1630 .nav-toggle[aria-expanded="true"] i {
1631 background: transparent;
1632 }
1633
1634 .nav-toggle[aria-expanded="true"] i::before {
1635 transform: translateY(0.45rem) rotate(45deg);
1636 }
1637
1638 .nav-toggle[aria-expanded="true"] i::after {
1639 transform: translateY(-0.45rem) rotate(-45deg);
1640 }
1641
1642 .site-nav {
1643 position: absolute;
1644 top: 100%;
1645 left: 1rem;
1646 right: 1rem;
1647 display: grid;
1648 justify-items: start;
1649 gap: 0;
1650 padding: 1rem 1.25rem 1.15rem;
1651 border: 1px solid var(--line);
1652 background: var(--rice);
1653 box-shadow: var(--shadow);
1654 opacity: 0;
1655 pointer-events: none;
1656 transform: translateY(-0.75rem);
1657 transition: opacity 220ms var(--ease), transform 260ms var(--ease);
1658 }
1659
1660 .site-nav.is-open {
1661 opacity: 1;
1662 pointer-events: auto;
1663 transform: translateY(0);
1664 }
1665
1666 .site-nav a {
1667 width: 100%;
1668 }
1669
1670 .ticket-pill {
1671 grid-column: 4;
1672 }
1673
1674 .hero {
1675 grid-template-columns: minmax(1.2rem, 1fr) minmax(18rem, 32rem) minmax(12rem, 28rem) minmax(1.2rem, 1fr);
1676 }
1677
1678 .hero h1 {
1679 font-size: clamp(3rem, 8vw, 5.2rem);
1680 }
1681
1682 .tickets {
1683 grid-template-columns: minmax(7rem, 12rem) minmax(11rem, 15rem) 1fr;
1684 }
1685
1686 .ticket-seal {
1687 grid-column: 1 / -1;
1688 min-height: 9rem;
1689 margin: 0 -2rem -3rem;
1690 }
1691}
1692
1693@media (max-width: 760px) {
1694 .site-header {
1695 grid-template-columns: auto 1fr auto;
1696 }
1697
1698 .ticket-pill {
1699 display: none;
1700 }
1701
1702 .hero {
1703 height: auto;
1704 min-height: 100svh;
1705 display: grid;
1706 grid-template-columns: 1rem 1fr 1rem;
1707 grid-auto-rows: auto;
1708 overflow: hidden;
1709 }
1710
1711 .hero::before,
1712 .hero::after,
1713 .hero-art::after,
1714 .vertical-poem {
1715 display: none;
1716 }
1717
1718 .hero-copy {
1719 grid-column: 2;
1720 grid-row: 1;
1721 width: auto;
1722 padding: calc(var(--header-height) + 2.25rem) 0 1.7rem;
1723 }
1724
1725 .hero-copy[data-reveal],
1726 .hero-art[data-reveal],
1727 .agenda-art[data-reveal],
1728 .speaker-carousel[data-reveal] {
1729 --reveal-x: 0rem;
1730 --reveal-scale: 1;
1731 }
1732
1733 .hero h1 {
1734 max-width: 7em;
1735 font-size: clamp(2.8rem, 13vw, 5rem);
1736 }
1737
1738 .hero-summary {
1739 margin-bottom: 1.35rem;
1740 }
1741
1742 .hero-meta {
1743 gap: 0.45rem;
1744 font-size: clamp(0.68rem, 2.9vw, 0.78rem);
1745 line-height: 1.35;
1746 overflow-wrap: anywhere;
1747 }
1748
1749 .hero-art {
1750 position: relative;
1751 inset: auto;
1752 grid-column: 1 / -1;
1753 grid-row: 2;
1754 min-height: clamp(18rem, 72vw, 28rem);
1755 }
1756
1757 .hero-art figcaption {
1758 top: 2rem;
1759 right: 1.1rem;
1760 }
1761
1762 .agenda-block,
1763 .speakers,
1764 .installations,
1765 .manifesto,
1766 .tickets {
1767 grid-template-columns: 1fr;
1768 }
1769
1770 .agenda-block {
1771 height: auto;
1772 }
1773
1774 .agenda-panel {
1775 min-height: auto;
1776 padding: clamp(2.6rem, 8vw, 4rem) clamp(1.15rem, 5vw, 2rem);
1777 }
1778
1779 .agenda-panel::after {
1780 right: -4rem;
1781 width: 10rem;
1782 }
1783
1784 .agenda-art {
1785 min-height: 23rem;
1786 }
1787
1788 .speakers,
1789 .installations {
1790 padding: 3.2rem 1rem;
1791 }
1792
1793 .speakers {
1794 height: auto;
1795 }
1796
1797 .speakers .section-intro {
1798 grid-column: auto;
1799 grid-row: auto;
1800 padding-left: 0;
1801 padding-right: 0;
1802 }
1803
1804 .speakers .speaker-carousel {
1805 grid-column: auto;
1806 grid-row: auto;
1807 }
1808
1809 .speaker-carousel {
1810 height: clamp(29rem, 108vw, 36rem);
1811 min-height: 0;
1812 }
1813
1814 .speaker-track,
1815 .speaker-slide,
1816 .speaker-grid {
1817 height: 100%;
1818 min-height: 0;
1819 }
1820
1821 .speaker-grid {
1822 grid-template-columns: 1fr;
1823 grid-template-rows: repeat(3, minmax(0, 1fr));
1824 grid-auto-rows: 0;
1825 }
1826
1827 .speaker-person + .speaker-person {
1828 border-top: 1px solid oklch(50% 0.04 78 / 0.24);
1829 border-left: 0;
1830 }
1831
1832 .speaker-person::before {
1833 display: none;
1834 }
1835
1836 .speaker-person img {
1837 object-fit: cover;
1838 object-position: var(--speaker-focus-x) var(--speaker-focus-y);
1839 transform: scale(1.02);
1840 }
1841
1842 .speaker-meta {
1843 left: 0.95rem;
1844 bottom: 0.82rem;
1845 max-width: calc(100% - 4.25rem);
1846 }
1847
1848 .speaker-meta span {
1849 font-size: 1rem;
1850 }
1851
1852 .speaker-meta small {
1853 font-size: 0.68rem;
1854 }
1855
1856 .speaker-controls {
1857 left: 1rem;
1858 right: auto;
1859 }
1860
1861 .section-intro .text-action {
1862 margin-top: 0.7rem;
1863 }
1864
1865 .installation-rhythm {
1866 grid-template-columns: 1fr;
1867 }
1868
1869 .item-dream,
1870 .item-echoes {
1871 margin-top: 0;
1872 }
1873
1874 .manifesto-copy {
1875 min-height: 20rem;
1876 }
1877
1878 .manifesto-art {
1879 min-height: 17rem;
1880 }
1881
1882 .tickets {
1883 gap: 1.35rem;
1884 padding: 3.5rem 1rem 2.4rem;
1885 }
1886
1887 .ticket-pine {
1888 opacity: 0.32;
1889 }
1890
1891 .tickets-heading,
1892 .ticket-options,
1893 .ticket-seal {
1894 grid-column: 1;
1895 }
1896
1897 .ticket-options {
1898 grid-template-columns: repeat(2, minmax(9rem, 1fr));
1899 gap: 2rem 0;
1900 }
1901
1902 .ticket-seal {
1903 justify-self: center;
1904 width: min(21rem, 100%);
1905 min-height: 13.2rem;
1906 margin: 1.4rem 0 0;
1907 padding: 1.65rem 0 1.35rem;
1908 }
1909
1910 .ticket-options article:nth-child(3) {
1911 border-left: 0;
1912 }
1913
1914 .site-footer {
1915 grid-template-columns: 1fr;
1916 align-items: start;
1917 }
1918
1919 .site-footer p {
1920 line-break: strict;
1921 overflow-wrap: anywhere;
1922 }
1923}
1924
1925@media (max-width: 540px) {
1926 .site-header {
1927 padding-left: 0.8rem;
1928 padding-right: 0.8rem;
1929 }
1930
1931 .brand-mark {
1932 width: 2.15rem;
1933 }
1934
1935 .brand-word {
1936 font-size: 0.72rem;
1937 }
1938
1939 .hero h1 {
1940 font-size: clamp(2.45rem, 14vw, 3.9rem);
1941 }
1942
1943 .hero-art {
1944 min-height: clamp(17.5rem, 78vw, 22rem);
1945 }
1946
1947 .agenda-panel {
1948 padding: 3rem 1.1rem;
1949 }
1950
1951 .agenda-days li {
1952 grid-template-columns: 4.15rem minmax(0, 1fr);
1953 gap: 2rem;
1954 }
1955
1956 .agenda-days li::before {
1957 left: 4.92rem;
1958 }
1959
1960 .agenda-days li:not(:last-child)::after {
1961 left: calc(4.92rem + 0.44rem);
1962 }
1963
1964 .agenda-days h3,
1965 .agenda-days p {
1966 max-width: 100%;
1967 overflow-wrap: anywhere;
1968 }
1969
1970 .agenda-days p {
1971 line-height: 1.28;
1972 }
1973
1974 .ticket-options {
1975 grid-template-columns: 1fr;
1976 gap: 1.65rem;
1977 }
1978
1979 .ticket-options article,
1980 .ticket-options article + article,
1981 .ticket-options article:nth-child(3) {
1982 grid-template-rows: 0.64rem auto auto 2.85rem;
1983 row-gap: 0.62rem;
1984 border-left: 0;
1985 border-top: 1px solid var(--line);
1986 padding-top: 1.8rem;
1987 }
1988
1989 .ticket-options article:first-child {
1990 border-top: 0;
1991 }
1992
1993 .ticket-options strong {
1994 min-height: 1.8rem;
1995 }
1996
1997 .ticket-seal {
1998 width: min(18rem, 100%);
1999 min-height: 12.4rem;
2000 margin-top: 1.8rem;
2001 }
2002}
2003
2004@media (prefers-reduced-motion: reduce) {
2005 html {
2006 scroll-behavior: auto;
2007 }
2008
2009 *,
2010 *::before,
2011 *::after {
2012 animation-duration: 0.01ms !important;
2013 animation-iteration-count: 1 !important;
2014 scroll-behavior: auto !important;
2015 transition-duration: 0.01ms !important;
2016 }
2017
2018 [data-reveal] {
2019 opacity: 1;
2020 filter: none;
2021 transform: none;
2022 }
2023
2024 .vertical-poem span,
2025 .vertical-poem i,
2026 .vertical-poem img,
2027 .hero-copy h1 span,
2028 .agenda-panel .section-label,
2029 .agenda-panel h2,
2030 .agenda-days li,
2031 .agenda-panel .text-action,
2032 .installation-rhythm .installation-item,
2033 .speaker-meta,
2034 .ticket-options article {
2035 opacity: 1;
2036 filter: none;
2037 transform: none;
2038 }
2039
2040 .agenda-days li::before,
2041 .agenda-days li:not(:last-child)::after,
2042 .ticket-options article::before,
2043 .ticket-seal-label {
2044 opacity: 1;
2045 transform: none;
2046 }
2047}