:root {
  color-scheme: dark;
  --ink: #160604;
  --deep: #230905;
  --red: #cf2d1d;
  --ember: #ef5a34;
  --cream: #f5e9dc;
  --muted: #b99a8e;
  --line: rgba(245, 233, 220, 0.22);
  --sans: "Noto Sans KR", sans-serif;
  --serif: "Gowun Batang", serif;
  --kopub: "KoPubWorldBatang", "KoPub Batang", "Gowun Batang", serif;
}

@font-face {
  font-family: "KoPubWorldBatang";
  src: url("https://cdn.jsdelivr.net/gh/adrinerDP/font-kopubworld@master/fonts/KoPubWorld-Batang-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--cream); color: var(--ink); padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.scrolled { height: 64px; background: rgba(19, 5, 3, .86); border-color: rgba(245, 233, 220, .12); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 600; letter-spacing: -.02em; }
.brand-mark { width: 18px; height: 22px; display: block; flex: 0 0 auto; color: var(--ember); filter: drop-shadow(0 0 6px rgba(239, 90, 52, .52)); }
nav { display: flex; gap: 2.2rem; font-size: .82rem; letter-spacing: .04em; }
nav a { opacity: .78; transition: opacity .2s ease, color .2s ease; }
nav a:hover, nav a:focus-visible { opacity: 1; color: #fff; }
.menu-button { display: none; border: 0; background: none; padding: .5rem; }

.hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: -6%; z-index: -3; background: url('./assets/sasim-fire.png') center 46% / cover no-repeat; transform: scale(1.03); animation: breathe 12s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(17,4,2,.75) 0%, rgba(17,4,2,.28) 45%, rgba(17,4,2,.34) 100%), linear-gradient(0deg, rgba(17,4,2,.84) 0%, transparent 48%, rgba(17,4,2,.3) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-copy { width: 100%; padding: 0 clamp(1.25rem, 6vw, 6rem) clamp(3.7rem, 8vh, 6.5rem); }
.edition { margin: 0 0 1.2rem; font-size: .75rem; letter-spacing: .22em; font-weight: 600; }
.hero h1 { margin: 0; font-family: var(--kopub); font-size: clamp(5.7rem, 14.5vw, 13.5rem); font-weight: 400; letter-spacing: -.07em; line-height: .94; text-wrap: balance; text-shadow: 0 10px 45px rgba(0,0,0,.3); }
.hero-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.25rem; font-size: .82rem; letter-spacing: .03em; color: rgba(245,233,220,.8); }
.hero-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 1.4rem 2px 0; border-radius: 50%; background: var(--ember); }
.scroll-cue { position: absolute; right: clamp(1.25rem, 4vw, 4.5rem); bottom: 2.6rem; display: flex; align-items: center; gap: 1rem; font-size: .64rem; letter-spacing: .2em; transform: rotate(90deg) translateY(-100%); transform-origin: right top; }
.scroll-cue i { width: 56px; height: 1px; background: rgba(245,233,220,.62); display: block; }
@keyframes breathe { from { transform: scale(1.03); } to { transform: scale(1.08) translate3d(-.4%, -.6%, 0); } }

.section-pad { padding: clamp(6rem, 12vw, 11rem) clamp(1.25rem, 6vw, 6rem); }
.section-kicker { margin: 0 0 2rem; color: var(--ember); font-size: .7rem; letter-spacing: .2em; font-weight: 700; }
.about { background: var(--cream); color: var(--ink); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: clamp(3rem, 9vw, 10rem); align-items: start; }
.about h2, .section-head h2, .schedule h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.7rem, 6vw, 6.4rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.06; }
.about h2 { max-width: 11em; font-size: clamp(2.35rem, 4.7vw, 5rem); line-height: 1.18; word-break: keep-all; }
.about-copy { max-width: 35rem; padding-top: .6rem; }
.about-copy p { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.85; word-break: keep-all; }
.about-copy .about-credit { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(22, 6, 4, .18); font-family: var(--sans); font-size: .85rem; letter-spacing: .08em; }

.manifesto { min-height: 64svh; position: relative; display: grid; place-items: center; overflow: hidden; background: #441008; padding: 6rem 1.5rem; }
.manifesto::before { content: ""; position: absolute; width: 46vw; height: 46vw; min-width: 330px; min-height: 330px; background: radial-gradient(circle, rgba(225,55,27,.32), transparent 68%); filter: blur(18px); }
.manifesto p { position: relative; z-index: 1; max-width: 1320px; margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(1.8rem, 3.8vw, 3.8rem); line-height: 1.5; letter-spacing: -.035em; word-break: keep-all; }
.manifesto-line { position: absolute; top: 50%; left: 0; display: flex; gap: 3rem; white-space: nowrap; font-size: clamp(6rem, 15vw, 13rem); font-weight: 700; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(245,233,220,.08); transform: translateY(-50%); animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translate(-50%, -50%); } }

