:root{
  --bg:#0b0b0b;
  --card:#1b1b1b;
  --accent:#caa76a;
  --muted:#cfcfcf;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:#fff;
  background:var(--bg);
  line-height:1.4;
}
.hero{
  position:relative;
  height:65vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero img, .hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.99) contrast(.95);
}
.hero-overlay{
  position:absolute;
  inset:0;
 background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.12));
}
.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:1rem;
  max-width:900px;
}
.site-title{font-size:clamp(42px,7vw,72px);margin:0 0 .25rem 0;font-weight:700}
.tagline{margin:0 0 1rem 0;color:var(--muted);font-size:clamp(14px,2.2vw,20px)}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:999px;text-decoration:none;margin:.25rem;font-weight:600}
.btn.primary{background:var(--accent);color:#111}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.14)}
.container{max-width:var(--max-width);margin:2rem auto;padding:0 1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:2rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:10px}
.panel{display:flex;gap:1rem;background:var(--card);padding:1rem;border-radius:10px;align-items:center}
.panel-right{width:260px}.playlist{list-style:none;padding:0;margin:0;color:var(--muted)}
.site-footer{padding:1.25rem 0;background:#050505;color:var(--muted);text-align:center}.fw{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
@media (max-width:720px){.hero{height:56vh;min-height:360px}.panel{flex-direction:column}.panel-right{width:100%}}
/* Interactive portal hotspots */

.portal {
  position:absolute;
  z-index:5;
}

.portal a {
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:white;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:30px;
  transition:.3s;
  backdrop-filter:blur(4px);
}

.portal span {
  font-size:12px;
  text-align:center;
  margin-top:5px;
}

.portal a:hover {
  transform:scale(1.15);
  background:rgba(255,255,255,.25);
  box-shadow:0 0 25px rgba(255,255,255,.8);
}


/* temporary positions - we will tune these */

.podcast {
  top:42%;
  left:16%;
}

.music {
  top:70%;
  left:5%;
}

.creations {
  top:70%;
  left:75%;
}

.grace {
  top:25%;
  left:70%;
}

.note {
  top: 78%;
  left: 40%;
}
/* ==========================
   STUDIO DESK
========================== */

.hero{
    position:relative;
    overflow:hidden;
}

.studio-desk{
    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:70%;
    height:170px;

    background:linear-gradient(
        to bottom,
        #8b5a2b 0%,
        #704321 40%,
        #5a3518 100%
    );

    border-top:6px solid #a9743a;

    border-radius:10px 10px 0 0;

    box-shadow:
        0 -8px 30px rgba(0,0,0,.35);
}
/* Leave a Note Form */

.note-form{
    margin-top:20px;
}

.note-form input,
.note-form textarea{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:1px solid #cfcfcf;
    border-radius:8px;
    font-size:16px;
    box-sizing:border-box;
}

.note-form textarea{
    resize:vertical;
    min-height:160px;
}

.note-form button{
    padding:12px 28px;
    background:#7b5a33;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

.note-form button:hover{
    background:#966d3f;
}