:root{
  --bg: #050507; --bg-2: #0a0a0c; --bg-3: #111114; --text: #F8F8F8; --muted: #888888; --accent: #FFFFFF; --primary: #E7E7E7; --secondary: #333333; --line: rgba(255,255,255,0.06); --glass: rgba(5, 5, 7, 0.8); --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
body.theme-gold { --bg: #0C0B0A; --bg-2: #161412; --bg-3: #221F1C; --text: #F2EADA; --muted: #A69B85; --accent: #D4AF37; --primary: #D4AF37; --secondary: #4A3F2C; --glass: rgba(12, 11, 10, 0.8); }
body.theme-emerald { --bg: #060F0E; --bg-2: #0D1A18; --bg-3: #152623; --text: #E0F2F1; --muted: #80CBC4; --accent: #50C878; --primary: #50C878; --secondary: #1B332F; --glass: rgba(6, 15, 14, 0.8); }
body.theme-ruby { --bg: #120505; --bg-2: #1D0D0D; --bg-3: #291515; --text: #FCE4E4; --muted: #E57373; --accent: #E0115F; --primary: #E0115F; --secondary: #3D1212; --glass: rgba(18, 5, 5, 0.8); }
body.theme-sapphire { --bg: #050A12; --bg-2: #0D1524; --bg-3: #151F33; --text: #E3F2FD; --muted: #90CAF9; --accent: #0F52BA; --primary: #0F52BA; --secondary: #12213D; --glass: rgba(5, 10, 18, 0.8); }
body.theme-amethyst { --bg: #0B0512; --bg-2: #160D24; --bg-3: #221533; --text: #F3E5F5; --muted: #B39DDB; --accent: #9966CC; --primary: #9966CC; --secondary: #21123D; --glass: rgba(11, 5, 18, 0.8); }
body.theme-sunset { --bg: #120A05; --bg-2: #24140D; --bg-3: #331F15; --text: #FFF3E0; --muted: #FFB74D; --accent: #FF8C00; --primary: #FF8C00; --secondary: #3D2112; --glass: rgba(18, 10, 5, 0.8); }
body.theme-ocean { --bg: #051212; --bg-2: #0D2424; --bg-3: #153333; --text: #E0F7FA; --muted: #4DD0E1; --accent: #008080; --primary: #008080; --secondary: #123D3D; --glass: rgba(5, 18, 18, 0.8); }
body.theme-coffee { --bg: #120D05; --bg-2: #1D150D; --bg-3: #291F15; --text: #EFEBE9; --muted: #A1887F; --accent: #6F4E37; --primary: #6F4E37; --secondary: #3D2B12; --glass: rgba(18, 13, 5, 0.8); }
body.theme-arctic { --bg: #F5F5F7; --bg-2: #FFFFFF; --bg-3: #EBEBEF; --text: #1D1D1F; --muted: #86868B; --accent: #0071E3; --primary: #1D1D1F; --secondary: #D2D2D7; --line: rgba(0,0,0,0.08); --glass: rgba(245, 245, 247, 0.8); }

*{margin:0;padding:0;box-sizing:border-box;}
body.hide-cursor * { cursor: none !important; }
html{scroll-behavior:smooth; height: 100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .6s var(--ease),color .6s var(--ease);overflow-x: hidden;min-height: 100dvh;}

/* ARTISTRY */
#scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: var(--accent); z-index: 2000; transition: width 0.1s linear; }
.noise { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.05; pointer-events: none; z-index: 9999; }
.blob-cont { position: fixed; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; filter: blur(120px); opacity: 0.4; }
.blob { position: absolute; width: 500px; height: 500px; background: var(--accent); border-radius: 50%; animation: move 20s infinite alternate; opacity: 0.15; }
.blob:nth-child(2) { background: var(--secondary); width: 600px; height: 600px; animation-duration: 25s; animation-delay: -5s; }
@keyframes move { 0% { transform: translate(-10%, -10%) scale(1); } 100% { transform: translate(110%, 110%) scale(1.5); } }

/* CURSOR */
.cursor-dot { width: 6px; height: 6px; background-color: var(--accent); position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 10001; transition: transform 0.05s linear; display: block !important; }
.cursor-outline { width: 34px; height: 34px; border: 1px solid var(--accent); position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.2s var(--ease), border-color 0.3s var(--ease); display: block !important; }
.cursor-hover .cursor-outline { transform: scale(1.8); background-color: var(--accent); mix-blend-mode: difference; border: none; }

/* PRELOADER */
.preloader { position: fixed; inset: 0; background: var(--bg); z-index: 2000; display: grid; place-items: center; transition: opacity 1s var(--ease), visibility 1s; }
.pre-type { display: block; font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.pre-sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }

/* NAV */
.nav{position:sticky;top:0;backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); background:var(--glass);border-bottom:1px solid var(--line);z-index:1000}
.nav-inner{max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 40px;}
.nav-left { font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: var(--muted); }
.nav-right{display:flex;gap:30px;align-items:center}
.nav-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; letter-spacing: 0.05em; transition: 0.3s var(--ease); font-family: 'Inter'; font-weight: 500; outline: none;}
.nav-btn:hover, .nav-btn.active { color: var(--text); }
.nav-btn.active { font-weight: 700; transform: translateY(-2px); }

/* THEME SELECTOR */
.theme-selector { display: flex; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 100px; border: 1px solid var(--line); overflow-x: auto; max-width: 200px; scrollbar-width: none; }
.theme-selector::-webkit-scrollbar { display: none; }
.theme-dot { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; cursor: pointer !important; transition: 0.3s var(--ease); border: 1px solid rgba(255,255,255,0.1); }
.theme-dot.active { transform: scale(1.1); box-shadow: 0 0 12px var(--accent); border-color: var(--accent); }
.dot-midnight { background: #080808; } .dot-gold { background: #D4AF37; } .dot-emerald { background: #50C878; } .dot-ruby { background: #E0115F; } .dot-sapphire { background: #0F52BA; } .dot-amethyst { background: #9966CC; } .dot-sunset { background: #FF8C00; } .dot-ocean { background: #008080; } .dot-coffee { background: #6F4E37; } .dot-arctic { background: #FFFFFF; }

/* LAYOUT */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section { padding: 160px 0; position: relative; }
.section-head { margin-bottom: 80px; display: flex; align-items: flex-start; gap: 20px; }
.section-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--muted); font-size: 18px; margin-top: 5px; }
.section-head h2 { font-family: 'Fraunces', serif; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; }

/* HERO */
.hero { min-height: 100dvh; display: flex; align-items: center; padding-top: 120px; }
.hero-content { flex: 1; z-index: 10; }
.hero-title { font-family: 'Fraunces', serif; font-size: clamp(60px, 10vw, 130px); line-height: 0.9; letter-spacing: -0.05em; margin-bottom: 40px; }
.hero-title .line { display: block; }
.hero-title .em { font-style: italic; color: var(--accent); }
.hero-meta { max-width: 500px; }
.hero-meta p { font-size: 20px; color: var(--muted); margin-bottom: 40px; line-height: 1.4; }
.hero-cta { display: flex; gap: 24px; align-items: center; }

.btn-primary { background: var(--text); color: var(--bg); padding: 20px 40px; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 18px; border: 1px solid var(--text); transition: 0.4s var(--ease); cursor: pointer; display: inline-block;}
.btn-primary:hover { background: transparent; color: var(--text); transform: translateY(-5px); }
.btn-ghost { color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 5px; transition: 0.3s; background: none; border-top:none; border-left:none; border-right:none;}
.btn-ghost:hover { border-color: var(--text); }

/* MANIFESTO */
.manifesto-grid { display: grid; grid-template-columns: 80px 1fr; gap: 40px; }
.manifesto-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 24px; color: var(--muted); }
.manifesto-text h2 { font-family: 'Fraunces', serif; font-size: 40px; margin-bottom: 32px; }
.manifesto-text .lead { font-size: 24px; line-height: 1.3; margin-bottom: 32px; color: var(--text); font-weight: 500; }
.manifesto-text p { font-size: 18px; color: var(--muted); margin-bottom: 24px; max-width: 800px; }
.sign { font-family: 'Fraunces', serif; font-style: italic; font-size: 24px; color: var(--accent); margin-top: 40px !important; }

/* WORKS */
.work { margin-bottom: 200px; }
.work-hero { width: 100%; aspect-ratio: 16/9; background: var(--bg-3); border-radius: 32px; overflow: hidden; margin-bottom: 60px; position: relative; }
.work-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 1s var(--ease); }
.work:hover .work-hero img { filter: grayscale(0%); transform: scale(1.03); }
.work-meta { position: absolute; bottom: 40px; left: 40px; display: flex; gap: 20px; z-index: 10; }
.work-meta span { background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 100px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.work-content h3 { font-family: 'Fraunces', serif; font-size: 48px; margin-bottom: 20px; }
.work-desc { font-size: 20px; color: var(--muted); max-width: 700px; margin-bottom: 40px; }
.work-link { color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; border-bottom: 2px solid var(--accent); padding-bottom: 4px; transition: 0.3s var(--ease); display: inline-block; }
.work-link:hover { padding-right: 20px; border-color: var(--text); }
.work-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; margin-bottom: 40px; }
.work-details img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; background: var(--bg-3); }

/* PROCESS & JOURNAL */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.process-step span { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; color: var(--muted); display: block; margin-bottom: 24px; }
.process-step h3 { font-family: 'Fraunces', serif; font-size: 32px; margin-bottom: 16px; }
.process-step p { font-size: 18px; color: var(--muted); margin-bottom: 32px; }

/* COMMISSION */
.commission-inner { background: var(--bg-2); padding: 100px 80px; border-radius: 48px; border: 1px solid var(--line); position: relative; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5); }
.commission-lead { font-size: 24px; margin-bottom: 60px; color: var(--muted); }
.commission-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 100px; }
.way { display: flex; gap: 20px; background: transparent; border: 1px solid var(--line); padding: 24px; border-radius: 20px; text-align: left; text-decoration: none; color: inherit; margin-bottom: 20px; transition: 0.3s; cursor: pointer; width: 100%; align-items: center;}
.way:hover { background: var(--bg-3); border-color: var(--accent); }
.way span { font-family: 'Fraunces', serif; font-style: italic; color: var(--muted); font-size: 20px; }
.way strong { display: block; font-size: 18px; margin-bottom: 4px; }
.way p { font-size: 14px; color: var(--muted); }

.commission-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
input, select, textarea { background: var(--bg-3); border: 1px solid var(--line); padding: 20px; border-radius: 16px; color: var(--text); font-family: inherit; font-size: 16px; outline: none; transition: 0.3s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.commission-form button { background: var(--accent); color: var(--bg); padding: 20px; border-radius: 16px; font-weight: 600; font-size: 18px; cursor: pointer; border: none; transition: 0.4s var(--ease); }
.commission-form button:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

/* FOOTER */
.footer { padding: 80px 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-grid p { color: var(--muted); line-height: 1.6; }
.footer-grid a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: 0.3s; }
.footer-grid a:hover { border-color: var(--text); }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(40px); transition: 1s var(--ease); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* PLACEHOLDERS */
.ph, .empty { background: var(--bg-3); position: relative; overflow: hidden; display: grid; place-items: center; min-height: 200px; border-radius: 24px; }
.ph::after, .empty::after { content: "COMMISSION_IN_PROGRESS"; font-size: 10px; letter-spacing: 0.3em; opacity: 0.2; font-weight: 600; }

/* MOBILE */
@media (max-width: 900px) {
  .nav-inner { padding: 0 20px; height: 70px; }
  .nav-left { display: none; }
  .theme-selector { max-width: 140px; }
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .hero { padding-top: 80px; }
  .hero-title { font-size: 54px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 20px; }
  .work-hero { aspect-ratio: 4/3; }
  .work-content h3 { font-size: 32px; }
  .work-details { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .commission-inner { padding: 40px 24px; border-radius: 32px; }
  .commission-grid { grid-template-columns: 1fr; gap: 60px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .cursor-dot, .cursor-outline { display: none !important; }
  body::before { background-size: 50px 50px; }
  .nav-btn { font-size: 12px; }
}
@media (max-width: 400px) {
  .hero-title { font-size: 42px; }
  .theme-selector { max-width: 100px; }
}