.program { background: var(--ink); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
.section-head h2 { color: var(--cream); }
.program-note { margin: 0; color: var(--muted); text-align: right; font-family: var(--serif); line-height: 1.65; }
.program-list { border-top: 1px solid var(--line); }
.film-card { display: grid; grid-template-columns: 70px minmax(180px, 320px) 1fr; gap: clamp(1.2rem, 4vw, 4rem); align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); transition: padding .35s ease, background .35s ease; }
.film-card:hover { padding-left: 1rem; background: rgba(255,255,255,.018); }
.film-index { align-self: start; color: var(--ember); font-size: .75rem; letter-spacing: .12em; }
.film-frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, #34100a, #190604); border: 1px solid rgba(245,233,220,.1); overflow: hidden; color: rgba(245,233,220,.26); font-size: .64rem; letter-spacing: .18em; }
.film-frame::before { content: ""; width: 34%; height: 62%; border-radius: 80% 15% 70% 35%; background: radial-gradient(circle at 50% 76%, #ef633f, #a31f15 54%, transparent 55%); filter: blur(8px); opacity: .62; }
.film-frame span { position: absolute; }
.film-info h3 { margin: 0 0 .8rem; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 400; letter-spacing: -.04em; }
.film-info p { margin: 0; color: var(--muted); font-size: .82rem; }

.schedule { position: relative; min-height: 85svh; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: #2c0c07; }
.schedule-image { min-height: 720px; background: linear-gradient(rgba(39,8,4,.08),rgba(39,8,4,.22)), url('./assets/sasim-fire.png') 50% 56% / cover no-repeat; }
.schedule-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem); }
.schedule h2 { margin-bottom: clamp(3rem, 7vw, 6rem); letter-spacing: .02em; }
.schedule dl { margin: 0; border-top: 1px solid var(--line); }
.schedule dl div { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.schedule dt { color: var(--muted); font-size: .78rem; }
.schedule dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; }
.schedule-caption { margin: 1.6rem 0 0; color: var(--muted); font-size: .8rem; }

.attendance { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(4rem, 10vw, 11rem); align-items: center; background: var(--cream); color: var(--ink); }
.attendance-heading h2 { margin: 0; font-family: var(--kopub); font-size: clamp(4rem, 8.5vw, 9rem); font-weight: 400; line-height: .98; letter-spacing: -.065em; }
.attendance-heading h2 em { color: var(--red); font-style: normal; }
.attendance-note { max-width: 32rem; margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(22, 6, 4, .28); font-family: var(--serif); font-size: .9rem; line-height: 1.75; word-break: keep-all; }
.attendance-details { border-top: 1px solid rgba(22, 6, 4, .28); }
.attendance-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 1rem; padding: clamp(2rem, 4vw, 3.5rem) 0; border-bottom: 1px solid rgba(22, 6, 4, .28); }
.attendance-index { grid-row: 1 / 4; margin: .35rem 0 0; color: var(--red); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.attendance-card h3 { margin: 0 0 1.2rem; font-family: var(--serif); font-size: clamp(1.7rem, 2.7vw, 2.8rem); font-weight: 400; letter-spacing: -.035em; }
.attendance-card > p:not(.attendance-index) { max-width: 37rem; margin: 0; font-family: var(--serif); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.85; word-break: keep-all; }
.attendance-card .attendance-closing { margin-top: 1rem; color: #8a2d21; }
.account-info { margin-top: 2rem; padding: 1.4rem 1.5rem 1.5rem; background: var(--ink); color: var(--cream); }
.account-info p { margin: 0 0 .55rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
.account-info strong { display: block; font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 400; letter-spacing: .01em; word-break: keep-all; }

footer { min-height: 340px; display: grid; grid-template-columns: 1fr auto; align-content: space-between; gap: 3rem; padding: clamp(3rem, 6vw, 6rem); background: #0f0302; border-top: 1px solid rgba(245,233,220,.1); }
.footer-title { margin: 0 0 .6rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.8rem); }
footer p { margin: 0; color: var(--muted); font-size: .8rem; }
.footer-links { display: flex; gap: 2rem; align-items: start; font-size: .75rem; letter-spacing: .06em; }
.footer-links a { padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; border-color: var(--ember); }
.copyright { grid-column: 1 / -1; align-self: end; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 780px) {
  .site-header { height: 66px; }
  .menu-button { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: .72rem; letter-spacing: .08em; }
  .menu-button i { display: block; width: 20px; height: 1px; background: currentColor; grid-column: 2; }
  .menu-button span { grid-row: 1 / 3; }
  nav { position: fixed; top: 65px; left: 0; right: 0; display: grid; gap: 0; padding: .8rem 1.25rem 1.25rem; background: rgba(19,5,3,.97); border-bottom: 1px solid var(--line); transform: translateY(-130%); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
  nav.open { transform: translateY(0); opacity: 1; }
  nav a { padding: .9rem 0; border-bottom: 1px solid rgba(245,233,220,.1); }
  .hero-art { inset: 0; background-position: 52% 50%; }
  .hero-shade { background: linear-gradient(0deg, rgba(17,4,2,.92) 0%, rgba(17,4,2,.14) 72%, rgba(17,4,2,.42) 100%); }
  .hero-copy { padding-bottom: 4.2rem; }
  .hero h1 { font-size: clamp(5rem, 27vw, 8.2rem); }
  .hero-meta { gap: .6rem 1rem; max-width: 90%; }
  .hero-meta span + span::before { margin-right: 1rem; }
  .scroll-cue { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-copy { padding: 0; }
  .manifesto { min-height: 58svh; }
  .section-head { align-items: start; }
  .film-card { grid-template-columns: 34px 110px 1fr; gap: .8rem; padding: 1.25rem 0; }
  .film-info h3 { font-size: 1.25rem; margin-bottom: .45rem; }
  .film-info p { font-size: .68rem; line-height: 1.5; }
  .schedule { grid-template-columns: 1fr; }
  .schedule-image { min-height: 62svh; background-position: 50% 50%; }
  .schedule-copy { padding: 5rem 1.25rem 6rem; }
  .attendance { min-height: auto; grid-template-columns: 1fr; gap: 4rem; padding-top: 7rem; padding-bottom: 7rem; }
  .attendance-heading h2 { font-size: clamp(4rem, 20vw, 6.5rem); }
  .attendance-card { grid-template-columns: 32px 1fr; }
  footer { grid-template-columns: 1fr; min-height: 390px; }
  .footer-links { flex-direction: column; gap: 1rem; }
  .copyright { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}