* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:#eeeae1;
  color:#213b35;
  font:17px/1.65 system-ui,sans-serif
}
a {
  color:inherit;
  text-underline-offset:5px
}
a:focus-visible {
  outline:3px solid #a34a25;
  outline-offset:6px
}
.skip {
  position:absolute;
  left:1rem;
  top:-5rem;
  background:white;
  padding:1rem
}
.skip:focus {
  top:1rem;
  z-index:3
}
header,main,footer {
  max-width:1280px;
  margin:auto
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:38px 48px
}
.brand {
  font-weight:800;
  line-height:1.05;
  letter-spacing:.06em;
  text-decoration:none
}
.brand span {
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
  margin-top:12px
}
nav {
  display:flex;
  gap:32px
}
nav a {
  font-size:14px
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  padding:60px 48px 90px;
  align-items:center
}
.eyebrow,.label {
  font-size:12px;
  letter-spacing:.16em;
  font-weight:700
}
h1 {
  font:clamp(64px,7.5vw,106px)/1.02 Georgia,serif;
  font-weight:400;
  letter-spacing:-.055em;
  margin:28px 0
}
.lead {
  max-width:380px;
  color:#465c53;
  margin-bottom:30px
}
.button {
  display:inline-flex;
  gap:28px;
  justify-content:space-between;
  align-items:center;
  min-height:48px;
  padding:13px 22px;
  background:#213b35;
  color:#fff;
  text-decoration:none;
  font-size:14px
}
.button:hover {
  background:#35584a
}
.art {
  height:480px;
  background:#b8c2ad;
  position:relative;
  overflow:hidden
}
.sun {
  width:70%;
  aspect-ratio:1;
  border-radius:50%;
  background:#b55b36;
  position:absolute;
  left:15%;
  top:12%
}
.horizon {
  position:absolute;
  top:54%;
  inset-inline:0;
  height:50%;
  background:repeating-linear-gradient(0deg,#7d9383 0px,#7d9383 2px,#a7b5a0 2px,#a7b5a0 8px)
}
.art span {
  position:absolute;
  bottom:24px;
  left:24px;
  font-size:12px;
  letter-spacing:.2em;
  background:#eeeae1;
  padding:5px 10px
}
.listen {
  border-top:1px solid #a5afa0;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px;
  padding:64px 48px
}
h2 {
  font:48px/1.15 Georgia,serif;
  margin:20px 0
}
h3 {
  font:32px/1.2 Georgia,serif;
  margin:20px 0
}
.player {
  background:#e0e1d4;
  padding:38px
}
.note {
  font-size:12px;
  color:#43584c
}
.alternatives {
  font-size:14px;
  line-height:2.2
}
.about {
  border-top:1px solid #a5afa0;
  padding:64px 48px;
  max-width:850px
}
.about p {
  max-width:640px
}
footer {
  border-top:1px solid #a5afa0;
  padding:24px 48px;
  display:flex;
  justify-content:space-between;
  font-size:12px
}
@media(max-width:700px) {
  header {
  padding:24px
}
nav {
  gap:20px
}
.hero {
  grid-template-columns:1fr;
  padding:24px;
  gap:36px
}
.art {
  height:330px
}
.listen {
  grid-template-columns:1fr;
  padding:48px 24px;
  gap:20px
}
h2 {
  font-size:40px
}
.player {
  padding:24px
}
.about {
  padding:48px 24px
}
footer {
  padding:24px;
  gap:20px;
  flex-wrap:wrap
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}

/* V2: robust grids, deliberate controls and consent-gated player. */
:root  {
   color-scheme: light;
   
}

[hidden]  {
   display: none !important;
   
}

body  {
   overflow-wrap: break-word;
   
}

main:focus  {
   outline: none;
   
}

.hero  {
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   
}

.listen  {
   grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
   
}

.hero > *, .listen > *  {
   min-width: 0;
   
}

h1  {
   font-size: clamp(3.25rem, 7.3vw, 6.625rem);
   
}

button  {
   font: inherit;
   cursor: pointer;
   
}

a, button  {
   -webkit-tap-highlight-color: transparent;
   
}

a:focus-visible, button:focus-visible  {
   outline: 3px solid #b55b36;
   outline-offset: 5px;
   
}

nav a  {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   
}

.button  {
   border: 1px solid #213b35;
   transition: background-color 160ms ease;
   text-align: left;
   
}

.button:disabled  {
   opacity: .7;
   cursor: wait;
   
}

.player-actions  {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 20px;
   align-items: center;
   
}

.text-button  {
   color: #213b35;
   background: transparent;
   border: 0;
   padding: 12px 0;
   min-height: 48px;
   text-decoration: underline;
   text-underline-offset: 5px;
   
}

.text-button:hover  {
   color: #823d23;
   
}

.status  {
   font-size: 14px;
   color: #213b35;
   border-left: 2px solid #b55b36;
   padding-left: 12px;
   margin: 24px 0;
   
}

#embed-slot:empty  {
   display: none;
   
}

#embed-slot  {
   margin: 24px 0;
   
}

#embed-slot iframe  {
   display: block;
   border: 0;
   width: 100%;
   height: 480px;
   background: #eeeae1;
   
}

.alternatives  {
   border-top: 1px solid #a5afa0;
   padding-top: 20px;
   line-height: 1.6;
   
}

.alternatives p  {
   margin: 0 0 8px;
   font-size: 14px;
   
}

.alternatives a  {
   display: block;
   padding: 10px 0;
   min-height: 44px;
   
}

.note  {
   font-size: 14px;
   line-height: 1.6;
   color: #354b40;
   
}

.label, .eyebrow, .brand span, .art span  {
   letter-spacing: .08em;
   
}

footer  {
   align-items: center;
   gap: 20px;
   font-size: 14px;
   
}

footer a  {
   padding: 10px 0;
   
}

@media (max-width: 900px)  {
  
  .hero  {
   gap: 32px;
   
}

  .art  {
   height: 400px;
   
}

  .listen  {
   grid-template-columns: minmax(0, 1fr);
   gap: 24px;
   
}


}

@media (max-width: 700px)  {
  
  header  {
   gap: 16px;
   
}

  .hero  {
   grid-template-columns: minmax(0, 1fr);
   padding-top: 32px;
   padding-bottom: 56px;
   
}

  .art  {
   height: 330px;
   
}

  .brand  {
   font-size: 15px;
   
}

  nav  {
   gap: 16px;
   
}

  nav a  {
   font-size: 14px;
   
}

  .player  {
   padding: 24px;
   
}


}

@media (max-width: 360px)  {
  
  header, .hero, .listen, .about, footer  {
   padding-left: 20px;
   padding-right: 20px;
   
}

  header  {
   flex-wrap: wrap;
   
}

  .player  {
   padding: 20px;
   
}

  .button  {
   padding: 12px 16px;
   gap: 12px;
   
}

  .art  {
   height: 280px;
   
}


}

@media (prefers-reduced-motion: reduce)  {
   *, *::before, *::after  {
   scroll-behavior: auto !important;
   transition: none !important;
   
}
 
}