/* reasoner.studio */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #fdf6e3; color: #2d2017; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.7; }
.welcome { padding: 5rem 2rem 3rem; text-align: center; }
.welcome-inner { max-width: 500px; margin: 0 auto; }
.tapered-shape { width: 60px; height: 120px; background: #5c3d2e; clip-path: polygon(5% 0, 95% 0, 90% 100%, 10% 100%); margin: 0 auto 2rem; }
.brand { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.3rem; }
.studio-label { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.7rem; color: #5c3d2e; letter-spacing: 0.2em; display: block; margin-bottom: 0.75rem; }
.subtitle { font-size: 0.9rem; color: #5c3d2e; margin-bottom: 1.5rem; }
.hairline { border-top: 0.5px solid #c9b89a; }
.methods { padding: 3rem 2rem; }
.methods-inner { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.method-panel { background: #faf0d7; border: 1px solid #5c3d2e; padding: 2rem; position: relative; }
.step-number { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 3rem; color: #c9b89a; display: block; line-height: 1; margin-bottom: 0.5rem; }
.method-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.2rem; margin-bottom: 0.5rem; }
.method-body { font-size: 0.85rem; color: #5c3d2e; }
.workshop { padding: 3rem 2rem; }
.workshop-inner { max-width: 500px; margin: 0 auto; }
.color-blocks { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
.block { width: 100px; height: 60px; }
.block.mustard { background: #d4a017; }
.block.teal { background: #2a9d8f; }
.block.rust { background: #c45a3c; }
.workshop-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.3rem; margin-bottom: 0.75rem; }
.workshop-text { font-size: 0.85rem; color: #5c3d2e; }
.close { text-align: center; padding: 3rem 2rem 5rem; }
.starburst { width: 24px; height: 24px; background: #d4a017; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); margin: 0 auto 1rem; }
.close-text { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.1rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }