:root{
  --cream:#fffaf6;
  --rose:#af6759;
  --rose-dark:#9d594c;
  --ink:#111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#f7eee8}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
.ticker{
  height:37px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(90deg,#a65d50,#b56e61,#a65d50);
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  white-space:nowrap;
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:ticker 31s linear infinite;
  will-change:transform;
}
.ticker__track span{
  display:block;
  padding-right:42px;
  font-size:16px;
  letter-spacing:.1px;
}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-25%)}}

.desktop-site{
  width:min(1672px,100%);
  margin:0 auto;
  background:#fff;
  box-shadow:0 14px 50px rgba(70,35,25,.07);
}
.shot{position:relative;width:100%;overflow:hidden}
.shot img{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:3}
.hotspot:focus-visible{outline:3px solid #ff3b70;outline-offset:2px}

/* Header hotspots based on the approved 1672px desktop mockup */
.home-logo{left:4.5%;top:4%;width:13%;height:90%}
.nav-home{left:39.3%;top:15%;width:4.3%;height:66%}
.nav-about{left:44.4%;top:15%;width:4.5%;height:66%}
.nav-live{left:49.2%;top:15%;width:6.5%;height:66%}
.nav-picks{left:56.0%;top:15%;width:6.2%;height:66%}
.nav-new{left:63.6%;top:15%;width:6.4%;height:66%}
.nav-contact{left:70.8%;top:15%;width:5%;height:66%}
.header-live{left:79.2%;top:4%;width:14.6%;height:88%}

/* Hero TikTok panel button */
.hero-live{left:72.8%;top:48%;width:15.8%;height:44%}

/* Product Buy Now buttons */
.buy{top:78.0%;height:13%}
.buy-1{left:3.0%;width:13.3%}
.buy-2{left:18.5%;width:13.3%}
.buy-3{left:34.0%;width:13.3%}
.buy-4{left:49.5%;width:13.3%}
.buy-5{left:65.0%;width:13.3%}
.buy-6{left:80.6%;width:13.3%}

/* Contact strip */
.contact-link{left:24%;top:4%;width:56%;height:48%}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mobile-site{display:none}

@media (max-width:760px){
  .desktop-site{display:none}
  .mobile-site{display:block;background:#fff}
  .ticker{height:34px}
  .ticker__track span{font-size:13px;padding-right:28px}

  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:#fffaf7;
    border-bottom:1px solid #ead5cd;
    position:sticky;
    top:0;
    z-index:20;
  }
  .mobile-wordmark{
    font-family:"Brush Script MT","Segoe Script",cursive;
    font-size:35px;
    font-weight:700;
    line-height:1;
  }
  .mobile-wordmark span{color:#c98579}
  .mobile-live{
    background:#aa6558;
    color:#fff;
    text-decoration:none;
    padding:10px 13px;
    border-radius:3px;
    font-size:13px;
    letter-spacing:.04em;
  }
  .mobile-hero{
    overflow:hidden;
    background:#f4e8e1;
    border-bottom:1px solid #ead5cd;
  }
  .mobile-hero img{
    width:100%;
    height:auto;
    max-width:100%;
    display:block;
    transform:none;
  }
  .mobile-featured{padding:20px 14px 10px;text-align:center}
  .mobile-featured h1{font-size:34px;margin:0}
  .mobile-featured>p{margin:3px 0 18px;color:#6f5b54}
  .mobile-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 10px;
    text-align:left;
  }
  .mobile-grid article{
    border:1px solid #ead8d0;
    background:#fff;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(82,48,39,.05);
  }
  .mobile-grid article img{
    width:100%;
    aspect-ratio:4/5;
    display:block;
    object-fit:cover;
    object-position:center;
    filter:saturate(.95);
    background:#f8f1ed;
  }
  .mobile-grid strong,.mobile-grid b{display:block;padding:3px 8px 0}
  .mobile-grid a{
    margin:7px 8px 9px;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:#b56e61;
    padding:9px 4px;
    font-size:13px;
  }
  .mobile-contact{
    margin-top:18px;
    padding:24px 18px;
    text-align:center;
    background:#fae8e1;
    border-top:1px solid #e6c8be;
    border-bottom:1px solid #e6c8be;
  }
  .mobile-contact h2{font-style:italic;font-size:27px;margin:0 0 6px}
  .mobile-contact p{font-size:18px;margin:0 0 14px;color:#8b4f45}
  .mobile-contact a{
    display:inline-block;
    padding:11px 18px;
    color:#fff;
    background:#ad675a;
    text-decoration:none;
  }
  .mobile-services{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:#996052;
    color:#fff;
  }
  .mobile-services span{
    padding:16px 10px;
    text-align:center;
    background:#a76558;
    font-size:13px;
    letter-spacing:.03em;
  }
}


.music-toggle{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9999;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(151,85,73,.92);
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font:600 12px/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.02em;
  box-shadow:0 5px 18px rgba(55,25,20,.18);
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.music-toggle:hover{background:rgba(128,67,57,.96)}
.music-toggle:focus-visible{outline:3px solid #ffb7c3;outline-offset:2px}
@media(max-width:760px){
  .music-toggle{right:10px;bottom:10px;padding:8px 11px;font-size:11px}
}