:root {
  --ink: #070707;
  --paper: #f0eee8;
  --acid: #d8ff39;
  --line: rgba(7, 7, 7, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  mix-blend-mode: difference;
}

.wordmark {
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: -0.09em;
  line-height: 1;
}

.wordmark span {
  margin-left: 6px;
  color: var(--acid);
  font-size: 10px;
  letter-spacing: 0;
  vertical-align: top;
}

.photo {
  --image-height: min(119.5vw, max(101.5svh, 39.82vw));
  --image-half-height: min(59.75vw, max(50.75svh, 19.91vw));
  --image-half-width: min(102.05vw, max(86.67svh, 34vw));
  --left-crop-limit: min(62.59vw, max(53.16svh, 20.87vw));
  --right-crop-anchor: min(162.59vw, max(138.09svh, 54.17vw));
  --image-live-x: calc(66.5vw - var(--image-half-width));
  --image-x: max(
    calc(-1 * var(--left-crop-limit)),
    min(var(--image-live-x), calc(100vw - var(--right-crop-anchor)))
  );
  --image-y: min(0px, calc(50svh - var(--image-half-height)));
  --mobile-fade: min(120px, max(0px, calc(100svh - var(--image-height))));
  --shade-x: clamp(-68vw, calc(100vw - 118svh), 32.5vw);
  --shade-clip: max(0px, var(--shade-x));
  position: absolute;
  z-index: -3;
  inset: 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, transparent 0, var(--ink) 100%),
    linear-gradient(0deg, rgba(7, 7, 7, 0.7) 0, transparent 42%),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(90deg, var(--ink) 0, rgba(7, 7, 7, 0.72) 16%, transparent 55%),
    url("tafs-live.jpg");
  background-position:
    left calc(var(--image-y) + var(--image-height) - var(--mobile-fade)),
    left var(--image-y),
    left top,
    var(--shade-x) top,
    var(--image-x) var(--image-y);
  background-repeat: no-repeat;
  background-size:
    100% var(--mobile-fade),
    100% var(--image-height),
    var(--shade-clip) 100%,
    68vw 100%,
    auto var(--image-height);
  filter: saturate(0.85) contrast(1.08);
}

.grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 5vw, 76px);
  bottom: clamp(74px, 10vh, 126px);
  width: min(820px, 92vw);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--acid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 -0.06em;
  font-size: clamp(116px, 24vw, 360px);
  font-weight: 1000;
  letter-spacing: -0.095em;
  line-height: 0.7;
}

.claim {
  margin: 28px 0 30px;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 54px;
  border: 1px solid rgba(240, 238, 232, 0.65);
  border-radius: 999px;
  padding: 15px 18px 15px 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.primary-link span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-size: 17px;
}

.primary-link:hover,
.primary-link:focus-visible {
  outline: none;
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
}

.scroll-cue {
  position: absolute;
  right: 30px;
  bottom: 28px;
  z-index: 3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-cue span { margin-left: 8px; color: var(--acid); }

.archive {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
  gap: clamp(48px, 10vw, 160px);
  min-height: 82svh;
  padding: clamp(80px, 11vw, 160px) clamp(24px, 5vw, 76px);
  background: var(--paper);
  color: var(--ink);
}

.eyebrow.dark { color: #59620f; }

.archive h2 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(54px, 8vw, 124px);
  font-weight: 1000;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.release-list {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.release-list li {
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 88px) minmax(0, 1fr);
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.release-list details {
  width: 100%;
}

.release-list summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto 26px;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.release-cover-button {
  position: relative;
  display: block;
  width: 100%;
  align-self: start;
  margin: 14px 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  background: #d7d4cb;
  cursor: zoom-in;
}

.release-cover-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

.release-cover-button:hover img,
.release-cover-button:focus-visible img {
  transform: scale(1.045);
}

.release-platforms {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}

.release-platforms a {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  opacity: 0.82;
  transition: opacity 160ms ease, transform 160ms ease;
}

.release-platforms a:hover,
.release-platforms a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.release-platforms a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.release-platforms img {
  display: block;
  width: 20px;
  height: 20px;
}

.release-list summary::-webkit-details-marker {
  display: none;
}

.release-kind,
.release-year {
  color: #67655f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.release-kind {
  text-transform: uppercase;
}

.release-kind-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.release-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.release-title small {
  color: #67655f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.release-title strong {
  font-size: clamp(24px, 3vw, 46px);
  letter-spacing: -0.05em;
}

.release-toggle {
  color: #59620f;
  font-size: 20px;
  font-weight: 500;
  transition: transform 160ms ease;
}

.release-list details[open] .release-toggle {
  transform: rotate(45deg);
}

.release-detail {
  margin: 4px 46px 0 0;
  padding: 0 0 32px;
  color: #44423e;
}

.release-detail p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.5;
}

.release-detail dl {
  display: flex;
  gap: 38px;
  margin: 0;
}

.release-detail dl div {
  display: flex;
  gap: 8px;
}

.release-detail dt,
.release-detail dd {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.release-detail dt {
  color: #75726b;
}

.release-detail dd {
  font-weight: 800;
}

.cover-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  grid-template-columns: auto minmax(0, 1080px) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  padding: clamp(28px, 4vw, 64px);
  background: rgba(8, 8, 8, 0.96);
}

.cover-modal.is-open { display: grid; }

.cover-modal-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: #efede7;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.cover-modal-image {
  display: grid;
  min-height: 0;
  place-items: center;
  background: #111;
}

.cover-modal-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
}

