:root{
  --bg:#0b0a08;
  --bg-edge:#13110d;
  --ivory:#ece4d4;
  --ivory-soft:#b3a892;
  --ivory-faint:#7c715f;
  --rule:#3a342a;
  --accent:#c6a164;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--serif);
  font-feature-settings:"liga" 1, "onum" 1, "kern" 1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-image: linear-gradient(180deg, var(--bg-edge), transparent 10%, transparent 90%, var(--bg-edge));
}

/* masthead */
.masthead{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding: clamp(20px,3vw,36px) clamp(24px,5vw,64px) 18px;
  border-bottom:1px solid var(--rule);
  font-size:11.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ivory-faint);
  flex-shrink:0;
}
.masthead .right{ text-align:right; }
.masthead .mark{ height:28px; width:auto; display:block; margin-inline:auto; opacity:.95; }

/* tagline */
.tagline-bar{
  text-align:center;
  padding: clamp(18px,2.5vh,32px) 0 clamp(14px,2vh,24px);
  font-style:italic;
  font-size:clamp(15px,1.5vw,20px);
  color:var(--ivory-soft);
  flex-shrink:0;
}
.tagline-bar .sub{
  display:block;
  font-style:normal;
  font-size:.75em;
  letter-spacing:.04em;
  color:var(--ivory-faint);
  margin-top:.3em;
}

/* ornament */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding-bottom: clamp(10px,1.5vh,20px);
  flex-shrink:0;
}
.ornament .line{ height:1px; width:min(100px,18vw); background:var(--rule); }
.ornament .dot{ width:5px; height:5px; transform:rotate(45deg); background:var(--accent); opacity:.85; }

/* plan 3D */
#plan-wrapper{
  flex:1;
  position:relative;
  min-height:0;
}
#plan-wrapper canvas{ display:block; width:100% !important; height:100% !important; }

/* hint */
#hint{
  position:absolute; bottom:20px; right:24px;
  font-size:12px; font-style:italic; color:var(--ivory-faint);
  letter-spacing:.08em; pointer-events:none; transition:opacity .5s;
}

/* room card */
#room-card{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%) translateY(10px);
  background:rgba(11,10,8,.92); backdrop-filter:blur(16px);
  border:1px solid var(--rule);
  padding:18px 48px; text-align:center; min-width:320px;
  transition:opacity .4s ease, transform .4s ease;
  opacity:0; pointer-events:none;
}
#room-card.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
#room-card h2{ font-size:18px; font-weight:400; letter-spacing:5px; text-transform:uppercase; color:var(--ivory); }
.status{ font-size:12px; color:var(--ivory-faint); margin-top:10px; letter-spacing:2px; display:flex; align-items:center; justify-content:center; gap:8px; font-style:italic; }

/* volume */
#volume-bar{
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; transition:opacity .4s; pointer-events:auto;
}
#volume-bar.visible{ opacity:1; }
#volume-bar label{ font-size:10px; color:var(--ivory-faint); letter-spacing:3px; text-transform:uppercase; }
#volume-slider{
  -webkit-appearance:none; appearance:none;
  writing-mode:vertical-lr; direction:rtl;
  width:3px; height:110px; border-radius:0;
  background:var(--rule); outline:none; cursor:pointer;
}
#volume-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:0; background:var(--accent); cursor:pointer; }

/* dot / spinner */
.dot-live{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; animation:blink 1.8s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1}50%{opacity:.25} }
.spinner{ width:12px; height:12px; border:2px solid var(--rule); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* colophon */
.colophon{
  padding: clamp(14px,2vh,22px) clamp(24px,5vw,64px);
  border-top:1px solid var(--rule);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-faint);
  flex-shrink:0;
}
.colophon a{ color:var(--ivory); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px; transition:border-color .3s,color .3s; }
.colophon a:hover{ color:var(--accent); border-color:var(--accent); }

body.hovering{ cursor:pointer; }

@media(max-width:680px){
  .masthead{ font-size:10px; letter-spacing:.24em; }
  .colophon{ flex-direction:column; gap:8px; }
  #room-card{ min-width:260px; padding:14px 28px; }
}