:root{--black:#070707;--panel:#101010;--steel:#c8c6c0;--muted:#98938b;--red:#9e1518;--red2:#d01e22;--bronze:#a9834c;--line:#302a27}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#eee;font-family:Arial,Helvetica,sans-serif;line-height:1.6}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(circle at 20% 10%,#7e1818 0,transparent 25%),radial-gradient(circle at 80% 60%,#7a5a2c 0,transparent 18%);z-index:-1}.nav{height:76px;position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(5,5,5,.86);border-bottom:1px solid rgba(169,131,76,.25);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;color:#ddd;text-decoration:none;letter-spacing:.14em;font-family:Georgia,serif;font-size:.8rem}.brand img{width:45px;height:45px;object-fit:cover;object-position:50% 26%;border-radius:50%}.brand b{color:#bd292b;font-weight:500}.nav nav{display:flex;gap:2.2rem}.nav nav a{color:#bbb;text-decoration:none;text-transform:uppercase;font-size:.72rem;letter-spacing:.18em}.nav nav a:hover{color:white}.menu{display:none;background:none;border:0;color:white;font-size:1.5rem}.hero{min-height:100vh;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.86)),url('assets/blades-of-honor-key-art.png') center 25%/cover}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,rgba(0,0,0,.12) 35%,#050505 90%)}.hero-inner{position:relative;z-index:2;max-width:850px;padding:100px 24px 60px}.hero-logo{width:min(520px,80vw);filter:drop-shadow(0 12px 20px #000);margin-bottom:1rem}.eyebrow{color:var(--bronze);letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;font-weight:bold}.hero h1,.game h2,.panel h2,.about h2,.contact h2{font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:clamp(2rem,5vw,4.8rem);margin:.2rem 0;color:#eee;text-shadow:0 3px 20px #000}.lead{color:#bdb8b0;font-family:Georgia,serif;font-size:1.1rem;letter-spacing:.08em}.btn{display:inline-block;margin-top:1.5rem;padding:14px 26px;color:white;background:linear-gradient(#b31a1e,#781013);border:1px solid #d04442;box-shadow:0 0 0 2px #32100f,0 8px 28px #000;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}.down{position:absolute;z-index:3;bottom:22px;color:#aaa;text-decoration:none;font-size:2rem}.game{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);min-height:760px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b0b0b}.game-art{overflow:hidden;min-height:650px}.game-art img{width:100%;height:100%;object-fit:cover;object-position:center}.game-copy{padding:8vw 7vw;display:flex;flex-direction:column;justify-content:center}.game-copy h2{font-size:clamp(2.7rem,5vw,5.2rem);line-height:.88;margin:.6rem 0;color:#d5d2ca}.game-copy h2 small{font-size:.38em}.tag{color:var(--red2);text-transform:uppercase;letter-spacing:.35em;font-size:.75rem}.game-copy>p:not(.eyebrow):not(.tag){max-width:580px;color:#b9b4ac}.chips{display:flex;gap:8px;margin-top:1rem}.chips span{border:1px solid #4a3d31;color:#b99b72;padding:5px 10px;text-transform:uppercase;font-size:.62rem;letter-spacing:.14em}.muted{width:max-content;opacity:.72}.panel,.about,.contact{padding:110px max(7vw,24px)}.panel{text-align:center;background:linear-gradient(#0b0b0b,#111)}.panel h2,.about h2,.contact h2{font-size:clamp(2rem,4vw,3.8rem);margin:.3rem 0 2rem}.panel article{max-width:760px;margin:auto;text-align:left;padding:32px;border:1px solid var(--line);background:#0b0b0b}.panel article span{font-size:.62rem;letter-spacing:.2em;color:var(--red2)}.panel article h3{font-family:Georgia,serif;font-size:1.6rem}.panel article p,.about p,.contact p{color:#aaa}.about{display:grid;grid-template-columns:1fr 1fr;gap:8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contact{text-align:center}.contact p{max-width:600px;margin:auto}footer{padding:48px 5vw;text-align:center;border-top:1px solid var(--line);color:#777;font-size:.75rem;letter-spacing:.08em}.footer-brand{display:flex;justify-content:center;align-items:center;gap:12px;color:#aaa;font-family:Georgia,serif;letter-spacing:.16em}.footer-brand img{width:50px;height:50px;object-fit:cover;object-position:50% 26%;border-radius:50%}@media(max-width:800px){.nav{height:64px;padding:0 18px}.brand span{font-size:.65rem}.menu{display:block}.nav nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;padding:24px;background:#090909;border-bottom:1px solid var(--line)}.nav nav.open{display:flex}.hero-inner{padding-top:90px}.game{grid-template-columns:1fr}.game-art{min-height:520px}.game-copy{padding:70px 24px}.about{grid-template-columns:1fr;gap:10px}.panel,.about,.contact{padding:80px 24px}}

.contact-emails{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}.contact-emails a{display:inline-block;padding:12px 18px;border:1px solid var(--line);background:#0b0b0b;color:#d5d2ca;text-decoration:none;letter-spacing:.05em}.contact-emails a:hover{border-color:var(--red2);color:#fff}

.parent-home{color:#9d9a94;text-decoration:none;text-transform:uppercase;font-size:.62rem;letter-spacing:.18em;white-space:nowrap;transition:color .25s ease}
.parent-home:hover{color:var(--bronze)}
.nav{gap:24px}
.nav .brand{margin-right:auto}
.contact-emails a{transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease}
.contact-emails a:hover,.contact-emails a:focus-visible{border-color:var(--red2);background:linear-gradient(#b31a1e,#781013);color:#fff;transform:translateY(-2px)}
.footer-parent{display:inline-block;margin-bottom:26px;color:var(--bronze);text-decoration:none;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.footer-parent:hover{color:#d4b57f}
@media(max-width:1050px) and (min-width:801px){.nav nav{gap:1.2rem}.nav nav a{font-size:.64rem}.brand span{font-size:.7rem}}
@media(max-width:800px){.parent-home span{display:none}.parent-home{font-size:1rem;letter-spacing:0}.nav .brand{margin-right:auto}.contact-emails{flex-direction:column;align-items:stretch}.contact-emails a{text-align:center;font-size:.72rem}}

/* V1.2 — Grey Guard parent navigation polish */
.parent-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid rgba(169,131,76,.30);
  background:rgba(12,12,12,.72);
  color:#b9b4ac;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;
}
.parent-home:hover,.parent-home:focus-visible{
  color:#efe8dc;
  border-color:var(--bronze);
  background:rgba(169,131,76,.10);
  transform:translateX(-2px);
}
.parent-home:visited{color:#b9b4ac}
.footer-parent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:26px;
  padding:9px 14px;
  border:1px solid rgba(169,131,76,.26);
  background:#0b0b0b;
  color:#aaa59c;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;
}
.footer-parent:hover,.footer-parent:focus-visible{
  color:#efe8dc;
  border-color:var(--bronze);
  background:rgba(169,131,76,.09);
  transform:translateY(-2px);
}
.footer-parent:visited{color:#aaa59c}
@media(max-width:800px){
  .parent-home{padding:8px 10px;font-size:.78rem}
}


/* V1.3 — Health-style centered Studios header + hero artwork framing */
.nav{
  height:86px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-content:initial;
  gap:0;
  padding:0 5vw;
}
.nav .parent-home{
  justify-self:start;
  width:max-content;
  max-width:100%;
}
.nav .brand{
  justify-self:center;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  text-align:center;
  line-height:1;
  color:#e5e1da;
  text-decoration:none;
}
.nav .brand b{
  color:#e5e1da;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:5px;
}
.nav .brand span{
  margin-top:7px;
  color:#bd292b;
  font-family:Arial,Helvetica,sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:6px;
}
.nav nav{
  justify-self:end;
}
.nav .menu{
  justify-self:end;
}

/*
  The key art is close to square while desktop monitors are very wide.
  "cover" must crop vertically, so anchor the crop to the TOP of the artwork.
  This keeps the complete BLADES OF HONOR title visible instead of cutting off BLADES.
*/
.hero{
  min-height:100vh;
  background-image:
    linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.86)),
    url('assets/blades-of-honor-key-art.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}

/* On especially wide displays, slightly reduce the zoom while preserving a filled cinematic frame. */
@media(min-aspect-ratio:16/9) and (min-width:1200px){
  .hero{
    background-size:auto 132%;
    background-position:center top;
    background-color:#080808;
  }
}

@media(max-width:1050px) and (min-width:801px){
  .nav{
    grid-template-columns:1fr auto 1fr;
  }
  .nav .brand b{font-size:16px;letter-spacing:4px}
  .nav .brand span{font-size:7px;letter-spacing:5px}
}

@media(max-width:800px){
  .nav{
    height:76px;
    grid-template-columns:1fr auto auto;
    padding:0 18px;
  }
  .nav .brand{
    justify-self:center;
  }
  .nav .brand b{font-size:14px;letter-spacing:3px}
  .nav .brand span{margin-top:5px;font-size:7px;letter-spacing:4px}
  .nav nav{
    top:76px;
  }
  .hero{
    background-position:center top;
    background-size:cover;
  }
}


/* V1.4 — Studios mobile header alignment
   Matches the corrected Health mobile header behaviour. */
@media (max-width:800px){
  .nav{
    height:76px !important;
    min-height:76px !important;
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    padding:0 !important;
  }

  .nav .parent-home{
    position:absolute !important;
    left:20px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    z-index:3;
  }

  .nav .parent-home span{display:none !important}

  .nav .parent-home:hover,
  .nav .parent-home:focus-visible{
    transform:translateY(-50%) !important;
  }

  .nav .brand{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    text-align:center !important;
    z-index:2;
  }

  .nav .brand b{
    display:block !important;
    white-space:nowrap !important;
    font-size:14px !important;
    letter-spacing:3px !important;
    text-align:center !important;
  }

  .nav .brand span{
    display:block !important;
    margin-top:5px !important;
    font-size:7px !important;
    letter-spacing:4px !important;
    text-align:center !important;
  }

  .nav .menu{
    display:flex !important;
    position:absolute !important;
    right:20px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    color:#eee !important;
    font-size:30px !important;
    line-height:1 !important;
    cursor:pointer;
    z-index:3;
  }

  .nav nav{
    top:76px !important;
  }
}