*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--umber:#1A1512;--parchment:#F0E6D2;--gold:#C9A96E;--amber:#8B6914;
--stone:#6B6560;--porcelain:#EDE4D8;--ink:#0D0B09;--terracotta:#B07D62;
}
body{background:var(--umber);color:var(--parchment);font-family:'Karla',sans-serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.25rem);line-height:2.1;letter-spacing:0.02em;overflow-x:hidden}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;opacity:0.04;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.kintsugi-vein{position:fixed;top:0;left:50%;width:2px;height:100vh;z-index:10;pointer-events:none}
.vein-path{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 4s ease-out}
.vein-path.drawn{stroke-dashoffset:0}

.ma-space{height:40vh}
.ma-space.long{height:60vh}
.ma-space-sm{height:20vh}

/* Chamber 1 */
.chamber-1{min-height:100vh;display:grid;grid-template-columns:61.8% 38.2%;position:relative}
.split-left{background:var(--umber)}
.split-right{background:var(--parchment);position:relative}
.ghost-annotation{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-family:'Shippori Mincho',serif;font-size:clamp(0.85rem,1.2vw,1.1rem);color:var(--umber);opacity:0.15}
.domain-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.8rem,8vw,9rem);letter-spacing:0.06em;line-height:1.1;z-index:5;white-space:nowrap}
.domain-title .dot{color:var(--gold)}
.subtitle{position:absolute;top:calc(50% + clamp(3rem,5vw,6rem));left:42%;font-family:'Karla',sans-serif;color:var(--stone);font-size:clamp(0.9rem,1.2vw,1.1rem);z-index:5}

/* Chamber 2 */
.chamber-2{padding:clamp(3rem,8vw,10rem);display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.counter-block{background:var(--porcelain);color:var(--umber);padding:clamp(2rem,3vw,3rem);max-width:340px;border-radius:2px;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),box-shadow 0.4s}
.block-1{transform:rotate(-0.3deg)}
.block-2{transform:rotate(0.5deg);margin-top:12px}
.block-3{transform:rotate(-0.2deg);margin-top:-8px}
.counter-block:hover{transform:scale(1.02);box-shadow:0 8px 32px rgba(26,21,18,0.15)}

/* Chamber 3 */
.chamber-3{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;flex-direction:column}
.cup-viewport{width:50vmin;height:50vmin;border-radius:50%;overflow:hidden;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;background:var(--umber);mask-image:radial-gradient(circle,black 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle,black 30%,transparent 70%)}
.spiral-text{width:100%;height:100%;animation:spin 120s linear infinite}
.steam-particles{position:absolute;inset:0;pointer-events:none}
.steam{position:absolute;bottom:45%;width:4px;height:4px;border-radius:50%;background:var(--parchment);opacity:0.2;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0.2}25%{transform:translateY(-10vh) translateX(5px);opacity:0.15}50%{transform:translateY(-20vh) translateX(-3px);opacity:0.1}100%{transform:translateY(-40vh) translateX(2px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Chamber 4 */
.chamber-4{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center}
.crack-mosaic{position:absolute;inset:0}
.shard{position:absolute;inset:0}
.crack-text{position:relative;z-index:5;text-align:center;font-family:'Karla',sans-serif;font-weight:700;color:var(--gold);font-size:clamp(0.85rem,1.2vw,1.1rem);line-height:2.5;letter-spacing:0.04em}
.watermark-left,.watermark-right{position:absolute;font-family:'Shippori Mincho',serif;font-size:clamp(4rem,12vw,15rem);opacity:0.06;top:50%;transform:translateY(-50%);z-index:1}
.watermark-left{left:5%}
.watermark-right{right:5%}

/* Chamber 5 */
.chamber-5{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--parchment)}
.settling-text{font-family:'Karla',sans-serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--stone);text-align:center}
.final-glyph{font-family:'Shippori Mincho',serif;font-size:1.5rem;opacity:0.1;color:var(--umber)}

/* Coffee ring watermarks */
.chamber-1::after,.chamber-3::after{content:'';position:absolute;border-radius:47% 53% 44% 56% / 52% 48% 55% 45%;background:radial-gradient(ellipse,var(--terracotta),transparent);opacity:0.05;pointer-events:none}
.chamber-1::after{width:180px;height:180px;right:15%;bottom:20%}
.chamber-3::after{width:140px;height:140px;left:10%;top:15%}

.card{opacity:0;transform:translateY(20px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
.card.visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
@media(max-width:768px){.chamber-1{grid-template-columns:1fr}.split-right{display:none}.subtitle{left:8%}.domain-title{color:var(--parchment)}}