/* Home's seasonal scene; the shared editor and other pages retain their styles. */
body[data-page=home]{
  --home-accent:#ff8a12;
  --home-paper:#f5e8d5;
  background-color:#050302;
  background-image:url('/autumn-home-scene.png');
  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
  background-attachment:scroll;
  color:var(--home-paper);
}
body[data-page=home]::before{opacity:.08}
body[data-page=home] .frame>.nav{background:#040201ed;border-color:#e3d2bca3;color:var(--home-paper)}
body[data-page=home] .nav .links a.active{color:var(--home-accent);border-color:var(--home-accent)}
#home{background:none;color:var(--home-paper)}
#home .home-stage{height:clamp(620px,46.9vw,1060px);min-height:0}
#home .chrome{display:none}
/* Pumpkin, ghost, and moss share one scene plane and follow document scrolling. */
#home .home-landscape{inset:0;width:100%;height:100%;transform:none;z-index:0}
#home .landscape-plane{aspect-ratio:auto}
#home .autumn-scene-art{object-fit:cover;object-position:center bottom}
#home .hero-copy{z-index:3}
#home .hero-copy h1{color:var(--home-paper);text-shadow:0 3px 8px #000b}
#home .hero-copy h1 .editable-copy{white-space:normal}
#home .intro{font-size:clamp(12px,1.35vw,26px);color:var(--home-paper)}
#home .intro .star,#home .coordinate-star,#home .note-star{color:var(--home-accent)}
#home .intro .star::after{background:var(--home-accent)}
#home .hero-cta .cta{color:var(--home-accent);border-color:var(--home-accent);background:#050302e8}
#home .hero-cta .cta:hover{background:#3b1a08;border-color:#ffbc75}
#home .scene-note{color:var(--home-paper);background:#05030266}
#home .coordinates{border-color:#d8c4a7;background:#030201e8}
#home .coordinates::before{border-color:#d8c4a755}
#home .record-player .player-status,#home .queue-controls button{border-color:#d8c4a799;color:var(--home-paper);background:#030201ed}
#home .home-connect{margin-top:24px;border-color:#b2763d66}
#home .home-connect p{color:#decbb6}
#home .home-connect a{background:#070301e8;border-color:#b2763d88;color:var(--home-paper)}
#home a:focus-visible,body[data-page=home] .nav a:focus-visible{outline-color:var(--home-accent)}

@media(min-width:701px) and (max-width:1100px){
  #home .hero-copy{width:45%}
  #home .autumn-scene-art{object-position:65% bottom}
}

@media(max-width:700px){
  body[data-page=home]{background-image:none;background-color:#050302}
  body[data-page=home] #home::before{background:none}
  /* Retain the phone layout while using an illustration composed for portrait. */
  #home .home-stage{height:auto;min-height:0}
  #home .home-stage::before{bottom:0;height:100%;background:url('/autumn-home-mobile.png') right bottom / cover no-repeat;z-index:1}
  #home .home-landscape{display:none}
  #home .hero-copy h1{color:var(--home-paper)}
  #home .intro{font-size:11px}
  #home .hero-cta .cta{box-shadow:0 0 0 1px #d65c18,0 0 12px #f16c3822}
  #home .scene-note{background:#050302b3;border:1px solid #b2763d44;padding:6px 8px 6px 36px;text-shadow:0 1px 3px #000}
  #home .coordinates{background:#030201eb}
  #home .home-connect{margin-top:8px}
}