*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#D4DDE6;color:#0D0D0D;font-family:'DM Sans',sans-serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.7;overflow-x:hidden;min-height:100vh;position:relative}

.sky-bg{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#E8E0F0 0%,#D4DDE6 40%,#F0DDD4 100%);background-size:400% 400%;animation:skyCycle 120s ease-in-out infinite}
@keyframes skyCycle{0%{background-position:50% 0%}50%{background-position:50% 100%}100%{background-position:50% 0%}}

/* HUD Frame */
.hud-frame{position:fixed;inset:0;z-index:30;pointer-events:none}
.hud-bar{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(12px,2vw,24px);background:rgba(220,228,240,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.06em;color:#3A3F4B}
.hud-top{top:0;height:32px}
.hud-bottom{bottom:0;height:28px}
.hud-status{color:#7BA38C}
.hud-credit{font-size:0.65rem;color:#3A3F4B}

/* Content Layer */
.content-layer{position:relative;z-index:20;max-width:900px;margin:0 auto;padding:clamp(60px,8vh,100px) clamp(16px,4vw,48px)}

/* Panels */
.panel{background:rgba(255,252,248,0.72);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border:3px solid #0D0D0D;box-shadow:6px 6px 0px #0D0D0D;padding:clamp(20px,3vw,36px);margin-bottom:clamp(24px,4vw,40px)}
.panel-hero{transform:translate(2%,-1%)}
.panel-about{transform:translate(-1%,0)}
.panel-observations{transform:translate(3%,0)}
.panel-seasons{transform:translate(-2%,1%)}
.panel-manifesto{transform:translate(1%,0)}

.panel-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.4rem,6vw,5.5rem);letter-spacing:0.02em;text-transform:uppercase;color:#0D0D0D;margin-bottom:0.5em}
.panel-heading{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(1.4rem,3.5vw,2.8rem);letter-spacing:0.02em;text-transform:uppercase;color:#0D0D0D;margin-bottom:0.5em}
.panel-body{max-width:38ch;margin-bottom:0.8em;color:#0D0D0D}

/* Observations */
.observation{margin-bottom:1.5em;padding-left:2rem;position:relative}
.obs-num{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:#7BA38C;position:absolute;left:0;top:0.15em}

/* Garden Ticker */
.garden-ticker{position:fixed;bottom:40px;left:0;right:0;z-index:25;overflow:hidden;pointer-events:none}
.ticker-text{display:inline-block;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;color:#3A3F4B;opacity:0.6;animation:tickerScroll 60s linear infinite}
@keyframes tickerScroll{0%{transform:translateX(100vw)}100%{transform:translateX(-200%)}}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.4s ease-out,transform 0.4s steps(3)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .panel-hero,.panel-about,.panel-observations,.panel-seasons,.panel-manifesto{transform:none}
  .hud-bar{padding:0 8px}
}