:root {
    /* Design token trace: IBM Plex Mono" (Google Fonts Interaction Pattern: Pattern:** The primary interaction pattern is scale-on-hover. Gauge elements Interactive elements styled as physical toggle switches — a rectangular track with `border-radius: 4px` Internal element spacing follows an 8px base grid (8 IntersectionObserver with `threshold: 0.3` Source Sans 3" (Google Fonts */
    --gauge-teal: #1a4a4a;
    --observatory-green: #2d6b5a;
    --patina-sage: #6aaa8e;
    --brass-highlight: #c9a84c;
    --copper-blush: #d4926a;
    --gauge-face: #f0ece4;
    --etched-line: #b8b0a0;
    --instrument-shadow: #2a2a28;
    --aged-paper: #d8d2c8;
    --font-display: "Exo 2", sans-serif;
    --font-secondary: "Nunito Sans", sans-serif;
    --font-body: "Source Sans 3", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--instrument-shadow);
    color: var(--instrument-shadow);
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.7;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(184, 176, 160, 0.055) 8px 9px);
    mix-blend-mode: screen;
}

.design-token { display: none; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.15);
}

h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); max-width: 920px; }
h3 { font-size: clamp(1rem, 2vw, 1.5rem); }
p { font-size: clamp(0.95rem, 1.8vw, 1.15rem); }

.hero-observatory {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 6vh 1.5rem 10vh;
    overflow: hidden;
    background: linear-gradient(160deg, #1a4a4a, #2a2a28);
}

.hero-observatory::before,
.diagonal-band::before,
.instrument-shelf::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(184, 176, 160, 0.3) 10px 10.5px);
    opacity: 0.22;
}

.hero-brass-rail {
    position: absolute;
    width: min(94vw, 1180px);
    height: min(94vw, 720px);
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 999px;
    box-shadow: inset 0 0 70px rgba(201,168,76,0.08), 0 0 90px rgba(26,74,74,0.4);
    transform: rotate(-4deg);
}

.hero-gauge {
    position: relative;
    z-index: 2;
    width: min(60vw, 500px);
    min-width: 300px;
    aspect-ratio: 1;
    animation: gaugeEntrance 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.gauge-bezel,
.small-gauge,
.card-dial {
    border: 3px solid #b8b0a0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #f0ece4 0 8%, #c9a84c 9%, #6f613d 12%, #2a2a28 18%, #1a4a4a 67%, #2a2a28 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.3), 0 22px 60px rgba(0,0,0,0.38);
    padding: clamp(0.8rem, 2vw, 1.35rem);
}

.gauge-face,
.small-gauge {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f0ece4, #d8d2c8 58%, #b8b0a0 100%);
    box-shadow: inset 0 9px 22px rgba(255,255,255,0.45), inset 0 -12px 24px rgba(42,42,40,0.2);
}

.gauge-face::after,
.small-gauge::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.52), transparent 38%, rgba(26,74,74,0.12) 70%, transparent);
    pointer-events: none;
}

