@font-face { font-family:Anton; src:url('assets/anton.ttf') format('truetype'); font-weight:400; font-display:swap}
@font-face { font-family:'Pretendard Variable'; src:url('assets/PretendardVariable.woff2') format('woff2'); font-style:normal; font-weight:45 920; font-display:swap; unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF,U+3000-303F,U+FF00-FFEF}


:root { --bg:#000; --ink:#f2eddf; --coral:#ed5044; --muted:#a7a49d; --rule:#292929; --sans:'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --display:Anton,Impact,sans-serif}

* { box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top:96px}
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased}
::selection { background:var(--coral); color:var(--bg)}
a { color:inherit; text-decoration:none}
button { font:inherit; cursor:pointer}
button,a { -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--coral); outline-offset:6px}
.wrap { width:calc(100% - 112px); max-width:1200px; margin-inline:auto}
.header { height:76px; position:sticky; top:0; z-index:20; background:rgba(0,0,0,.94); backdrop-filter:blur(20px); border-bottom:1px solid #ffffff0d}
.nav { height:100%; display:flex; align-items:center; justify-content:space-between}
.wordmark { font-family:var(--display); font-size:30px; letter-spacing:-1px}
.logo-dot { color:var(--coral)}
.nav-caption { font-size:13px; letter-spacing:.12em; color:var(--muted)}
.nav-link { font-size:15px; display:flex; align-items:center; gap:24px}
.eyebrow,.section-label,.scroll-link { font-size:14px; letter-spacing:.1em; font-weight:500; line-height:1.6}
.invitation-body>.eyebrow { font-size:18px; font-weight:600; letter-spacing:.08em}
.hero { padding-top:32px}
.hero-eyebrow { display:flex; justify-content:space-between; margin-bottom:22px; color:var(--muted)}
.hero-eyebrow>span:first-child { color:var(--ink); display:flex; align-items:center; gap:9px}
.live-dot { display:inline-block; width:6px; height:6px; border-radius:100%; background:var(--coral)}
.strips { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; height:clamp(300px,34vw,440px); align-items:start; isolation:isolate}
.strip { --crop-top:0; --crop-height:1; --focus-x:.5; --focus-y:.5; --zoom-limit:2; position:relative; min-width:0; overflow:hidden; height:100%; background:#000; animation:strip-enter 1.15s cubic-bezier(.2,.7,.2,1) both}
/* Stop the colored backing at the photo's actual bottom, without leaving a
   bright footer when the photo's zoom limit leaves space below it. */
.strip::before { content:''; position:absolute; left:0; top:0; width:100%; height:clamp(0px,var(--photo-bottom,100%),100%); background:var(--coral); pointer-events:none}
/* Fill each strip around its performer, with a per-photo cap on enlargement.
   The original image ratio remains fixed; only framing changes. */
.portrait { position:absolute; left:0; top:0; width:100%; height:auto; aspect-ratio:var(--source-ratio); overflow:hidden; background:var(--coral)}
/* Native container sizing updates in the same layout pass as its frame,
   including the exact moment a viewport crosses the mobile breakpoint. */
@supports (width:1cqw) {
  .strip {
    container-type:size;
    --photo-width:min(max(100cqw,calc(100cqh * var(--source-ratio) / var(--crop-height))),calc(100cqw * var(--zoom-limit)));
    --photo-height:calc(var(--photo-width) / (var(--source-ratio)));
    --photo-left:calc((100cqw - var(--photo-width)) * var(--focus-x));
    --photo-top:calc((100cqh - var(--photo-height) * var(--crop-height)) * var(--focus-y) - var(--photo-height) * var(--crop-top));
    --photo-bottom:calc(var(--photo-top) + var(--photo-height));
  }
  .portrait { width:var(--photo-width); height:var(--photo-height); left:var(--photo-left); top:var(--photo-top)}
}
.strip img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(1) contrast(1.65) brightness(.8); mix-blend-mode:multiply}
/* These two compositions reproduce the original material nodes in Figma:
   image 17 (34:6) and image 16 (34:3). Their photo files include extra stage
   footage around the intended source frame; preserve that frame's full area. */
.strip--vocal img { inset:auto; left:-86.65%; top:-69.5%; width:263.89%; height:203.89%}
.strip--drums img { inset:auto; left:-3.28%; top:-91.02%; width:120.43%; height:212.02%}
.strip:nth-child(2) { height:94%; animation-delay:.05s}
.strip:nth-child(3) { height:88%; animation-delay:.1s}
.strip:nth-child(4) { height:76%; animation-delay:.15s}
.strip:nth-child(5) { height:70%; animation-delay:.2s}
.strip:nth-child(6) { height:64%; animation-delay:.25s}
.strips { touch-action:pan-y}
.strip img { -webkit-user-drag:none; user-select:none}
.tv-noise { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; opacity:0; pointer-events:none; mix-blend-mode:screen; image-rendering:pixelated}
.hero-title-row { display:flex; justify-content:space-between; align-items:flex-end; margin-top:30px; padding-bottom:32px}
.hero h1 { font-family:var(--display); font-weight:400; font-size:clamp(150px,19vw,252px); letter-spacing:-.035em; line-height:.94; margin:0 0 24px -6px}
.hero-name>p { font-family:var(--sans); font-size:clamp(15px,1.6vw,20px); font-weight:500; letter-spacing:.12em; margin:0; line-height:1.4}
.hero-date { font-family:var(--display); font-size:clamp(42px,6.15vw,80px); line-height:1.02; letter-spacing:-.035em; text-align:right; color:var(--coral); display:flex; flex-direction:column}
.hero-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); padding:22px 0 30px}
.hero-bottom>p { font-size:18px; font-weight:600; line-height:1.8; margin:0; letter-spacing:.015em}
.hero-bottom .muted { font-size:13px; margin-left:8px; font-weight:400}
.time { margin-left:20px}
.hero-venue { color:var(--muted); font-size:15px; letter-spacing:.04em; font-weight:400}
.scroll-link { display:flex; gap:40px; align-items:center}
.scroll-link span { font-size:24px; color:var(--coral)}
.section { border-top:1px solid var(--rule); padding-top:24px; padding-bottom:112px; scroll-margin-top:10px}
.section-label { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; letter-spacing:.1em}
.invitation { margin-top:60px}
.invitation-body { padding:82px 0 0 25%}
.coral { color:var(--coral)}
.invitation h2 { font-size:clamp(32px,3.8vw,48px); letter-spacing:-.045em; line-height:1.35; font-weight:600; margin:25px 0 25px}
.body-copy { font-size:18px; line-height:1.9; color:var(--muted); letter-spacing:-.015em}
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.button { border:1px solid var(--rule); border-radius:100px; min-height:48px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:28px; font-size:15px; font-weight:500; transition:background .2s,color .2s,border-color .2s; white-space:nowrap}
.button span[aria-hidden] { font-size:18px; font-weight:400}
.primary { background:var(--coral); border-color:var(--coral); color:#000000}
.primary:hover { background:#fa7267; border-color:#fa7267}
.secondary { background:transparent; color:var(--ink)}
.secondary:hover { background:var(--ink); border-color:var(--ink); color:var(--bg)}
.lineup-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:65px 0 38px}
.lineup-heading h2 { font-family:var(--sans); font-weight:600; font-size:clamp(32px,3.8vw,48px); line-height:1.35; margin:0; letter-spacing:-.035em}
.lineup-heading p { font-size:14px; color:var(--muted); margin:0 0 7px}
.performers { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; list-style:none; padding:0; margin:0}
.performers li { display:flex; align-items:center; gap:20px; border-top:1px solid var(--rule); padding:24px 0}
.performers li:nth-child(1) { grid-area:1/1}
.performers li:nth-child(2) { grid-area:2/1}
.performers li:nth-child(3) { grid-area:3/1}
.performers li:nth-child(4) { grid-area:1/2}
.performers li:nth-child(5) { grid-area:2/2}
.performers li:nth-child(6) { grid-area:3/2}
.performer-number { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.performers li>span:nth-child(2) { font-family:var(--sans); font-size:24px; line-height:1.4; font-weight:400; letter-spacing:-.025em}
.visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:76px}
.visit-main h2 { font-size:clamp(32px,3.8vw,48px); font-weight:600; letter-spacing:-.045em; margin:20px 0 24px; line-height:1.2}
.visit-main h2 span { font-family:inherit; font-weight:inherit; color:var(--coral); display:inline-block; letter-spacing:inherit; font-size:inherit; margin-left:16px}
.address { font-size:17px; color:var(--muted); line-height:1.7}
.text-button { border:0; background:transparent; color:var(--ink); font-size:13px; min-height:44px; padding:10px 0; display:inline-flex; gap:22px}
.text-button:hover { color:var(--coral)}
.detail-row { border-top:1px solid var(--rule); padding:24px 0; display:flex; align-items:center; justify-content:space-between}
.detail-row>span { font-size:13px; letter-spacing:.08em; color:var(--muted)}
.detail-row p { margin:0; font-size:18px; font-weight:500; letter-spacing:-.025em}
.detail-row small { font-size:14px; color:var(--muted); font-weight:400; margin-left:10px}
.map-links { display:flex; gap:10px; padding-top:18px}
.map-links .button { flex:1; justify-content:center; padding-inline:20px}
.muted { color:var(--muted)}
.closing { text-align:center; border-top:1px solid var(--rule); padding:90px 0}
.closing-title { font-family:var(--sans); font-size:clamp(28px,3.3vw,42px); font-weight:500; line-height:1.35; letter-spacing:-.035em; margin:30px 0}
.closing-title span { color:var(--coral)}
.closing .button { margin-top:8px}
.footer { border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; padding:25px 0 32px}
.footer p,.footer>a:last-child { font-size:12px; letter-spacing:.06em; color:var(--muted)}
.footer .wordmark { font-size:25px}
.mobile-dock { display:none}
.toast { position:fixed; bottom:30px; left:50%; transform:translate(-50%,12px); background:var(--ink); color:var(--bg); font-size:13px; padding:16px 24px; border-radius:100px; z-index:40; opacity:0; transition:.2s; pointer-events:none; max-width:calc(100% - 30px); text-align:center; white-space:nowrap}
.toast.visible { opacity:1; transform:translate(-50%,0)}
.skip-link { position:fixed; top:-80px; left:20px; z-index:50; background:var(--ink); color:var(--bg); padding:16px}
.skip-link:focus { top:10px}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
dialog { background:var(--bg); color:var(--ink); border:1px solid var(--rule); border-radius:16px; padding:30px; max-width:calc(100% - 40px); width:440px}
dialog::backdrop { background:#000b}
dialog h2 { font-size:20px}
dialog p { color:var(--muted); font-size:13px; line-height:1.7}
dialog textarea { width:100%; min-height:100px; background:#000; color:var(--ink); padding:15px; border:1px solid var(--rule); font:inherit; resize:vertical; margin:10px 0 20px}

.poster-rule { height:2px; overflow:hidden; opacity:.5; background:var(--ink)}
.poster-rule img { display:block}
.hero-bottom { border-top:0}
.strips { position:relative}

@keyframes strip-enter { from { opacity:0; transform:translateY(20px)}
to { opacity:1; transform:translateY(0)}
}

@media(min-width:1500px) { .strips { height:470px}
}

@media(max-width:900px) { .wrap { width:calc(100% - 64px)}
.strips { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,clamp(220px,38vw,320px)); height:auto; gap:12px}
.strip:nth-child(3n + 1) { height:100%}
.strip:nth-child(3n + 2) { height:94%}
.strip:nth-child(3n) { height:88%}
.invitation-body { padding-left:15%}
.performers { column-gap:36px}
.visit-grid { gap:36px}
.map-links { flex-wrap:wrap}
.visit-main h2 { font-size:40px}
.detail-row p { font-size:16px}
}

@media(max-width:600px) { html { scroll-padding-top:82px}
.wrap { width:calc(100% - 40px)}
.header { height:64px}
.wordmark { font-size:27px}
.nav-caption { display:none}
.nav-link { font-size:14px; gap:15px}
.hero { padding-top:26px}
.hero-eyebrow { font-size:12px; letter-spacing:.08em; margin-bottom:20px}
.strips { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,clamp(180px,52vw,260px)); height:auto; gap:12px}
.strip:nth-child(3n + 1) { height:100%}
.strip:nth-child(3n + 2) { height:94%}
.strip:nth-child(3n) { height:88%}
.hero-title-row { margin-top:24px; padding-bottom:27px; align-items:flex-start}
.hero h1 { font-size:clamp(130px,35.5vw,210px); margin:0 0 17px -3px; line-height:.98}
.hero-name>p { font-size:clamp(11px,3vw,16px); letter-spacing:.08em}
.hero-date { font-size:clamp(36px,10vw,59px); line-height:1.06; margin-top:2px}
.hero-bottom { padding:19px 0 24px; align-items:center}
.hero-bottom>p { font-size:16px; line-height:1.9}
.hero-bottom .muted { font-size:12px; margin-left:4px}
.time { margin-left:10px}
.hero-venue { font-size:13px; letter-spacing:0}
.scroll-link { font-size:0; gap:0}
.scroll-link span { font-size:20px}
.section { padding-bottom:64px; padding-top:20px}
.section-label { font-size:12px; letter-spacing:.08em}
.invitation { margin-top:28px}
.invitation-body { padding:50px 0 0}
.invitation-body>.eyebrow { font-size:16px; letter-spacing:.055em; line-height:1.6}
.invitation h2 { font-size:32px; letter-spacing:-.045em; line-height:1.4; margin-top:22px}
.body-copy { font-size:17px; line-height:1.9}
.actions { margin-top:28px}
.button { font-size:14px; padding:0 18px; min-height:48px; gap:18px}
.lineup-heading { display:block; margin-top:44px; margin-bottom:27px}
.lineup-heading h2 { font-size:32px}
.lineup-heading p { font-size:14px; margin-top:15px}
.performers { column-gap:22px}
.performers li { gap:11px; padding:20px 0}
.performer-number { font-size:12px}
.performers li>span:nth-child(2) { font-size:clamp(16px,4vw,20px); letter-spacing:-.035em}
.visit-grid { grid-template-columns:1fr; gap:35px; margin-top:45px}
.visit-main h2 { font-size:32px; margin:15px 0 20px}
.visit-main h2 span { display:inline-block; font-size:inherit; margin-left:12px}
.address { font-size:16px}
.detail-row { padding:20px 0}
.detail-row p { font-size:18px}
.map-links { flex-wrap:nowrap; padding-top:15px}
.map-links .button { padding-inline:18px; gap:12px}
.closing { padding:65px 0}
.closing-title { font-size:clamp(25px,6.6vw,34px); margin:26px 0; line-height:1.4}
.footer { display:grid; grid-template-columns:auto 1fr; padding:20px 0 110px; gap:12px 20px}
.footer p { font-size:12px; letter-spacing:0; text-align:right}
.footer>a:last-child { grid-column:1/-1; font-size:12px; letter-spacing:0; text-align:right}
.footer .wordmark { font-size:24px}
.mobile-dock { display:flex; position:fixed; bottom:0; left:0; right:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:rgba(0,0,0,.96); backdrop-filter:blur(20px); border-top:1px solid var(--rule); z-index:25; align-items:center; justify-content:space-between; gap:12px}
.mobile-dock>a:first-child { font-size:13px; font-weight:600; line-height:1.7}
.mobile-dock>a:first-child span { display:block; font-size:12px; color:var(--muted); font-weight:400}
.mobile-dock>a:last-child { font-size:13px; background:var(--coral); color:var(--bg); border-radius:50px; padding:13px 23px}
.toast { bottom:94px; font-size:11px; padding:14px 20px}
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto}
*,*:before,*:after { animation:none!important; transition:none!important}
}