/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p,
li {
  text-wrap: pretty;
  font-size: 1.3rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap");
:root {
  --dark-bg: #141618;
  --dark-bg-alt: #222529;
  --black: #000;

  --light-text: #faf9f6;
  --accent-text: #ffb700;

  --font-primary: "Montserrat", sans-serif;
  --font-alt: "Roboto Serif", serif;
}

html {
  box-sizing: border-box;
  background-color: var(--dark-bg);
}

a {
  color: var(--accent-text);
}

a:hover,
a:focus {
  color: var(--light-text);
}

a:focus,
button:focus {
  outline: 2px dotted var(--light-text);
}

li {
  list-style-type: none;
}

body {
  color: var(--light-text);
  font-family: var(--font-alt);
}

.content-grid {
  --padding-inline: 2rem;
  --content-max-size: 68rem;

  @media (max-width: 31.25rem) {
    --padding-inline: 0.5rem;
  }

  display: grid;

  grid-template-columns:
    [full-width-start]
    minmax(var(--padding-inline), 1fr)
    [content-start]
    min(100% - (var(--padding-inline) * 2), var(--content-max-size))
    [content-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end];
}

.content-grid > :not(.full-width),
.full-width > :not(.full-width, .header__nav) {
  grid-column: content;
}

.content-grid .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

/* Nav */

.skip-link {
  display: block;
  position: absolute;
  top: -100rem;
  z-index: 1000;
  transition: top 0.5s ease-in-out;
  transform: translate(-50%, 0);
  left: 50%;
  padding: 2em;
  background-color: var(--black);
}

.skip-link:focus {
  top: 0rem;
}

nav a {
  text-decoration: none;
  font-family: var(--font-primary);
  color: var(--light-text);

  @media (min-width: 48rem) {
    font-size: 1.05rem;
  }
}

nav a[aria-current="page"] {
  color: var(--accent-text);
}

nav {
  text-transform: uppercase;
}

nav li {
  position: relative;
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -0.62rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0.08rem;
  background-color: var(--accent-text);
  transition: width 0.3s ease-in-out;
}

nav a:hover,
nav a:focus {
  color: var(--accent-text);
}

@media (min-width: 48rem) {
  nav a:hover::after,
  nav a:focus::after {
    width: 125%;
  }
}

/* Header */

.header {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  height: 55vh;
  overflow: hidden;

  @media (min-width: 48rem) {
    height: 100vh;
  }
}

.header__news {
  background-image: url(./assets/images/Adam_Batston-7-edit.jpg);
  background-color: var(--black);
  background-position: 0 65%;

  @media (min-width: 48rem) {
    background-image: url(./assets/images/Adam_Batston-7-edit-t.png);
    background-size: auto 2000px;
    background-position: 50% 45%;
  }
}

.header__bio,
.header__writing {
  background-image: url(./assets/images/Adam_Batston-18-edit2.jpg);
  background-position: 68%;

  @media (min-width: 48rem) {
    background-position: 70% 55%;
  }
}

.header__teaching {
  background-image: url(./assets/images/Adam_Batston-33-edt2-min.jpg);

  background-position: 15%;
  @media (min-width: 48rem) {
    background-position: 8% 0;
  }
}

.header__publications {
  background-image: url(./assets/images/Adam_Batston-32-edit-min.jpg);

  background-position: 40%;
  @media (min-width: 48rem) {
    background-position: 15% 50%;
  }
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30%; /* Controls where the fade ends */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) -15%, rgba(0, 0, 0, 0) 60%);
  z-index: 1;
}

.header h1 {
  z-index: 2;
  font-size: 1.8rem;
  width: 20rem;
  font-weight: 300;
  line-height: 2.2rem;
  color: var(--light-text);
  margin-block-start: 2rem;
  justify-self: start;
  span {
    color: var(--accent-text);
  }

  @media (max-width: 30rem) {
    font-size: 1.5rem;
  }

  @media (min-width: 81.25rem) {
    position: relative;
    right: 5%;
  }
}

.header__nav {
  z-index: 3;
  position: absolute;
  top: -100rem;
  background: var(--dark-bg);
  height: 24rem;
  width: 100%;
  transition: top 0.4s ease-in-out;

  @media (min-width: 48rem) {
    top: 3.5rem;
    background: transparent;
    grid-column: content;
  }

  @media (min-width: 81.25rem) {
    width: 105%;
  }
}

.header__nav.active {
  display: block;
  top: 0;
}

.header__list {
  display: none;
  gap: 1.5rem;
  text-align: center;
  padding-left: 0;

  @media (min-width: 48rem) {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-items: end;
    width: 62%;
    margin-inline-start: auto;
  }
}

.header__list:first-of-type {
  margin-block-start: 3rem;

  @media (min-width: 48rem) {
    margin-block-start: 0;
  }
}

.header__link:after {
  position: absolute;
  content: "";
  bottom: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 0.05rem;
  background-color: #fff;

  @media (min-width: 48rem) {
    display: none;
  }
}

.header__nav.active .header__list {
  display: grid;
}

