/* NOIR/CLUB — high-fashion nightlife */
:root {
  --ink: #0A0A0A;
  --paper: #F4F2ED;
  --paper-2: #E8E5DC;
  --line: #1A1A1A;
  --mute: #6B6B66;
  --blue: #2F4BFF;
  --blue-hot: #4E64FF;
  --red: #FF2E2E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', 'Helvetica Neue', sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.dark {
  background: var(--ink);
  color: var(--paper);
}

/* typography system */
.display {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.04em;
  line-height: 0.82;
  font-variation-settings: "SOFT" 0, "opsz" 144, "WONK" 0;
}
.display-italic {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.85;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-tight {
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: -0.02em;
}
.kr-display {
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.kr-sans {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  letter-spacing: -0.02em;
}

.meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
body.dark .meta { color: #8A8A82; }

.rule {
  height: 1px;
  background: currentColor;
  opacity: 0.18;
}
.rule-thick { height: 2px; background: currentColor; }

/* utility */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 0 32px;
}

.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  text-decoration: none;
  border-radius: 0;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
body.dark .btn:hover {
  background: var(--paper);
  color: var(--ink);
}
.btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.btn.primary:hover {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}
.btn.blue {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}
.btn.blue:hover {
  background: var(--paper);
  color: var(--blue);
}

.arrow::after {
  content: "→";
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: 0;
}

/* marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
  white-space: nowrap;
}
.marquee-pause:hover .marquee { animation-play-state: paused; }

/* hover image placeholder */
.ph {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 100%),
    repeating-linear-gradient(45deg, #111 0 2px, #0a0a0a 2px 4px);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.ph.light {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.08)),
    repeating-linear-gradient(45deg, #D8D5CB 0 2px, #CFCCC1 2px 4px);
  color: #555;
}
.ph.light::after { color: rgba(0,0,0,0.5); }

/* focus ring */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* small helpers */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tag-blue {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}

/* tabular nums for numbers */
.tnum { font-variant-numeric: tabular-nums; }

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* noise */
.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal {
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--ink);
}

/* form controls */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.field input, .field select, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  color: inherit;
  border-radius: 0;
}
body.dark .field input, body.dark .field select, body.dark .field textarea {
  border-bottom-color: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
  border-bottom-width: 2px;
}

/* chips / segmented */
.chip {
  padding: 10px 16px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: all 140ms ease;
}
.chip:hover { background: rgba(0,0,0,0.06); }
body.dark .chip:hover { background: rgba(255,255,255,0.06); }
.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
body.dark .chip.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.chip.active.blue {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}

/* gallery hover scale */
.hov-zoom img, .hov-zoom .ph-inner {
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hov-zoom:hover img, .hov-zoom:hover .ph-inner {
  transform: scale(1.04);
}

/* scrollbar minimal */
::-webkit-scrollbar { width: 0; height: 0; }

/* selection */
::selection { background: var(--blue); color: var(--paper); }

/* scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: #2F4BFF;
  z-index: 200;
  width: 0%;
  transition: width 60ms linear;
}

/* section count-up strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.stat-cell {
  padding: 40px 32px;
  border-right: 1px solid currentColor;
  display: flex; flex-direction: column; gap: 8px;
}
.stat-cell:last-child { border-right: none; }

/* clip reveal — text wipes in from bottom */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1000ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.clip-reveal.in {
  clip-path: inset(0% 0 0 0);
}

/* slide from left / right */
.slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.slide-left.in, .slide-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* stagger items */
[data-stagger] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-stagger].in {
  opacity: 1;
  transform: translateY(0);
}

/* scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.scale-in.in {
  opacity: 1;
  transform: scale(1);
}

/* line grow */
.line-grow {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.line-grow.in {
  transform: scaleX(1);
}