.ticks,
.fine-ticks {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: repeating-conic-gradient(from -2deg, #b8b0a0 0deg 1.1deg, transparent 1.1deg 9deg);
    mask: radial-gradient(circle, transparent 0 72%, #000 73% 77%, transparent 78%);
}

.fine-ticks { inset: 8%; opacity: 0.55; background: repeating-conic-gradient(#b8b0a0 0deg 0.6deg, transparent 0.6deg 6deg); }

.dial-arc {
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    background: conic-gradient(from 220deg, transparent 0 22deg, #6aaa8e 22deg 88deg, #c9a84c 88deg 130deg, #d4926a 130deg 160deg, transparent 160deg 360deg);
    mask: radial-gradient(circle, transparent 0 83%, #000 84% 91%, transparent 92%);
    opacity: 0.78;
}

.needle {
    position: absolute;
    left: calc(50% - 4px);
    bottom: 50%;
    z-index: 4;
    width: 8px;
    height: 36%;
    border-radius: 50% 50% 2px 2px;
    background: linear-gradient(90deg, #6f4e18, #c9a84c 45%, #f0d77c 50%, #8a671f);
    clip-path: polygon(50% 0, 100% 88%, 58% 100%, 42% 100%, 0 88%);
    transform: rotate(-132deg);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 4px 3px rgba(42,42,40,0.35));
}

.pivot {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 7%;
    aspect-ratio: 1;
    border: 2px solid #2a2a28;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f0ece4, #c9a84c 45%, #2a2a28 100%);
    transform: translate(-50%, -50%);
}

.engraved-mark {
    position: absolute;
    left: 50%;
    top: 54%;
    z-index: 6;
    width: 80%;
    transform: translate(-50%, -50%);
    color: #2a2a28;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(42,42,40,0.24);
}

.readout-panel {
    position: absolute;
    left: 50%;
    bottom: 22%;
    z-index: 6;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(42,42,40,0.28);
    border-radius: 3px;
    background: rgba(240,236,228,0.58);
    color: #2a2a28;
    font-family: var(--font-mono);
    font-size: clamp(0.56rem, 1.15vw, 0.82rem);
    letter-spacing: 0.08em;
    transform: translateX(-50%);
    white-space: nowrap;
}

.indicator-light {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f0ece4, #6aaa8e 42%, #2d6b5a 100%);
    box-shadow: 0 0 6px #6aaa8e;
}

.hero-copy {
    position: absolute;
    left: 50%;
    bottom: 7vh;
    z-index: 3;
    width: min(680px, calc(100vw - 2rem));
    color: #f0ece4;
    font-family: var(--font-secondary);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 12px);
    animation: copyFade 900ms ease-out 1s forwards;
}

.diagonal-band {
    position: relative;
    margin-top: -4vh;
    padding: clamp(4rem, 8vh, 8rem) 1.25rem;
    clip-path: polygon(0 0, 100% 4vh, 100% 100%, 0 calc(100% - 4vh));
}

.band-dark { background: #1a4a4a; color: #f0ece4; }
.band-light { background: #f0ece4; color: #2a2a28; }
.band-green { background: linear-gradient(145deg, #2d6b5a, #1a4a4a); color: #f0ece4; }

.band-content,
.shelf-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

.section-heading { grid-column: 2 / span 9; display: grid; gap: 1rem; }
.section-heading.centered { grid-column: 1 / -1; justify-items: center; text-align: center; }
.mono-tag { color: #c9a84c; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; }
.band-light .mono-tag { color: #2d6b5a; }

.instrument-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.instrument-card,
.chart-shell,
.network-shell {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(184,176,160,0.65);
    background: rgba(240,236,228,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.instrument-card { min-height: 300px; padding: 2rem; }
.instrument-card h3 { margin: 1.25rem 0 0.9rem; color: #c9a84c; }
.instrument-card p { color: rgba(240,236,228,0.84); }

.instrument-card::after,
.chart-shell::after,
.network-shell::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 92px;
    height: 92px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M48 8C62 31 61 52 44 76M47 36C30 28 18 31 8 48M51 52C70 45 84 51 92 68M45 72C31 75 23 83 17 96" fill="none" stroke="%23d4926a" stroke-width="2" opacity="0.7"/><path d="M8 48C30 42 35 34 47 36C34 53 22 56 8 48ZM92 68C72 69 63 62 51 52C72 47 84 52 92 68Z" fill="%23d4926a" opacity="0.32"/></svg>');
    opacity: 0.62;
}

.card-dial { width: 92px; height: 92px; padding: 0; background: radial-gradient(circle at 40% 35%, #f0ece4, #d8d2c8); }
.card-dial span { position: absolute; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 35px; background: #c9a84c; transform-origin: bottom center; transform: rotate(var(--angle, 0deg)); }
.card-dial::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: #2a2a28; }

.chart-shell { grid-column: 1 / -1; padding: clamp(1rem, 3vw, 2rem); border-color: #b8b0a0; background: linear-gradient(135deg, #f0ece4, #d8d2c8); }
.dark-shell { background: linear-gradient(135deg, rgba(42,42,40,0.22), rgba(240,236,228,0.05)); }
.botanical-chart { display: block; width: 100%; height: auto; }

.vine-line { fill: none; stroke: #6aaa8e; stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--path-length, 1200); stroke-dashoffset: var(--path-length, 1200); filter: drop-shadow(0 2px 0 rgba(42,42,40,0.16)); }
.leaf { fill: #d4926a; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2) rotate(-8deg); }
.axis-label { fill: #2a2a28; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; }
.rotate-label { transform: rotate(-90deg); transform-origin: 36px 76px; }

.split-band { align-items: center; }
.split-band .section-heading { grid-column: 1 / span 5; }
.network-shell { grid-column: 7 / span 6; padding: 1.5rem; border-radius: 50% 3px 50% 3px; background: rgba(240,236,228,0.08); }
.root-line { fill: none; stroke: #b8b0a0; stroke-width: 2.2; opacity: 0.78; stroke-linecap: round; stroke-dasharray: var(--path-length, 700); stroke-dashoffset: var(--path-length, 700); }
.pod-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pod-node ellipse, .pod-node circle { fill: #6aaa8e; stroke: #f0ece4; stroke-width: 2; }
.pod-node path { fill: none; stroke: #d4926a; stroke-width: 2; }
.pod-node.central circle { fill: #c9a84c; }

.stem-set text { fill: #f0ece4; font-family: var(--font-secondary); font-size: 14px; text-anchor: middle; }
.stem-set .value { fill: #c9a84c; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; }
.stem { fill: #2d6b5a; transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.bud { fill: #d4926a; opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; }

.in-view .vine-line,
.in-view .root-line { animation: drawPath 2s ease-out forwards; }
.in-view .leaf { animation: leafPop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.in-view .leaf:nth-child(1) { animation-delay: 2s; }
.in-view .leaf:nth-child(2) { animation-delay: 2.1s; }
.in-view .leaf:nth-child(3) { animation-delay: 2.2s; }
.in-view .leaf:nth-child(4) { animation-delay: 2.3s; }
.in-view .leaf:nth-child(5) { animation-delay: 2.4s; }
.in-view .pod-node { animation: podAppear 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.in-view .pod-node:nth-of-type(2) { animation-delay: 0.45s; }
.in-view .pod-node:nth-of-type(3) { animation-delay: 0.6s; }
.in-view .pod-node:nth-of-type(4) { animation-delay: 0.75s; }
.in-view .pod-node:nth-of-type(5) { animation-delay: 0.9s; }
.in-view .pod-node:nth-of-type(6) { animation-delay: 1.05s; }
.in-view .stem { animation: growStem 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay) forwards; }
.in-view .bud { animation: budPop 430ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--delay) + 900ms) forwards; }

.instrument-shelf {
    position: relative;
    margin-top: -4vh;
    padding: clamp(5rem, 9vh, 9rem) 1.25rem 6rem;
    background: #f0ece4;
    color: #2a2a28;
}

.gauge-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.25rem);
    justify-content: space-around;
    width: 100%;
}

.metric-gauge { width: 120px; text-align: center; cursor: pointer; }
.metric-gauge .small-gauge { width: 120px; height: 120px; margin: 0 auto; }
.metric-gauge strong {
    position: absolute;
    left: 50%;
    bottom: 25%;
    z-index: 6;
    color: #2a2a28;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    transform: translateX(-50%);
}
.metric-gauge h3 { margin-top: 0.85rem; color: #1a4a4a; font-family: var(--font-secondary); font-size: 0.92rem; letter-spacing: 0.03em; line-height: 1.1; }
.metric-gauge p { opacity: 0; color: #2d6b5a; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; transform: translateY(8px); transition: 250ms ease; }
.metric-gauge:hover p { opacity: 1; transform: translateY(0); }
.metric-gauge .needle { height: 34%; width: 5px; left: calc(50% - 2.5px); }

.hover-rise { transition: transform 300ms ease-out, box-shadow 300ms ease-out, filter 300ms ease-out; }
.hover-rise:hover, .hover-rise.touch-active { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.metric-gauge.hover-rise:hover { transform: scale(1.15); }

.site-footer {
    padding: 3rem 1.5rem;
    border-top: 2px solid #b8b0a0;
    background: #2a2a28;
    color: #f0ece4;
    font-family: var(--font-secondary);
    text-align: center;
}

@keyframes gaugeEntrance { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes copyFade { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes leafPop { to { opacity: 0.92; transform: scale(1) rotate(0deg); } }
@keyframes podAppear { to { opacity: 1; transform: scale(1); } }
@keyframes growStem { to { transform: scaleY(1); } }
@keyframes budPop { to { opacity: 1; transform: scale(1); } }

@media (max-width: 900px) {
    .instrument-cards { grid-template-columns: 1fr; }
    .section-heading, .split-band .section-heading, .network-shell { grid-column: 1 / -1; }
    .hero-gauge { width: min(82vw, 440px); }
}

@media (max-width: 640px) {
    .diagonal-band { clip-path: polygon(0 0, 100% 2vh, 100% 100%, 0 calc(100% - 2vh)); padding-inline: 1rem; }
    .band-content, .shelf-inner { gap: 1.25rem; }
    .metric-gauge { width: 80px; }
    .metric-gauge .small-gauge { width: 80px; height: 80px; }
    .readout-panel { bottom: 18%; }
}