@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Inter:ital,wght@0,300;0,400;1,300&display=swap');

:root{
  --bg-1:#12060a;
  --bg-2:#4E1B12;
  --bg-3:#5F1F24;
  --accent-1:#982619;
  --accent-2:#D7C6BB;
  --accent-3:#F7F0E4;
  --brand-gold:#D8B66F;
  --highlight:#F6EEE2;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg-1);
  color:var(--highlight);
  overflow:hidden;
}
canvas#bg{position:fixed;inset:0;width:100%;height:100%;display:block}
#content{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;pointer-events:none}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:1.4rem;max-width:100%;filter:drop-shadow(0 0 22px rgba(216,182,111,0.22));pointer-events:auto}
.logo-mark{width:8.25rem;height:auto;flex:0 0 auto}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;margin:0;color:var(--brand-gold);font-family:Cinzel, Garamond, Georgia, serif;font-size:5.1rem;font-weight:500;line-height:0.82;letter-spacing:0;text-align:left}
.byline{width:100%;max-width:48rem;margin:1.45rem 0 0;font-size:1.08rem;font-weight:400;opacity:1;line-height:1.45;color:rgba(247,240,228,0.94)}
.contact{max-width:100%;margin-top:1.45rem;font-size:0.98rem;color:var(--accent-3);text-decoration:none;filter:brightness(1);pointer-events:auto;overflow-wrap:anywhere}
.contact:hover{filter:brightness(1.15)}

/* Ensure single-viewport look */
@media (max-width:760px){
  #content{padding:1.5rem}
  .brand-lockup{gap:0.9rem}
  .logo-mark{width:5.2rem}
  .wordmark{font-size:3.25rem}
  .byline{margin-top:1.15rem;font-size:0.95rem;max-width:28rem}
  .contact{font-size:0.9rem}
}

@media (max-width:560px){
  .brand-lockup{gap:0.65rem}
  .logo-mark{width:3.8rem}
  .wordmark{font-size:2.3rem}
  .byline{max-width:21rem}
}

@media (max-width:420px){
  .logo-mark{width:3.4rem}
  .wordmark{font-size:2.08rem}
}

@media (max-width:360px){
  .logo-mark{width:3.05rem}
  .wordmark{font-size:1.85rem}
  .byline{font-size:0.88rem}
}