.header__mobile-btn {
  position: absolute;
  z-index: 99;
  right: 2rem;
  top: 0.8rem;
  width: 3.125rem;
  margin-block-start: 1.8rem;
  cursor: pointer;
  background-color: transparent;
  border: none;

  @media (min-width: 48rem) {
    display: none;
  }
}

.header__mobile-btn span {
  position: relative;
  display: block;
  margin-block: 0.4rem;
  margin-inline: 0.4rem;
  height: 0.188rem;
  background-color: var(--light-text);
  border-radius: 0.125;
  transition: all 0.3s ease-in-out;
}

.header__mobile-btn.active span:nth-child(1) {
  transform: rotate(-45deg);
  top: 0.563rem;
  background-color: var(--accent-text);
}

.header__mobile-btn.active span:nth-child(2) {
  display: none;
}

.header__mobile-btn.active span:nth-child(3) {
  transform: rotate(45deg);
  background-color: var(--accent-text);
}

/* Socials */
.socials {
  background-color: var(--dark-bg-alt);
}

.socials__icons {
  display: grid;
  grid-template-columns: repeat(3, 2.5rem);
  gap: 1rem;
  justify-content: center;
  padding-block: 1rem;
}

.socials__icon {
  width: 1.875rem;
  height: 1.875rem;
  fill: var(--accent-text);
}

.socials__icon:hover,
.socials__icon:focus {
  fill: var(--light-text);
  cursor: pointer;
}

.section-title,
.section-sub-title {
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.section-title {
  font-size: 2.3rem;
  margin-block: 3rem;
  text-align: center;
  text-transform: uppercase;

  @media (max-width: 30rem) {
    font-size: 1.8rem;
  }
}

.section-title span {
  color: var(--accent-text);
}

h3.section-title {
  margin-block-start: 1rem;
  margin-block-end: 3rem;
}

.section-sub-title {
  font-size: 1.2rem;
  color: var(--accent-text);
  margin-block-start: 1.5rem;
  margin-block-end: 0.5rem;
}

h2.section-sub-title .section-title span {
  color: var(--accent-text);
}

/* Footer */

.footer {
  background-color: var(--dark-bg-alt);
}

.footer__title {
  font-size: 0.8rem;
  margin-block-start: 2rem;
  margin-block-end: 1rem;

  text-align: center;
}

.footer__title span {
  color: var(--accent-text);
}

.footer__list {
  display: grid;
  gap: 1rem;
  justify-content: center;
  padding-inline: 0;
  margin-block: 1.5rem;
  text-align: center;

  @media (min-width: 48rem) {
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 2rem;
  }
}

.footer__link a:hover::after,
.footer__link a:focus::after {
  width: 110%;
}

.footer__credits {
  margin-inline: auto;
  text-align: center;
  border-top: 0.05rem solid var(--light-text);
  padding-block: 0.5rem;
  margin-block-start: 2rem;
  margin-block-end: 1rem;
}

.footer__credits span {
  color: var(--accent-text);
}

.footer__credits p {
  font-size: 0.65rem;
}

/* NEWS */

.news__container {
  margin-block: 3rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;

  @media (min-width: 48rem) {
    grid-template-columns: 2fr 1fr;
  }
}

.news__title {
  font-family: var(--font-primary);
  color: var(--accent-text);
  font-size: 1.5rem;
  font-weight: 300;
  margin-block: 2rem;
  text-transform: uppercase;

  @media (min-width: 75rem) {
    position: relative;
    right: 5%;
  }
}

.news__item,
.news__listening {
  border: 0.2rem solid var(--dark-bg-alt);
}

.news__item {
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
  border-radius: 0.5rem;

  @media (min-width: 48rem) {
    padding-inline: 2rem;
  }
}

.news__item img {
  margin-inline: auto;
  width: 80%;
}

.news__item img.large {
  @media (min-width: 48rem) {
    width: 60%;
  }
}

.news__text {
  margin-block: 1.5rem;
}

.news__text-start {
  margin-block-start: 0;
}

.news__teaching {
  align-self: start;
}

/* Bio */

.bio {
  margin-block-end: 4rem;
}

.bio__container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  padding-inline: 0.5rem;

  @media (max-width: 48rem) {
    grid-template-columns: 1fr;
  }
}

.container__text p {
  margin-block: 1.5rem;
  text-indent: 1.5em;
}

.container__text p:first-of-type {
  margin-block-start: 0;
}

.bio__container img {
  margin-block-end: 3rem;
}

.bio__contaier-guitars {
  margin-block-end: 5rem;
}

/* Teaching */

.teaching__container,
.publications__container,
.writing__container {
  width: 90%;
  margin-block: 0;
  margin-inline: auto;

  @media (min-width: 48rem) {
    width: 65%;
  }
}

.teaching__container a {
  display: block;
  text-align: center;
  margin-block-start: 3rem;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;

  @media (max-width: 30rem) {
    font-size: 0.9rem;
  }
}

/* Publications */

.publications__score {
  margin-inline: auto;
  margin-block-start: 3rem;
}

.publications__score {
  @media (min-width: 48rem) {
    width: 90%;
  }
}

.publications__score h3 {
  text-align: center;
  margin-block-end: 1.5rem;
}

.publications__score form {
  text-align: center;
  margin-block-start: 2rem;
}

/* Writing */