:root { color-scheme: dark; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; width: 100%; min-height: 100%; }
    body { overflow-x: hidden; color: #fffaf2; background: #17131b; font-family: Georgia, "Times New Roman", serif; }

    /* Original dark-gold navigation: hidden on downward scroll, shown on upward scroll. */
    .site-header {
      position: fixed;
      z-index: 100;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.15rem clamp(1.25rem, 4vw, 3.5rem);
      color: #fff7ec;
      font-family: Arial, Helvetica, sans-serif;
      background: rgba(17, 13, 19, .66);
      border-bottom: 1px solid rgba(233, 193, 143, .42);
      box-shadow: 0 5px 24px rgba(0, 0, 0, .14);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      transform: translateY(0);
      transition: transform .35s ease;
    }
    .site-header.is-hidden { transform: translateY(calc(-100% - 2px)); }
    .site-brand {
      color: #f3d6b0;
      font-size: clamp(1rem, 2.2vw, 1.3rem);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 600;
      letter-spacing: .055em;
      white-space: nowrap;
    }
    .site-nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(1rem, 3vw, 2.5rem);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .site-nav .nav-item { color: rgba(255, 247, 236, .62); cursor: default; }
    .site-nav a { color: #f3d6b0; text-decoration: none; transition: color .2s ease; }
    .site-nav a:hover, .site-nav a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .35em; }

    /* Three independent, full-screen image sections; none is fixed to the body. */
    .page-panel {
      position: relative;
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      background-color: #17131b;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      isolation: isolate;
    }
    .hero {
      padding: 6.4rem 2rem 4.5rem;
      background-image: url("background.jpg");
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(15, 12, 18, .28), rgba(15, 12, 18, .52)),
        radial-gradient(ellipse at center, rgba(15, 12, 18, .12), rgba(15, 12, 18, .48));
      pointer-events: none;
    }
    .hero-card {
      position: relative;
      z-index: 1;
      width: min(100%, 980px);
      padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
      text-align: center;
      background: rgba(20, 16, 23, .48);
      border: 1px solid rgba(255, 244, 224, .48);
      box-shadow: 0 18px 70px rgba(0, 0, 0, .24);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .eyebrow {
      margin: 0 0 1.15rem;
      color: #f3d6b0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .34em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      font-size: clamp(2.1rem, 6vw, 4.8rem);
      line-height: 1.08;
      font-weight: 500;
      letter-spacing: .015em;
      text-wrap: balance;
      text-shadow: 0 3px 18px rgba(0,0,0,.45);
    }
    .rule { width: 76px; height: 1px; margin: 2rem auto 1.7rem; background: #e9c18f; }
    .message {
      margin: 0;
      color: #fff7ec;
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(.95rem, 2vw, 1.18rem);
      line-height: 1.6;
      letter-spacing: .045em;
      text-shadow: 0 2px 10px rgba(0,0,0,.6);
    }

    /* First user-supplied Nana image, then second user-supplied Nana image. */
    .nana-night {
      background-image: url("Nana_SS_SR8.png");
      padding: 4rem 1.5rem;
    }
    .nana-night::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: rgba(15, 10, 24, .32);
      pointer-events: none;
    }
    .nana-green { background-image: url("Nana_SS_SR7.png"); }

    .site-footer {
      padding: 1.25rem 1rem 1.4rem;
      text-align: center;
      background: #100d13;
      color: rgba(255, 247, 236, .85);
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(.68rem, 1.6vw, .82rem);
      line-height: 1.6;
      letter-spacing: .025em;
      border-top: 1px solid rgba(233, 193, 143, .25);
    }
    @media (max-width: 600px) {
      .site-header { padding: .95rem 1rem; gap: .75rem; }
      .site-brand { font-size: .95rem; letter-spacing: .025em; }
      .site-nav { gap: .8rem; font-size: .62rem; letter-spacing: .055em; }
      .hero { padding: 5.5rem 1rem 4rem; }
      .hero-card { padding: 2.5rem 1.2rem; }
      h1 { font-size: clamp(2rem, 9vw, 3rem); }
    }
    @media (max-width: 380px) {
      .site-header { align-items: flex-start; flex-direction: column; gap: .65rem; }
      .site-nav { width: 100%; justify-content: space-between; }
      .hero { padding-top: 7.2rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .site-header { transition: none; }
    }
  
    .site-nav a[aria-current="page"] {
      color: #fffaf2;
      text-decoration: underline;
      text-decoration-color: #dfb886;
      text-underline-offset: .48em;
    }
    /* Gallery appears AFTER the two full-viewport Nana illustrations. */
    .skins-preview {
      position: relative;
      padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1rem, 5vw, 5rem) clamp(5rem, 9vw, 8rem);
      background: radial-gradient(ellipse at 50% 0%, rgba(92, 54, 81, .34), transparent 56%), #17131b;
      border-top: 1px solid rgba(233, 193, 143, .28);
      text-align: center;
    }
    .section-eyebrow {
      margin: 0 0 .75rem;
      color: #e1c4a0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: .74rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .27em;
    }
    .skins-preview h2, .list-title {
      margin: 0;
      color: #fff3e3;
      font-size: clamp(2rem, 5vw, 3.7rem);
      font-weight: 400;
      letter-spacing: .02em;
      line-height: 1.2;
      text-wrap: balance;
    }
    .section-rule {
      width: 88px;
      height: 1px;
      background: #e9c18f;
      margin: 1.6rem auto 2.8rem;
    }
    .skins-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(.8rem, 2vw, 1.6rem);
      width: min(100%, 1320px);
      margin: 0 auto;
    }
    .skin-card {
      display: block;
      position: relative;
      overflow: hidden;
      aspect-ratio: 1500 / 843;
      border: 1px solid rgba(233, 193, 143, .38);
      background: #302631;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      cursor: pointer;
      transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
    }
    .skin-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }
    .skin-card:hover, .skin-card:focus-visible {
      border-color: #f3d6b0;
      box-shadow: 0 14px 35px rgba(0, 0, 0, .42), 0 0 0 1px rgba(243,214,176,.22);
      transform: translateY(-3px);
      outline-offset: 4px;
    }
    .skin-card:hover img, .skin-card:focus-visible img {
      transform: scale(1.035);
    }
    .skin-card::after {
      content: "VIEW LIST  ↗";
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 1.15rem 1rem .7rem;
      text-align: right;
      color: #fff8ed;
      background: linear-gradient(transparent, rgba(9, 7, 12, .76));
      font: 600 .72rem/1.3 Arial, Helvetica, sans-serif;
      letter-spacing: .16em;
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .skin-card:hover::after, .skin-card:focus-visible::after { opacity: 1; }
    .list-hero {
      min-height: 48vh;
      min-height: 48svh;
      display: grid;
      place-items: center;
      padding: 8rem 1.5rem 4rem;
      text-align: center;
      position: relative;
      background: #17131b url("background.jpg") center 45% / cover no-repeat;
      isolation: isolate;
    }
    .list-hero::before {
      content: "";
      position: absolute; z-index: -1; inset: 0;
      background: rgba(16, 12, 20, .72);
    }
    .list-hero-inner { max-width: 950px; }
    .list-description {
      margin: 1.5rem auto 0;
      color: rgba(255, 247, 236, .86);
      font: 1rem/1.7 Arial, Helvetica, sans-serif;
    }
    .list-gallery { padding-top: 4rem; }
    .list-gallery .skin-card { cursor: default; }
    .list-gallery .skin-card:hover { transform: none; border-color: rgba(233, 193, 143, .38); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .list-gallery .skin-card:hover img { transform: none; }
    .list-gallery .skin-card::after { display: none; }
    .list-gallery figure { margin: 0; }
    .list-gallery figcaption {
      padding: .9rem 0 0;
      font: 600 .78rem/1.4 Arial, Helvetica, sans-serif;
      letter-spacing: .18em;
      color: #e8ceb0;
      text-transform: uppercase;
    }
    @media (max-width: 700px) {
      .skins-grid { grid-template-columns: 1fr; gap: 1.2rem; }
      .skins-preview { padding-left: 1rem; padding-right: 1rem; }
      .section-rule { margin-bottom: 2rem; }
      .skin-card::after { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .skin-card, .skin-card img { transition: none; }
    }


/* List-only: real downloadable Minecraft skin PNGs. */
.list-gallery .skin-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 152px;
  margin: .9rem auto 0;
  padding: .86rem 1.6rem;
  color: #f8e7ce;
  background: rgba(40, 29, 39, .75);
  border: 1px solid #b9926c;
  border-radius: 3px;
  font: 600 .78rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.list-gallery .skin-download:hover,
.list-gallery .skin-download:focus-visible {
  background: #56404c;
  border-color: #f3d6b0;
  transform: translateY(-2px);
}
.list-gallery .skins-grid {
  row-gap: clamp(2.2rem, 4vw, 4.5rem);
}
.list-gallery figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-gallery figure .skin-card { align-self: stretch; }

/* List-only music controls: visible while scrolling, independent of navigation. */
.music-widget {
  position: fixed;
  z-index: 99;
  right: clamp(.7rem, 2vw, 1.5rem);
  bottom: clamp(.7rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.25rem);
  max-width: calc(100vw - 1.4rem);
  min-width: 272px;
  padding: .7rem .8rem .7rem 1rem;
  border: 1px solid rgba(233, 193, 143, .65);
  border-radius: 7px;
  background: rgba(18, 13, 21, .91);
  color: #f7e5cb;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 9px 33px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.music-track { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; }
.music-icon { font-size: 1.55rem; line-height: 1; color: #e9c18f; }
.music-info { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.music-eyebrow { font-size: .56rem; letter-spacing: .19em; color: #d0b693; }
.music-title { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.music-buttons { display: flex; align-items: center; gap: .4rem; }
.music-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 0;
  color: #f8ebd5;
  background: rgba(114, 80, 89, .26);
  border: 1px solid rgba(233,193,143,.44);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.music-btn:hover, .music-btn:focus-visible {
  background: #5e4452;
  border-color: #f3d6b0;
}
.music-btn svg { display: block; }
@media (max-width: 420px) {
  .music-widget { min-width: 0; gap: .55rem; padding: .6rem; }
  .music-track { gap: .4rem; }
  .music-icon { font-size: 1.25rem; }
  .music-btn { width: 35px; height: 35px; }
  .music-title { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .list-gallery .skin-download, .music-btn { transition: none; }
}