.cover-modal-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(28px, 3vw, 48px);
}

.cover-modal-count,
.cover-modal-artist {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cover-modal-count { margin-bottom: clamp(28px, 5vh, 52px); color: #6d6a63; }
.cover-modal-artist { color: #6d6a63; }

.cover-modal-copy h3 {
  max-width: 100%;
  margin: 8px 0 20px;
  overflow-wrap: break-word;
  font-size: clamp(36px, 4.4vw, 68px);
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.cover-modal-note { margin: 0 0 30px; font-size: 16px; line-height: 1.55; }

.cover-modal-copy dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin: 0;
}

.cover-modal-copy dl div { border-top: 1px solid #cbc8bf; padding-top: 10px; }
.cover-modal-copy dt,
.cover-modal-copy dd { margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cover-modal-copy dt { margin-bottom: 5px; color: #75726b; }
.cover-modal-copy dd { font-weight: 900; }

.cover-modal-platforms { margin-top: 28px; }
.cover-modal-platforms a,
.cover-modal-platforms img { width: 25px; height: 25px; }

.cover-modal-close,
.cover-modal-arrow {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
}

.cover-modal-close:hover,
.cover-modal-close:focus-visible,
.cover-modal-arrow:hover,
.cover-modal-arrow:focus-visible { border-color: var(--acid); background: var(--acid); color: var(--ink); }

.cover-modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.cover-modal-arrow { width: clamp(48px, 5vw, 68px); height: clamp(48px, 5vw, 68px); font-size: 24px; }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px;
  background: var(--acid);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

footer p { margin: 0; }

footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobile-photo-repeat {
  display: none;
}

@media (max-width: 760px) {
  .site-header { padding: 20px; }

  .hero-copy { left: 20px; bottom: 72px; }
  h1 { font-size: clamp(104px, 38vw, 180px); }
  .claim { margin-top: 24px; }
  .scroll-cue { right: 20px; bottom: 20px; }

  .archive {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 58px;
    padding-block: 92px;
  }

  .release-list li {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  .release-list summary {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    grid-template-rows: auto auto;
    gap: 8px 12px;
  }

  .release-title { grid-column: 1; grid-row: 1; }
  .release-kind-block { grid-column: 1; grid-row: 2; gap: 6px; }
  .release-year { grid-column: 2; grid-row: 1; }
  .release-toggle { grid-column: 3; grid-row: 1; }

  .release-detail {
    margin: 4px 20px 0 0;
    padding-bottom: 28px;
  }

  .release-detail dl {
    display: grid;
    gap: 8px;
  }

  .cover-modal.is-open { display: block; }
  .cover-modal { overflow-y: auto; padding: 68px 16px 88px; }
  .cover-modal-card { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .cover-modal-image img { height: auto; max-height: none; aspect-ratio: 1; }
  .cover-modal-copy { padding: 30px 24px 36px; }
  .cover-modal-count { margin-bottom: 28px; }
  .cover-modal-copy h3 { font-size: clamp(38px, 11vw, 56px); line-height: 1.02; }
  .cover-modal-arrow { position: fixed; bottom: 20px; z-index: 2; width: 52px; height: 52px; background: #111; }
  .cover-modal-arrow.previous { left: calc(50% - 62px); }
  .cover-modal-arrow.next { right: calc(50% - 62px); }

  footer { padding: 22px 20px; }

  .mobile-photo-repeat {
    display: block;
    background: var(--ink);
  }

  .mobile-photo-repeat img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}