@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Montserrat:wght@500;600;700&display=swap');

:root{--navy:#071e30;--gold:#d9a83e;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--navy)}
body{color:#fff;font-family:Montserrat,Arial,sans-serif}
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--navy) url("assets/hero-background.webp") center/cover no-repeat;
}
.shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,22,37,.96) 0%,rgba(3,22,37,.83) 37%,rgba(3,22,37,.22) 72%,rgba(3,22,37,.10) 100%);
}
.content{
  position:relative;z-index:1;min-height:100svh;
  width:min(1500px,100%);margin:auto;padding:5vh 6vw 4vh;
  display:flex;flex-direction:column;
}
.logo{width:clamp(105px,10vw,165px);height:auto;display:block}
.copy{margin:auto 0;max-width:790px}
.gold-rule{width:60px;height:3px;background:var(--gold);margin-bottom:24px}
h1{
  margin:0;font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;
  font-size:clamp(64px,7vw,118px);line-height:.86;letter-spacing:-.045em;
}
h1 span{color:var(--gold)}
.intro{
  margin:25px 0 30px;max-width:650px;font-size:clamp(17px,1.45vw,24px);
  line-height:1.45;font-weight:600
}
.topics{
  display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));
  max-width:760px;border-top:1px solid rgba(255,255,255,.18);padding-top:18px
}
.topics div{text-align:center;padding:0 8px;border-right:1px solid rgba(255,255,255,.14)}
.topics div:last-child{border-right:0}
.topics b{display:block;color:#fff;font:400 28px Georgia,serif;margin-bottom:7px}
.topics small{font-size:10px;line-height:1.25;text-transform:uppercase;font-weight:700}
footer{width:min(620px,100%)}
.coming{
  border:2px solid var(--gold);border-radius:999px;padding:16px 22px;
  text-align:center;color:var(--gold);font-size:14px;font-weight:700;letter-spacing:.35em
}
.mission{text-align:center;margin-top:15px;font-size:10px;font-weight:600;letter-spacing:.30em}

/* Tablet portrait */
@media (max-width:900px){
  .hero{background-position:60% center}
  .shade{background:linear-gradient(180deg,rgba(3,22,37,.45),rgba(3,22,37,.82) 48%,#071e30 100%)}
  .content{padding:5vh 7vw 4vh}
  .copy{margin:8vh 0 auto}
  h1{font-size:clamp(58px,10vw,88px)}
  .topics{grid-template-columns:repeat(3,1fr);gap:14px 0}
  .topics div:nth-child(3){border-right:0}
}

/* Phones: actual reflow, not a scaled desktop image */
@media (max-width:600px){
  .hero{background-position:61% top;background-size:auto 68vh;background-repeat:no-repeat}
  .shade{
    background:
      linear-gradient(180deg,rgba(3,22,37,.18) 0%,rgba(3,22,37,.45) 32%,#071e30 66%,#071e30 100%),
      linear-gradient(90deg,rgba(3,22,37,.55),transparent 80%);
  }
  .content{
    min-height:100svh;padding:max(25px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));
  }
  .logo{width:112px}
  .copy{margin:7vh 0 4vh}
  .gold-rule{width:44px;height:2px;margin-bottom:18px}
  h1{font-size:clamp(48px,14vw,67px);line-height:.88;letter-spacing:-.04em}
  .intro{font-size:15px;line-height:1.4;margin:18px 0 24px;max-width:360px}
  .topics{
    grid-template-columns:repeat(2,1fr);max-width:390px;
    gap:0;border-top:1px solid rgba(255,255,255,.18);padding-top:8px
  }
  .topics div{
    display:flex;align-items:center;text-align:left;gap:10px;
    min-height:42px;padding:5px 8px;border-right:0;border-bottom:1px solid rgba(255,255,255,.10)
  }
  .topics b{width:25px;margin:0;font-size:21px;text-align:center}
  .topics small{font-size:9px}
  footer{margin-top:auto}
  .coming{padding:13px 12px;font-size:11px;letter-spacing:.25em}
  .mission{font-size:8px;letter-spacing:.22em}
}