body {
      font-family: 'Inter', sans-serif;
      color: #ffffff;
      min-height: 100vh;
      margin: 0;
      position: relative;
    }



    /* Layout */
    .logo {
      width: 16rem;
      display: block;
      margin: 2rem auto;
      height: auto;
    }

    .logo-link {
      text-decoration: none;
      cursor:default;
    }

    .logo-link:hover,
    .logo-link:focus {
    text-decoration: none;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem 2rem;
    }

    h2 {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 1.5rem;
    }

    .release-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: fit-content;
      margin: 0 auto;
      text-align: left;
      font-family: monospace;
    }

    .release-list a {
      font-size: 1.25rem;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }

    .release-list a:hover {
      opacity: 0.75;
    }

    /* --- Scrollbar visibility tweak (subtle but always visible) --- */
:root{
  --sb-size: 10px;                 /* keep thin */
  --sb-radius: 999px;
  --sb-thumb: rgba(255,255,255,.52);      /* higher base opacity */
  --sb-thumb-hover: rgba(255,255,255,.66);
  --sb-thumb-active: rgba(255,255,255,.82);
  --sb-track: rgba(0,0,0,.18);            /* faint charcoal track so thumb has contrast */
}

/* WebKit needs the track background to render even when idle */
::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
  background: var(--sb-track);            /* ensures gutter is perceptible */
}
::-webkit-scrollbar-track{
  background: var(--sb-track);
}

/* Give the thumb a soft halo so it reads on light areas of the BG */
::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: 2px solid rgba(0,0,0,.25);      /* subtle outline for contrast */
  background-clip: padding-box;
}

/* === Elegant cream selection === */
::selection {
  background: rgba(236, 230, 220, 0.85);  /* soft cream with slight transparency */
  color: #111;                            /* deep ink text for contrast */
}

/* Firefox requires a separate pseudo-element */
::-moz-selection {
  background: rgba(236, 230, 220, 0.85);
  color: #111;
}


/* Firefox uses scrollbar-color; feed it the adjusted values */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Optional: slightly stronger on very bright displays */
@media (min-resolution: 2dppx){
  :root{
    --sb-thumb: rgba(255,255,255,.56);
  }
}

/* Keep previous forced-colors / reduced-motion rules as-is */

/* — Minimal editorial social footer — */
.social-footer{
  max-width: 800px;
  margin: 4.5rem auto 3rem;     /* generous breathing room */
  padding: 0 1rem;
  text-align: center;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  line-height: 1.6;

  /* fade-in on reveal */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.social-footer.in{
  opacity: 1;
  transform: translateY(0);
}
.social-footer a{
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease, text-decoration-color 200ms ease;
  text-underline-offset: 3px;
}
.social-footer a:hover{
  color: rgba(255,255,255,0.96);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
}

/* — Hairline Legal Footer — */
.legal-footer{
  max-width: 800px;
  margin: 3rem auto 2.5rem;
  padding: 0 1rem;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.legal-footer.in{
  opacity: 1;
  transform: translateY(0);
}

/* The thin, editorial line */
.legal-line{
  height: 1px;
  width: 100%;
  background: rgba(166,145,120,0.22); /* Champagne Sand 22% */
  margin-bottom: 1.25rem;
}

/* The text links */
.legal-links{
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  text-transform: lowercase;
}
.legal-links a{
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease, text-decoration-color 220ms ease;
  text-underline-offset: 3px;
}
.legal-links a:hover{
  color: rgba(255,255,255,0.96);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .legal-footer{ transition: none; transform: none; }
}


/* prefers-reduced-motion: keep it gentle */
@media (prefers-reduced-motion: reduce){
  .social-footer{
    transition: none;
    transform: none;
  }
}

    /* Elegant Contact Modal Styles */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
}
.contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44,56,64,0.32); /* Petrol Blue overlay */
  backdrop-filter: blur(4px) brightness(0.96);
  z-index: 0;
  transition: background 400ms;
}
.contact-modal__content {
  position: relative;
  z-index: 1;
  background: rgba(236,230,220,0.98); /* Creamy, elegant */
  color: #222;
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px rgba(44,56,64,0.18), 0 1.5px 0 rgba(166,145,120,0.13);
  padding: 2.5rem 2rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  text-align: left;
  animation: modalFadeIn 0.5s cubic-bezier(.5,.8,.3,1);
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(.97);}
  to   { opacity: 1; transform: none;}
}
.contact-modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #444;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 200ms;
}
.contact-modal__close:hover {
  opacity: 1;
  color: #222;
}
.contact-modal__content h2 {
  margin-top: 0;
  margin-bottom: 1.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #222;
  text-align: left;
}
.contact-modal__section {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  font-size: 1.08rem;
}
.contact-modal__section strong {
  font-weight: 600;
  color: #444;
  letter-spacing: 0.03em;
}
.contact-modal__section a {
  color: #2c3840;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 180ms;
}
.contact-modal__section a:hover {
  color: #86563e;
  text-decoration-color: #86563e;
}

