:root{
  /* Muted ink-like spectrum (warm -> yellow -> green -> blue-violet) */
  --amber:  #5b1f12;  /* dark amber/burnt */
  --gold:   #8a4b22;  /* warm gold */
  --wheat:  #b58a3b;  /* muted yellow */
  --olive:  #6f7a3b;  /* mature olive */
  --moss:   #4f612c;  /* deep moss */
  --teal:   #2f4f4a;  /* muted blue-green */
  --indigo: #2b2f4a;  /* blue-violet */
  --violet: #2f2340;  /* deep violet */
}

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background:
    radial-gradient(ellipse at 55% 45%,
      rgba(0,0,0,0.14) 0%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(125deg,
      var(--amber)  0%,
      var(--gold)   18%,
      var(--wheat)  34%,
      var(--olive)  52%,
      var(--moss)   68%,
      var(--teal)   82%,
      var(--indigo) 95%,
      var(--violet) 140%
    );

  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gallery-container{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8vh 6vw 3vh 6vw;
}

.cover{
  max-width: 66vw;
  max-height: 80vh;
  height: auto;
  width: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

footer{
  padding: 2.2rem 0 1.8rem 0;
}

.footer-name{
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.33);
  transition: color 0.3s ease;
}

.footer-name:hover{
  color: rgba(255,255,255,0.52);
}

@media (max-width: 600px){
  .gallery-container{ padding: 8vh 7vw 2vh 7vw; }
  .cover{ max-width: 86vw; max-height: 78vh; }
  footer{ padding: 1.6rem 0 1.4rem 0; }
}