/* ===============================
   TIMOTHY WHITLEY OFFICIAL WEBSITE
   Premium Black / Gold Design
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #050505;
    color: #f5e7b8;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.7;
}


h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 2px;
}

a {
    color: #d4af37;
    text-decoration: none;
}



/* HEADER */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,.85);
    border-bottom: 1px solid rgba(212,175,55,.25);
    z-index: 1000;
}


.brand {
    display:flex;
    gap:12px;
    align-items:center;
    color:#d4af37;
    letter-spacing:2px;
}


.brand-mark {
    font-size:24px;
    font-weight:bold;
}


.brand-name {
    font-size:14px;
}


nav {
    display:flex;
    gap:30px;
}


nav a {
    font-size:12px;
    letter-spacing:2px;
}



/* HERO */

.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 10% 80px;
    gap:80px;
}


.hero-image {
    width:100%;
    display:flex;
    justify-content:center;
}


.hero-image img {
    width:100%;
    max-width:600px;
    border-radius:4px;
    box-shadow:
    0 0 60px rgba(212,175,55,.25);
}


.hero-content {
    max-width:600px;
}


.eyebrow {
    color:#d4af37;
    font-size:12px;
    letter-spacing:5px;
    margin-bottom:25px;
}


.hero h1 {
    font-size:80px;
    line-height:.9;
    color:#f7e7b0;
}


.hero h1 span {
    font-size:35px;
}


.roles {
    margin-top:25px;
    color:#d4af37;
    letter-spacing:2px;
    font-size:13px;
}


.gold-rule {
    height:2px;
    width:100px;
    background:#d4af37;
    margin:35px 0;
}


.hero h2 {
    font-size:34px;
}


.quote {
    margin:20px 0 35px;
    font-style:italic;
}



/* BUTTONS */

.buttons {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}


.gold-button,
.outline-button {

    padding:12px 25px;
    font-size:12px;
    letter-spacing:2px;
    transition:.3s;
}


.gold-button {
    background:#d4af37;
    color:#000;
}


.outline-button {
    border:1px solid #d4af37;
}


.gold-button:hover,
.outline-button:hover {
    transform:translateY(-3px);
}



/* SECTIONS */

.section {

    padding:100px 12%;
    text-align:center;

}


.section h2 {

    font-size:55px;
    margin-bottom:30px;

}


.section p {

    max-width:900px;
    margin:20px auto;

}



/* RELEASE COVER */

.release-cover {

    width:350px;
    margin:40px auto;
    display:block;
    box-shadow:
    0 0 50px rgba(212,175,55,.3);

}



/* ABOUT */

.about img {

    width:280px;
    margin-top:40px;

}



/* VIDEO */

iframe {

    max-width:900px;
    width:100%;
    height:500px;

}



/* FOOTER */

footer {

    text-align:center;
    padding:40px;
    border-top:1px solid rgba(212,175,55,.2);
    font-size:12px;

}



/* MOBILE */

@media(max-width:900px){

.hero {

grid-template-columns:1fr;
text-align:center;

}


.hero h1 {

font-size:55px;

}


nav {

display:none;

}


.hero-image {

order:-1;

}


.section h2 {

font-size:40px;

}

}
.footer-photo {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto 24px auto;
  border-radius: 8px;
}
.book-entry {
  margin-bottom: 48px;
}

.book-entry h3 {
  margin-bottom: 8px;
}

.book-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}

.retailer-link {
  display: inline-block;
  font-size: 14px;
  color: #c9a227;
  text-decoration: underline;
  margin-top: 8px;
}

.coming-soon-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 18px;
  border: 1px solid #c9a227;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #c9a227;
  text-transform: uppercase;
}
#contact .gold-button {
  display: inline-block;
  margin-top: 20px;
}
.welcome-banner {
  display: block;
  width: 100%;
  max-width: 675px;
  height: auto;
  margin: 0 auto 40px auto;
  border-radius: 8px;
}