@font-face{font-family:"Alata";src:url("fonts/alata.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("fonts/josefin-slab.woff2") format("woff2");font-weight:100 700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0d0c08;color:#fff;font-family:"Barlow",sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}

.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background-color:#14110a;background-size:cover;background-position:50% 50%}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero > *{position:relative}
.hero--home{background-image:url("bg-home.webp")}
.hero--guild{background-image:url("bg-guild.jpg")}

.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 53px;min-height:100px}
.nav__logo img{width:60px;height:60px}
.nav__links{display:flex;align-items:center;gap:16px;font-family:"Alata",sans-serif}
.nav__link{color:#fff;font-size:16px;font-weight:700;text-decoration:none;padding:4px 0}
.nav__link:hover,.nav__link[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.nav__button{display:inline-block;background:#d8b13e;color:rgba(0,0,0,.8);font-size:20px;font-weight:700;line-height:20px;text-decoration:none;padding:16px 28px;border:1px solid rgba(0,0,0,.1);border-radius:4px;box-shadow:0 0 1px rgba(255,255,255,.5);transition:filter .15s ease}
.nav__button:hover{filter:brightness(1.08)}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}

.hero__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 52px 120px}
.hero__title{margin:0}
.hero__title--films img{width:890px}
.hero__title--guild img{width:670px}
.mission{margin:20px 0 0;font-family:"Barlow",sans-serif;font-size:18px;font-weight:400;line-height:1.45;color:#d8b13e}
.tagline{margin:30px 0 0;font-family:"Josefin Slab",Georgia,serif;font-size:36px;font-weight:400;line-height:1.4;color:#fff}
.tagline span{display:block}

@media (max-width:727px){
  .nav{background:#fff;min-height:60px;padding:8px 16px}
  .nav__logo img{width:44px;height:44px}
  .nav__links{gap:12px}
  .nav__link{color:rgba(0,0,0,.8);font-size:14px}
  .nav__button{font-size:14px;line-height:16px;padding:9px 12px}
  .nav a:focus-visible{outline-color:#222}
  .hero__body{padding:40px 16px 80px;justify-content:flex-end;padding-bottom:22vh}
  .hero__title img{width:100%}
  .mission{font-size:17px;margin-top:12px}
  .tagline{font-size:32px;margin-top:24px}
  .tagline span{display:inline}
}