*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Libre Franklin',sans-serif;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.72;font-weight:300;color:#2C2416;background:#F5F0E8;overflow-x:hidden}

h1,h2,h3{font-family:'DM Serif Display',serif;font-weight:400;color:#2C2416;line-height:1.1}
h1{font-size:clamp(2.8rem,6vw,7rem);letter-spacing:.02em}
h2{font-size:clamp(1.6rem,3vw,3.2rem);margin-bottom:1rem}
h3{font-size:clamp(1.2rem,2vw,1.8rem);margin-bottom:.5rem}

.kanji{font-size:1.5rem;color:#8B6914;margin-right:1rem}
.tagline{font-family:'IBM Plex Mono',monospace;font-size:.85rem;letter-spacing:.04em;color:#B8AFA0}

/* Grain texture */
.room{position:relative;min-height:100vh;padding:clamp(4rem,8vh,8rem) 2rem}
.room::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.03;background:repeating-linear-gradient(90deg,#8B6914 0px,transparent 1px,transparent 3px);background-size:4px 4px}

/* Pendant Light */
.pendant-light{position:absolute;top:0;left:50%;width:200px;height:200px;transform:translateX(-50%);background:radial-gradient(ellipse at center top,rgba(196,118,43,.06),transparent 70%);pointer-events:none}

/* Grain Line */
.grain-line{position:absolute;left:0;right:0;top:38.2%;height:1px;background:#8B6914;opacity:.3}

/* Room 1: Entrance */
.room-entrance{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-title{margin-bottom:1rem}
.hero-meta{display:flex;align-items:center;gap:1rem}

/* Room 2: Philosophy */
.room-philosophy{background:#1A1714;color:#D4C8A8}
.room-philosophy::before{opacity:.015}
.room-philosophy h2{color:#D4C8A8}
.room-content{max-width:900px;margin:0 auto;display:flex;gap:4rem;align-items:center}
.text-column{flex:1;max-width:58ch}
.body-large{font-size:1.3rem;line-height:1.8}

/* Ring Diagram */
.ring-diagram{position:relative;width:200px;height:200px;flex-shrink:0;animation:ringRotate 120s linear infinite}
@keyframes ringRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ring{position:absolute;border-radius:50%;border-style:solid;border-color:#B8AFA0;left:50%;top:50%;transform:translate(-50%,-50%)}
.ring-1{width:180px;height:180px;border-width:1px}
.ring-2{width:140px;height:140px;border-width:2px;border-color:#8B6914}
.ring-3{width:100px;height:100px;border-width:1px}
.ring-4{width:60px;height:60px;border-width:2px;border-color:#8B6914}
.ring-5{width:20px;height:20px;border-width:3px;border-color:#C4762B}
.ring-label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#D4C8A8;position:absolute;top:-1.2rem;left:50%;transform:translateX(-50%);white-space:nowrap}

/* Room 3: Collection */
.room-collection{background:#F5F0E8}
.showroom-floor{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;max-width:1100px;margin:0 auto}
.showroom-piece{padding:clamp(2rem,4vw,4rem)}
.showroom-piece:hover .furniture-svg line,.showroom-piece:hover .furniture-svg path,.showroom-piece:hover .furniture-svg rect,.showroom-piece:hover .furniture-svg ellipse,.showroom-piece:hover .furniture-svg circle{stroke:#8B6914;transition:stroke .4s ease-out}
.furniture-svg{width:120px;height:auto;margin-bottom:1.5rem}

/* Room 4: Process */
.room-process{background:#F5F0E8}
.room-process::before{background:repeating-linear-gradient(0deg,#8B6914 0px,transparent 1px,transparent 3px);background-size:3px 4px}
.process-list{max-width:640px;margin:0 auto}
.process-step{position:relative;padding:2rem 2rem 2rem 5rem;margin-bottom:1rem}
.step-number{font-family:'DM Serif Display',serif;font-size:4rem;color:rgba(196,118,43,.2);position:absolute;left:0;top:.5rem;line-height:1}
.process-step h3{color:#2C2416}
.process-step p{max-width:58ch}

/* Room 5: Workshop */
.room-workshop{background:#1A1714;color:#D4C8A8;display:flex;align-items:center;justify-content:center;text-align:center}
.workshop-content p{font-size:1rem;color:#B8AFA0;margin-top:.5rem}
.color-domain{font-family:'DM Serif Display',serif;font-size:clamp(2rem,5vw,5rem)}
.letter{display:inline-block;letter-spacing:.5em}
.tapered-rule{width:80px;height:2px;margin:2rem auto 0;background:#8B6914;clip-path:polygon(0 0,100% 50%,100% 50%,0 100%)}

/* Card reveal */
.card{opacity:0;transform:translateY(2rem);transition:opacity .6s cubic-bezier(.25,.1,.25,1),transform .6s cubic-bezier(.25,.1,.25,1)}
.card.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .room-content{flex-direction:column;gap:2rem}
  .ring-diagram{margin:0 auto}
  .showroom-floor{grid-template-columns:1fr}
  .showroom-piece{grid-column:1 !important}
}