/* Responsive */
@media (max-width: 500px) {
  .contact-modal__content {
    padding: 1.2rem 0.7rem 1.1rem;
    width: 98vw;
    min-width: 0;
  }
}

/* Always-visible legal footer for privacy, terms, contact pages */
.privacy-page .legal-footer,
.terms-page .legal-footer,
.contact-page .legal-footer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.privacy-page .legal-line,
.terms-page .legal-line,
.contact-page .legal-line {
  height: 1px;
  width: 100%;
  background: rgba(166,145,120,0.22);
  margin-bottom: 1.25rem;
}
.privacy-page .legal-links,
.terms-page .legal-links,
.contact-page .legal-links {
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  text-transform: lowercase;
}
.privacy-page .legal-links a,
.terms-page .legal-links a,
.contact-page .legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease, text-decoration-color 220ms ease;
  text-underline-offset: 3px;
}
.privacy-page .legal-links a:hover,
.terms-page .legal-links a:hover,
.contact-page .legal-links a:hover {
  color: rgba(255,255,255,0.96);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
}


    .contact-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem 2.5rem;
      background: rgba(44,56,64,0.08);
      border-radius: 1.2rem;
      box-shadow: 0 2px 16px rgba(44,56,64,0.09);
    }
    .contact-title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 2rem;
      color: #fff;
      text-shadow: 0 1px 8px rgba(44,56,64,0.18);
    }
    .contact-section {
      background: rgba(236,230,220,0.92);
      color: #222;
      border-radius: 1rem;
      padding: 2rem 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 1px 8px rgba(44,56,64,0.09);
      font-size: 1.08rem;
      line-height: 1.7;
      display: flex;
      flex-direction: column;
      gap: 1.3rem;
    }
    .contact-section strong {
      color: #444;
      font-weight: 600;
    }
    .contact-section a {
      color: #2c3840;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 180ms;
    }
    .contact-section a:hover {
      color: #86563e;
      text-decoration-color: #86563e;
    }
    @media (max-width: 500px) {
      .contact-container, .contact-section {
        padding: 1rem 0.5rem;
      }
      .logo {
        width: 98vw;
        min-width: 0;
      }
    }

       .terms-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem 2.5rem;
      background: rgba(44,56,64,0.08);
      border-radius: 1.2rem;
      box-shadow: 0 2px 16px rgba(44,56,64,0.09);
    }
    .terms-title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 2rem;
      color: #fff;
      text-shadow: 0 1px 8px rgba(44,56,64,0.18);
    }
    .terms-section {
      background: rgba(236,230,220,0.92);
      color: #222;
      border-radius: 1rem;
      padding: 2rem 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 1px 8px rgba(44,56,64,0.09);
      font-size: 1.08rem;
      line-height: 1.7;
    }
    .terms-section strong {
      color: #444;
      font-weight: 600;
    }
    .terms-section a {
      color: #2c3840;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 180ms;
    }
    .terms-section a:hover {
      color: #86563e;
      text-decoration-color: #86563e;
    }

    @media (max-width: 500px) {
      .terms-container, .terms-section {
        padding: 1rem 0.5rem;
      }
      .logo {
        width: 98vw;
        min-width: 0;
      }
    }

        .privacy-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem 2.5rem;
      background: rgba(44,56,64,0.08);
      border-radius: 1.2rem;
      box-shadow: 0 2px 16px rgba(44,56,64,0.09);
    }
    .privacy-title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 2rem;
      color: #fff;
      text-shadow: 0 1px 8px rgba(44,56,64,0.18);
    }
    .privacy-section {
      background: rgba(236,230,220,0.92);
      color: #222;
      border-radius: 1rem;
      padding: 2rem 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 1px 8px rgba(44,56,64,0.09);
      font-size: 1.08rem;
      line-height: 1.7;
    }
    .privacy-section strong {
      color: #444;
      font-weight: 600;
    }
    .privacy-section a {
      color: #2c3840;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 180ms;
    }
    .privacy-section a:hover {
      color: #86563e;
      text-decoration-color: #86563e;
    }

    @media (max-width: 500px) {
      .privacy-container, .privacy-section {
        padding: 1rem 0.5rem;
      }
      .logo {
        width: 98vw;
        min-width: 0;
      }
    }






    /* --- Safari-safe global background --- */
/* --- Safari-safe global background --- */
html, body { height: 100%; }
html { background:#000; }                    /* prevent white flash */

body{
  background: none !important;
  position: relative;
}

/* Image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("../images/riyn-cover-photo.png") center / cover no-repeat;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}

/* Tint layer uses a CSS var */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--overlay, rgba(0,0,0,.30));
  z-index: 1;
  pointer-events: none;
  transition: background 600ms ease; /* smooth fades */
}

/* Content above both layers */
body > *{ position: relative; z-index: 2; }



.release-list img {
  width: 500px; 
  height: auto;
}