/* mujun.studio - Colors: #0C0A08, #1A1610, #F0EBE0, #A0988E, #C0A880, #484038 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0C0A08; color: #A0988E; font-family: 'Hanken Grotesk', sans-serif; font-size: 0.95rem; line-height: 1.7; overflow-x: hidden; }

/* Grain Overlay */
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Captions */
.caption { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #C0A880; display: block; margin-bottom: 1rem; }

/* Section */
.section { position: relative; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.section.visible { opacity: 1; transform: translateY(0); }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 4rem 2rem; }
.hero-inner { max-width: 1280px; margin: 0 auto; width: 100%; position: relative; display: grid; grid-template-columns: repeat(16, 1fr); }
.hero-kanji { grid-column: 9 / 17; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(5rem, 12vw, 12rem); color: #F0EBE0; letter-spacing: -0.03em; line-height: 0.9; text-align: right; opacity: 0; animation: heroScale 2s ease forwards 0.5s; }
@keyframes heroScale { 0% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.hero-text { grid-column: 3 / 10; align-self: end; padding-bottom: 1rem; }
.hero-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.5rem); color: #F0EBE0; letter-spacing: -0.03em; margin-bottom: 0.75rem; }
.hero-sub { color: #A0988E; max-width: 400px; }

/* Annotations */
.annotation { position: absolute; display: flex; align-items: center; gap: 0.5rem; }
.anno-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #C0A880; }
.anno-label { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(192,168,128,0.4); }
.anno-1 { top: 2rem; right: 2rem; }
.anno-2 { bottom: 1rem; right: 2rem; }
.anno-3 { bottom: 0; right: 0; }

/* Oversized Statement */
.statement { padding: 2rem; }
.statement-inner { max-width: 1280px; margin: 0 auto; position: relative; padding: 3rem 0; }
.oversized { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(4rem, 12vw, 12rem); color: #F0EBE0; letter-spacing: -0.03em; line-height: 0.9; padding-left: 10%; mix-blend-mode: difference; }

/* Process */
.process { padding: 4rem 2rem; background: #1A1610; }
.process-inner { max-width: 1280px; margin: 0 auto; position: relative; display: grid; grid-template-columns: repeat(16, 1fr); }
.process-inner .caption { grid-column: 5 / 12; }
.section-heading { grid-column: 5 / 13; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.3rem, 2.5vw, 2rem); color: #F0EBE0; letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 1.5rem; }
.process-inner .body-text { grid-column: 5 / 12; margin-bottom: 1rem; }
.process-inner .anno-3 { grid-column: 14 / 17; align-self: end; position: relative; }

/* Work */
.work { padding: 4rem 2rem; }
.work-inner { max-width: 1280px; margin: 0 auto; position: relative; padding-left: 12%; }
.work-offset { padding-left: 30%; }
.work-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.6rem); color: #F0EBE0; letter-spacing: -0.02em; margin: 1.5rem 0 0.75rem; }
.work-inner .body-text { max-width: 450px; }

/* Compositions */
.composition { position: relative; height: 200px; margin-bottom: 0.5rem; }
.comp-rect { position: absolute; border-radius: 2px; }
.comp-1 .r1 { width: 60%; height: 100%; background: #484038; left: 0; top: 0; }
.comp-1 .r2 { width: 50%; height: 80%; background: #C0A880; right: 10%; top: 10%; mix-blend-mode: difference; }
.comp-1 .r3 { width: 30%; height: 40%; background: #F0EBE0; left: 25%; top: 30%; mix-blend-mode: multiply; opacity: 0.6; }
.comp-2 .r4 { width: 70%; height: 100%; background: #1A1610; left: 0; top: 0; box-shadow: 8px -8px 0 #C0A880; }
.comp-2 .r5 { width: 40%; height: 60%; background: #484038; right: 0; bottom: 0; box-shadow: -6px 6px 0 rgba(240,235,224,0.1); }

/* Closing */
.closing { padding: 4rem 2rem 6rem; }
.closing-inner { max-width: 1280px; margin: 0 auto; position: relative; display: grid; grid-template-columns: repeat(16, 1fr); }
.closing-inner .caption { grid-column: 5 / 12; }
.closing-inner .body-text { grid-column: 5 / 12; margin-bottom: 1rem; }
.closing-inner .anno-3 { grid-column: 14 / 17; align-self: end; position: relative; }

/* Responsive */
@media (max-width: 768px) {
    .hero-inner { display: block; }
    .hero-kanji { text-align: right; margin-bottom: 2rem; }
    .oversized { padding-left: 5%; font-size: clamp(3rem, 10vw, 5rem); }
    .process-inner, .closing-inner { display: block; }
    .work-inner, .work-offset { padding-left: 5%; }
    .annotation { display: none; }
}