/* 
  THRUPENCE. static site
  Version 5: matched to supplied 3840 × 2160 frame.

  Upload contents to GitHub Pages repo.
*/

:root {
  /* Scale from the 3840px design frame */
  --page-pad-x: clamp(20px, 1.29vw, 50px);
  --page-pad-y: clamp(20px, 1.11vw, 43px);
  --text-size: clamp(11px, 0.67vw, 26px);
  --line-height: 1.04;
  --left-width: clamp(300px, 16.5vw, 635px);
  --image-width: clamp(620px, 42.7vw, 1640px);
  --image-top: clamp(22px, 1.11vw, 43px);
  --image-right: clamp(32px, 2.38vw, 92px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #d8d8d8;
  color: #050505;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--text-size);
  font-weight: 700;
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

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

.info {
  width: var(--left-width);
  max-width: calc(100vw - 32px);
}

.intro {
  margin: 0 0 clamp(16px, 1.02vw, 39px);
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 clamp(15px, 0.98vw, 38px);
}

.links a {
  display: block;
  text-decoration: none;
}

.links a:hover,
.email a:hover {
  text-decoration: underline;
}

.spacer {
  display: block;
  height: clamp(14px, 0.78vw, 30px);
}

.email {
  margin: 0 0 clamp(40px, 3.02vw, 116px);
}

.email a {
  text-decoration: underline;
}

.rule {
  display: none;
}

.discography article {
  margin: 0 0 clamp(14px, 1.1vw, 42px);
}

.discography article:last-child {
  margin-bottom: 0;
}

.visual {
  position: fixed;
  top: var(--image-top);
  right: var(--image-right);
  width: var(--image-width);
}

.imageFade {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.fadeImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  user-select: none;
}

.fadeImage.is-active {
  opacity: 1;
}

/* Keep the exact one-screen composition on common desktop/laptop widths */
@media (max-height: 900px) and (min-width: 761px) {
  :root {
    --text-size: clamp(10px, 0.63vw, 24px);
    --line-height: 1.02;
    --image-width: clamp(560px, 42vw, 1600px);
  }

  .intro {
    margin-bottom: clamp(14px, 0.82vw, 32px);
  }

  .links {
    margin-bottom: clamp(13px, 0.82vw, 32px);
  }

  .spacer {
    height: clamp(12px, 0.62vw, 24px);
  }

  .email {
    margin-bottom: clamp(34px, 2.35vw, 90px);
  }

  .discography article {
    margin-bottom: clamp(12px, 0.86vw, 33px);
  }
}

/* Mobile: stack image underneath so the site remains usable */
@media (max-width: 760px) {
  :root {
    --page-pad-x: 14px;
    --page-pad-y: 14px;
    --text-size: 12px;
    --line-height: 1.04;
    --left-width: 100%;
  }

  .page {
    min-height: auto;
  }

  .info {
    width: 100%;
    max-width: 100%;
  }

  .email {
    margin-bottom: 36px;
  }

  .discography article {
    margin-bottom: 15px;
  }

  .visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 36px;
  }
}