*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F0EDE5;color:#2B2B2B;font-family:'Lora',serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.7;letter-spacing:0.01em;display:flex;min-height:100vh;overflow-x:hidden}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;width:72px;height:100vh;background:#2B2B2B;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px 0;transition:width 600ms cubic-bezier(0.22,1,0.36,1);overflow:hidden}
.sidebar:hover{width:240px}
.totem{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;padding:20px 0}
.totem-line{position:absolute;left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.totem-node{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.node-dot{width:8px;height:8px;border-radius:50%;background:#B8860B;transition:background 0.4s ease,box-shadow 0.4s ease;flex-shrink:0}
.totem-node.active .node-dot{background:#2D5A3D;box-shadow:0 0 6px rgba(45,90,61,0.5)}
.sidebar-label{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#F0EDE5;opacity:0;transition:opacity 400ms ease;white-space:nowrap}
.sidebar:hover .sidebar-label{opacity:0.6}
.rail-meta{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:#F0EDE5;opacity:0.3;writing-mode:vertical-lr;transform:rotate(180deg)}

/* Main content */
.content{margin-left:72px;flex:1;position:relative;z-index:1}

/* Plateaus */
.plateau{min-height:100vh;position:relative;padding:4vw}

/* Plateau 1: The Base */
.plateau-1{display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.mountain-panorama{position:absolute;top:10%;right:0;width:70%;height:60%;opacity:0}
.mountain-panorama.drawn{opacity:1}
.peak,.shadow-1,.shadow-2{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 800ms ease-in-out}
.mountain-panorama.drawn .peak-1{stroke-dashoffset:0;transition-delay:0s}
.mountain-panorama.drawn .peak-2{stroke-dashoffset:0;transition-delay:0.8s}
.mountain-panorama.drawn .peak-3{stroke-dashoffset:0;transition-delay:1.6s}
.mountain-panorama.drawn .peak-4{stroke-dashoffset:0;transition-delay:2.4s}
.mountain-panorama.drawn .peak-5{stroke-dashoffset:0;transition-delay:3.2s}
.mountain-panorama.drawn .shadow-1{stroke-dashoffset:0;transition-delay:1.6s}
.mountain-panorama.drawn .shadow-2{stroke-dashoffset:0;transition-delay:2.8s}
.base-title{position:relative;z-index:2;margin-bottom:12vh}
.site-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(4rem,8vw,9rem);letter-spacing:0.04em;line-height:1.1;text-transform:uppercase;color:#2B2B2B}
.tagline{font-family:'Lora',serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.25rem);color:#4A4A52;opacity:0;transition:opacity 1.5s ease;margin-top:12px}
.tagline.visible{opacity:1}

/* Section dividers */
.section-divider{display:flex;justify-content:center;padding:10vh 0;min-height:20vh}
.section-divider svg{height:24px;width:auto;opacity:0;transition:opacity 0.6s ease}
.section-divider svg path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 600ms ease-in-out}
.section-divider.visible svg{opacity:1}
.section-divider.visible svg path{stroke-dashoffset:0}

/* Plateau 2: The Approach */
.plateau-2{min-height:120vh;display:flex;align-items:center}
.approach-grid{display:grid;grid-template-columns:40% 60%;gap:clamp(2rem,4vw,4rem);max-width:1100px;width:100%}
.manifesto{max-width:480px}
.drop-cap::first-letter{font-family:'Playfair Display',serif;font-weight:900;font-size:4rem;float:left;margin-right:8px;line-height:0.8;color:#2D5A3D}
.manifesto p{margin-bottom:1.5rem}
.cards-column{display:flex;flex-direction:column;gap:4vh}

/* Card flip */
.card-flip{width:320px;height:440px;perspective:1200px;cursor:pointer}
.card-inner{position:relative;width:100%;height:100%;transition:transform 900ms cubic-bezier(0.68,-0.55,0.265,1.55),box-shadow 400ms ease;transform-style:preserve-3d;box-shadow:8px 8px 0 #2B2B2B}
.card-flip:hover .card-inner,.card-flip.flipped .card-inner{transform:rotateY(180deg);box-shadow:2px 2px 0 #2B2B2B}
.card-front,.card-back{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}
.card-front{background:#D9D4CC}
.card-back{background:#2D5A3D;transform:rotateY(180deg)}
.card-back p{font-family:'Lora',serif;font-weight:400;color:#F0EDE5;font-size:1rem;line-height:1.7;text-align:center}
.card-illus{width:120px;height:160px;margin-bottom:20px}
.card-label{font-family:'Playfair Display',serif;font-weight:900;font-size:1.2rem;letter-spacing:0.04em;text-transform:uppercase;color:#2B2B2B}

/* Plateau 3: The Ascent */
.plateau-3{display:flex;align-items:center;justify-content:center;overflow:hidden}
.ridge-panels{display:grid;grid-template-columns:repeat(5,200px);gap:0;justify-content:center}
.ridge-panel{height:80vh;overflow:hidden;will-change:transform}
.ridge-panel svg{width:100%;height:100%}

/* Plateau 4: The Summit */
.plateau-4{display:flex;align-items:center;justify-content:center;text-align:center}
.summit-text{max-width:900px;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(3rem,8vw,8rem);line-height:1.1;display:flex;flex-wrap:wrap;justify-content:center;gap:0.3em}
.summit-word{opacity:0;filter:blur(8px);transition:opacity 500ms ease,filter 500ms ease}
.summit-word.visible{opacity:1;filter:blur(0)}
.summit-word.last{color:#B8860B}

/* Plateau 5: The Descent */
.plateau-5{min-height:60vh;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.descent-content{width:100%;height:100%;position:relative;padding:4vw;display:flex;align-items:flex-end;justify-content:flex-end;transition:background-color 800ms ease}
.plateau-5.expanded .descent-content{background:#2B2B2B}
.mountain-inverted{position:absolute;top:0;left:0;width:100%;height:200px}
.contact-block{position:relative;z-index:2;text-align:right}
.contact-text{font-family:'Lora',serif;font-weight:400;color:#F0EDE5;opacity:0;transition:opacity 0.8s ease}
.plateau-5.expanded .contact-text{opacity:1}
.meta-label{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#D9D4CC;opacity:0;transition:opacity 0.8s ease 0.3s;display:block;margin-top:8px}
.plateau-5.expanded .meta-label{opacity:0.6}

/* Reveal animation */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 700ms cubic-bezier(0.22,1,0.36,1),transform 700ms cubic-bezier(0.22,1,0.36,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Palette refs */
.ref-granite{color:#2B2B2B}
.ref-slate{color:#4A4A52}
.ref-pine{color:#2D5A3D}
.ref-ochre{color:#B8860B}
.ref-violet{color:#6B4C6E}
.ref-bone{color:#F0EDE5}
.ref-mist{color:#D9D4CC}
.ref-oxide{color:#8B4513}

@media(max-width:768px){
.sidebar{width:100%;height:auto;position:sticky;top:0;flex-direction:row;padding:8px 16px}
.sidebar:hover{width:100%}
.totem{flex-direction:row;padding:0}
.totem-line{display:none}
.sidebar-label{display:none}
.rail-meta{writing-mode:horizontal-tb;transform:none;font-size:0.6rem}
.content{margin-left:0}
.approach-grid{grid-template-columns:1fr}
.card-flip{width:100%;max-width:320px;margin:0 auto}
.ridge-panels{grid-template-columns:1fr;overflow-x:auto;scroll-snap-type:x mandatory;grid-auto-flow:column}
.ridge-panel{scroll-snap-align:center;min-width:80vw;height:60vh}
}