/*
  JEFF KINGSBURY WEBSITE
  ======================

  This version uses one extra-wide background image:
  background-wide.png

  There are no duplicated image layers, no blur layer, and no visible frame.
*/

:root {
  --text: #f2f2ee;
  --muted-text: rgba(242, 242, 238, 0.68);
  --line: rgba(242, 242, 238, 0.20);
  --modal-background: rgba(8, 8, 8, 0.80);
  --page-padding: clamp(28px, 5vw, 72px);
  --menu-gap: 7px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  background: #030303;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);

  /*
    The extra-wide image fills the screen as one continuous composition.
    Since the important portrait area is safely centred inside a wide image,
    it can use cover without cutting off the head on normal desktop screens.
  */
  background-image: url("background-wide.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #030303;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 300;
}

button,
a {
  font: inherit;
}

.page {
  position: relative;
  min-height: 100vh;
  padding: var(--page-padding);
}

.site-heading {
  position: fixed;
  top: var(--page-padding);
  left: var(--page-padding);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.name {
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 300;
}

.subtitle {
  margin-top: 8px;
  max-width: 360px;
  color: var(--muted-text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.45;
}

.main-navigation {
  position: fixed;
  top: clamp(205px, 24vh, 285px);
  left: var(--page-padding);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--menu-gap);
}

.main-navigation button {
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;

  font: inherit;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: 0.12em;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.main-navigation button:hover,
.main-navigation button:focus-visible {
  opacity: 0.55;
  transform: translateX(5px);
  outline: none;
}
.main-navigation button.active {
  border-bottom: 1px solid rgba(255,255,255,.8);
  padding-bottom: 3px;
}

.site-footer {
  position: fixed;
  left: var(--page-padding);
  bottom: var(--page-padding);

  display: flex;
  flex-direction: column;
  gap: 10px;

  color: var(--muted-text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--text);
}

/* Darkened screen behind the content window */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;

  display: grid;
  place-items: center;
  padding: 24px;

  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);

  transition:
    background 240ms ease,
    visibility 0s linear 240ms;
}

.overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.22);
  transition-delay: 0s;
}

/* Floating information window */
.modal {
  position: relative;
  width: min(760px, 92vw);
  max-height: 78vh;
  overflow-y: auto;

  padding: clamp(32px, 5vw, 64px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  background: var(--modal-background);

  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity 240ms ease,
    transform 240ms ease;
    
}

.overlay.is-open .modal {
  opacity: 1;
  transform: translateY(0);
}

.close-button {
  position: absolute;
  top: 14px;
  right: 18px;

  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;

  font: inherit;
  font-size: 28px;
  opacity: 0.65;
}

.close-button:hover,
.close-button:focus-visible {
  opacity: 1;
  outline: none;
}

.section-number {
  margin: 0 0 14px;
  color: var(--muted-text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
}

h1 {
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.18em;
  text-transform: uppercase;
}

p {
  max-width: 590px;
  margin: 0 auto 1.5rem;
  font-size: 16px;
  line-height: 1.65;
}

.intro-text {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.65;
}

.credit-list,
.record-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credit-list li,
.record-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.record-list li {
  grid-template-columns: 1fr auto;
}

.year {
  color: var(--muted-text);
}

.artist,
.album {
  display: block;
}

.album {
  margin-top: 2px;
  color: var(--muted-text);
  font-style: italic;
}

.large-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 36px;
}

.large-links a {
  color: var(--text);
  font-size: clamp(14px);
  text-decoration: none;
}

.large-links a:hover,
.large-links a:focus-visible {
  opacity: 0.55;
}

body.modal-open {
  overflow: hidden;
}

/* Mobile version */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }
  .large-links {
    font-size: 14px;
}

.large-links a {
    font-size: 14px;
}

  body {
    background-attachment: scroll;
    background-repeat: no-repeat;
  }

  .page {
    min-height: 100svh;
    padding: 24px;
  }

  .site-heading,
  .main-navigation,
  .site-footer {
    left: 24px;
  }
  .modal p,
.modal li,
.modal .intro-text {
    font-size: 14px;
    line-height: 1.6;
}

.record-list {
    font-size: 14px;
}

  /* The overlay, not the modal, centres the popup. */
  .overlay {
    display: grid;
    place-items: center;
    padding: 18px;
  }

  .modal {
    position: relative;
    inset: auto;
    width: min(100%, 520px);
    height: auto;
    max-height: calc(100svh - 36px);
    margin: 0;
    padding: 48px 24px 32px;
    overflow-y: auto;
  }

  .close-button {
    top: 14px;
    right: 18px;
  }
}

/* Portrait phones */
@media (max-width: 700px) and (orientation: portrait) {
  body {
    /* Shift the wide source image so the portrait sits visually centred. */
    background-position: 50.5% center;
    background-size: auto 100svh;
  }

  .main-navigation {
    top: 190px;
  }

  .site-footer {
    bottom: 24px;
  }
}

/* Landscape phones */
@media (max-width: 950px) and (orientation: landscape) {
  :root {
    --page-padding: 22px;
  }

  body {
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
  }

  .page {
    min-height: 100svh;
    padding: var(--page-padding);
  }

  .site-heading {
    top: 18px;
    left: var(--page-padding);
  }

  .main-navigation {
    top: 112px;
    left: var(--page-padding);
    gap: 4px;
  }

  .main-navigation button {
    font-size: 14px;
  }

  .site-footer {
    left: auto;
    right: var(--page-padding);
    bottom: 18px;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
  }

  .overlay {
    padding: 14px;
  }

  .modal {
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    padding: 42px 32px 28px;
  }
}