@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rajdhani:wght@500;600;700;800&display=swap');



/* ========================================

   COLOURS & GLOBAL SETTINGS

======================================== */



:root {

  --bg: #080022;

  --panel: #10003d;

  --panel2: #1a0055;

  --pink: #ff4cff;

  --hot: #f328ff;

  --pale: #ffb8ff;

  --yellow: #ffe51e;

  --white: #fff8ff;

  --blue: #25c8ff;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  background: var(--bg);

}



body {

  margin: 0;

  color: var(--white);

  font-family: 'Rajdhani', Arial, sans-serif;

  font-size: 17px;

  background:

    radial-gradient(ellipse at 70% 10%, #4e0ac044, transparent 36%),

    linear-gradient(90deg, #3814ff18 1px, transparent 1px),

    linear-gradient(#3814ff18 1px, transparent 1px),

    var(--bg);

  background-size: auto, 24px 24px, 24px 24px, auto;

}



img {

  max-width: 100%;

}



/* ========================================

   MAIN WEBSITE LAYOUT

======================================== */



.site-shell {

  width: 100%;

  max-width: 1600px;

  min-height: 100vh;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 150px minmax(0, 1fr);

  border-left: 2px solid #9f27ff;

  border-right: 2px solid #9f27ff;

  box-shadow: 0 0 35px #a000ff30;

}



.main-content {

  min-width: 0;

  padding: 0 24px 0 26px;

  overflow: hidden;

  background:

    radial-gradient(ellipse at 95% 0%, #5a0d9b35, transparent 42%),

    #090025;

}



/* ========================================

   LEFT SIDEBAR

======================================== */



.sidebar {

  position: relative;

  z-index: 5;

  min-width: 0;

  display: flex;

  align-items: center;

  flex-direction: column;

  padding: 20px 10px 24px;

  border-right: 3px solid #d32dff;

  background:

    linear-gradient(180deg, #10002f, #10003b 65%, #19004b);



  /* Prevent folder icons and hover effects being clipped */

  overflow: visible;

}



.sidebar::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  opacity: 0.45;

  pointer-events: none;

  background-image:

    linear-gradient(#8a32ff35 1px, transparent 1px),

    linear-gradient(90deg, #8a32ff35 1px, transparent 1px);

  background-size: 18px 18px;

}



/* Retro computer logo */



.monitor {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  width: 100%;

  height: 118px;

  margin-bottom: 22px;

  color: var(--pink);

  text-decoration: none;

}



.monitor-screen {

  display: grid;

  place-items: center;

  width: 72px;

  height: 57px;

  border: 4px ridge #ff80ff;

  box-shadow:

    0 0 10px #ff36ff,

    inset 0 0 12px #a000ff;

  background: #18004b;

  font-size: 33px;

  text-shadow: 0 0 9px #ff39ff;

}



.monitor-stand {

  width: 50px;

  height: 8px;

  margin-bottom: 7px;

  border: 3px solid #f85cff;

  border-top: 0;

}



.monitor small {

  color: #fff;

  font-family: 'Press Start 2P', monospace;

  font-size: 7px;

  letter-spacing: 1px;

}



/* Pink folder navigation */



.folder-nav {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

  width: 100%;

  padding: 2px 0 6px;

}



.folder-hotspot {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  width: 100%;

  max-width: 124px;

  min-width: 0;

  padding: 3px;

  line-height: 0;

  text-decoration: none;

  outline-offset: 2px;

  transition:

    filter 0.16s ease,

    transform 0.16s ease;

}



.folder-hotspot img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  image-rendering: pixelated;

  filter: drop-shadow(0 0 4px #ff39ff88);

}



.folder-hotspot:hover,

.folder-hotspot:focus-visible {

  z-index: 4;

  filter: brightness(1.2) drop-shadow(0 0 8px #ff43ff);

  transform: translateX(2px) scale(1.025);

}



.folder-hotspot:focus-visible {

  outline: 1px solid #fff;

}



.folder-hotspot.is-active {

  filter: drop-shadow(0 0 5px #ffe51e);

}



.sidebar-frog {

  position: relative;

  z-index: 1;

  margin-top: 28px;

  font-size: 42px;

  filter: drop-shadow(0 0 9px #f0f);

}



.sidebar-sparkle {

  position: relative;

  z-index: 1;

  margin-top: auto;

  padding-top: 18px;

  color: var(--yellow);

  font-size: 32px;

  text-shadow: 0 0 14px #ffdf20;

}



/* ========================================

   HERO SECTION

======================================== */



.hero {

  position: relative;

  isolation: isolate;

  display: grid;

  grid-template-columns: minmax(280px, 0.88fr) minmax(250px, 1.12fr);

  align-items: stretch;

  min-height: 495px;

  overflow: hidden;

  border-bottom: 2px solid var(--pink);

  background:

    radial-gradient(ellipse at 75% 35%, #4b0caa88, transparent 50%),

    linear-gradient(120deg, #0a002c, #17004d 70%, #080022);

}



.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: 0.36;

  background-image:

    radial-gradient(#fff 1px, transparent 1.5px),

    radial-gradient(#ff50ff 1px, transparent 1.5px);

  background-size: 39px 39px, 71px 71px;

  background-position: 0 0, 15px 22px;

}



.hero-copy {

  position: relative;

  z-index: 2;

  align-self: center;

  min-width: 0;

  padding: 28px 0 22px 20px;

}



.eyebrow {

  color: #ff8cff;

  font-family: 'Press Start 2P', monospace;

  font-size: 8px;

  line-height: 1.8;

  letter-spacing: 1px;

}



.logo-word {

  margin: 12px 0 8px;

  color: #ff85ff;

  font-family: 'Press Start 2P', monospace;

  font-size: clamp(36px, 6.4vw, 72px);

  line-height: 1.2;

  letter-spacing: -5px;

  -webkit-text-stroke: 1px #fff;

  text-shadow:

    3px 3px 0 #b100e7,

    6px 6px 0 #5700a4,

    0 0 18px #f0f;

}



.logo-word span {

  color: var(--yellow);

  font-family: Arial, sans-serif;

  font-size: 0.4em;

  vertical-align: top;

  letter-spacing: 0;

  text-shadow: 0 0 10px #ffef37;

}



.tagline {

  margin: 0 0 13px;

  color: var(--yellow);

  font-size: clamp(14px, 2vw, 23px);

  font-weight: 800;

  font-style: italic;

  line-height: 1.2;

  text-shadow: 0 0 8px #ffdf2c55;

}



.hero-description {

  margin: 0 0 17px;

  font-size: clamp(15px, 1.8vw, 19px);

  line-height: 1.22;

  letter-spacing: 0.3px;

}



/* Hero artwork */



.hero-art-wrap {

  position: absolute;

  z-index: 1;

  top: 0;

  right: -3%;

  display: flex;

  align-items: stretch;

  justify-content: flex-end;

  width: 61%;

  height: 100%;

  pointer-events: none;

}



.hero-art {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 48% center;

  mix-blend-mode: screen;

  mask-image: linear-gradient(

    90deg,

    transparent 0%,

    #000 17%,

    #000 100%

  );

}



.hero-stars {

  position: absolute;

  top: 8px;

  right: 4%;

  color: #ff8cff;

  font-size: 21px;

  opacity: 0.9;

  text-shadow: 0 0 12px #f0f;

}



/* ========================================

   YELLOW BUTTONS

======================================== */



.yellow-button {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  min-width: 170px;

  padding: 11px 16px;



  color: #10002d;

  background: var(--yellow);

  border: 2px solid #fff;

  border-radius: 12px;

  outline: 2px solid #ffb900;



  box-shadow:

    0 0 12px #ffdb19,

    4px 4px 0 #8e24ff;



  font-size: 18px;

  font-weight: 900;

  line-height: 1;

  text-decoration: none;



  transition:

    transform 0.15s ease,

    filter 0.15s ease,

    box-shadow 0.15s ease;

}



.yellow-button:hover,

.yellow-button:focus-visible {

  transform: translateY(-2px);

  filter: brightness(1.1);

  box-shadow:

    0 0 17px #ffdb19,

    4px 4px 0 #8e24ff;

}



.yellow-button span {

  font-size: 24px;

}



.small-button {

  min-width: 175px;

  margin-top: 1px;

  padding: 10px 13px;

  font-size: 16px;

}



/* ========================================

   CONTRACT ADDRESS PANEL

======================================== */



.contract-panel {

  width: min(100%, 420px);

  margin-top: 19px;

  padding: 10px 12px;



  background: #100044dd;

  border: 2px solid #f54dff;

  border-radius: 12px;



  box-shadow:

    0 0 13px #e12cff,

    inset 0 0 12px #8c00ff55;

}



.contract-label {

  margin-bottom: 7px;

  color: #ffb5ff;

  font-family: 'Press Start 2P', monospace;

  font-size: 7px;

  letter-spacing: 0.4px;

}



.contract-row {

  display: flex;

  align-items: center;

  gap: 7px;



  /* Removed the purple line beneath the address */

  padding-bottom: 0;

  border-bottom: none;

}



.contract-row code {

  min-width: 0;

  overflow-wrap: anywhere;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: clamp(9px, 1vw, 12px);

}



.copy-button {

  display: grid;

  flex: 0 0 29px;

  place-items: center;

  width: 29px;

  height: 29px;

  padding: 0;



  color: #ff9bff;

  background: #23005e;

  border: 1px solid #ff4cff;

  border-radius: 7px;



  font-size: 21px;

  cursor: pointer;

  transition: background 0.15s ease;

}



.copy-button:hover {

  background: #4d00a0;

}



.token-stats {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 8px;

  padding-top: 10px;

}



.stat {

  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

}



.stat + .stat {

  padding-left: 10px;

  border-left: 1px solid #a526ff;

}



.stat-icon {

  flex-shrink: 0;

  color: #ff54ff;

  font-size: 26px;

}



.network-icon {

  flex-shrink: 0;

  color: var(--blue);

  font-size: 27px;

}



.stat small {

  display: block;

  color: #e6aaff;

  font-size: 9px;

  letter-spacing: 1px;

}



.stat strong {

  display: block;

  overflow-wrap: anywhere;

  font-size: 13px;

  line-height: 1.25;

}



.copy-status {

  min-height: 10px;

  margin: 4px 0 0;

  color: var(--yellow);

  font-size: 11px;

}



/* ========================================

   WINDOWS / SECTION PANELS

======================================== */



.window {

  position: relative;

  min-width: 0;

  margin: 22px 0;



  background:

    linear-gradient(135deg, #10003c, #16004a 70%, #0c0034);



  border: 3px solid #f548ff;

  border-radius: 16px;

  overflow: hidden;



  box-shadow:

    0 0 12px #e000ff,

    inset 0 0 18px #5b00ff55;

}



/* Curved top corners stay clean because the parent clips its contents */



.windowbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-height: 40px;

  padding: 6px 12px;



  border-bottom: 2px solid #ed39ff;

  background: linear-gradient(90deg, #210052, #34006b);



  font-family: 'Press Start 2P', monospace;

  font-size: clamp(8px, 1.25vw, 13px);

  letter-spacing: 0.1px;

  text-shadow: 0 0 7px #f0f;

}



.bar-icon {

  display: inline-block;

  margin-right: 8px;

  color: var(--yellow);

  font-family: Arial, sans-serif;

  font-size: 22px;

  vertical-align: middle;

}



.music-icon {

  color: #ff64ff;

}



.window-controls {

  display: flex;

  flex-shrink: 0;

  gap: 5px;

}



.window-controls i {

  display: grid;

  place-items: center;

  width: 22px;

  height: 20px;



  color: #fff;

  background: #7f0cb7;

  border: 2px solid #ff9cff;

  border-radius: 5px;



  font: 700 16px Arial;

  font-style: normal;

  box-shadow: 0 0 4px #f0f;

}



/* ========================================

   ABOUT SECTION

======================================== */



.about-body {

  display: grid;

  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);

  gap: 18px;

  padding: 17px;

}



.about-copy {

  min-width: 0;

  font-size: clamp(13px, 1.35vw, 16px);

  line-height: 1.35;

}



.about-copy p {

  margin: 0 0 12px;

}



.about-art-frame {

  align-self: stretch;

  display: block;

  min-width: 0;

  min-height: 190px;



  border: 2px solid #ff62ff;

  border-radius: 12px;

  overflow: hidden;



  box-shadow: 0 0 12px #ed27ff;

}



.about-art-frame img {

  display: block;

  width: 100%;

  height: 100%;

  min-height: 190px;

  object-fit: cover;

  object-position: center;

  transition: transform 0.25s ease;

}



.about-art-frame:hover img {

  transform: scale(1.035);

}



/* ========================================

   MUSIC VIDEO CAROUSEL

======================================== */



.video-carousel {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 16px 13px;

}



.carousel-arrow {

  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  padding: 0;



  color: #ff9dff;

  background: #170044;

  border: 2px solid #ff7bff;

  border-radius: 50%;



  font-size: 34px;

  line-height: 25px;

  cursor: pointer;

  box-shadow: 0 0 8px #e0f;

  transition:

    background 0.15s ease,

    color 0.15s ease;

}



.carousel-arrow:hover {

  color: #fff;

  background: #6d0bb0;

}



.video-track {

  display: grid;

  flex: 1;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 13px;

  min-width: 0;

}



.video-card {

  display: block;

  min-width: 0;

  color: #fff;

  text-decoration: none;

}



.video-thumb {

  position: relative;

  display: block;

  aspect-ratio: 16 / 9;

  overflow: hidden;



  background: #17004a;

  border: 2px solid #f94dff;

  border-radius: 10px;

  box-shadow: 0 0 8px #e0f;

}



.video-thumb img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.2s ease;

}



.video-card:hover .video-thumb img {

  transform: scale(1.05);

}



.play-button {

  position: absolute;

  top: 50%;

  left: 50%;

  display: grid;

  place-items: center;

  width: 38px;

  height: 28px;

  transform: translate(-50%, -50%);



  color: #fff;

  background: #ff1717;

  border-radius: 9px;



  font-size: 16px;

  text-shadow: none;

}



.video-thumb small {

  position: absolute;

  right: 5px;

  bottom: 5px;

  padding: 2px 5px;

  color: #fff;

  background: #090018;

  border-radius: 4px;

  font-size: 11px;

}



.video-title {

  display: block;

  overflow: hidden;

  padding: 7px 3px 0;

  font-size: clamp(11px, 1.4vw, 15px);

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* ========================================

   TOKENOMICS

======================================== */



.token-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 15px;

  padding: 22px 16px 17px;

}



.token-card {

  position: relative;

  min-width: 0;

  margin-top: 17px;

  padding: 44px 13px 16px;



  text-align: center;

  background: linear-gradient(135deg, #20005f, #18004a 60%, #26006d);

  border: 2px solid #fa49ff;

  border-radius: 14px;



  box-shadow: 0 0 9px #ed32ff;

}



.folder-tab {

  position: absolute;

  top: -17px;

  left: 14px;

  right: 14px;

  display: grid;

  place-items: center;

  height: 37px;



  color: #21003f;

  background: #f46bff;

  border: 3px solid #ffcaff;

  border-radius: 10px;

  outline: 2px solid #d321ff;



  font-size: 27px;

  font-weight: 900;

  filter: drop-shadow(0 0 5px #f0f);

}



.token-card h2 {

  margin: 0 0 4px;

  color: var(--yellow);

  font-size: clamp(13px, 1.8vw, 19px);

  font-style: italic;

  font-weight: 900;

  line-height: 1.2;

}



.token-card h3 {

  margin: 0 0 12px;

  font-size: 12px;

  letter-spacing: 1px;

}



.token-card p {

  max-width: 210px;

  margin: 0 auto;

  text-align: left;

  font-size: clamp(12px, 1.45vw, 16px);

  line-height: 1.3;

}



/* ========================================

   FOOTER

======================================== */



.site-footer {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 30px;

  margin-top: 22px;

  padding: 20px 10px 24px;



  color: #fff;

  border-top: 2px solid #d82cff;

  font-weight: 700;

}



.site-footer a {

  color: #fff;

  text-decoration: none;

  transition: color 0.15s ease;

}



.site-footer a:hover {

  color: var(--yellow);

}



.footer-flourish {

  color: #ff3dff;

  letter-spacing: 3px;

  text-shadow: 0 0 10px #f0f;

}



.site-footer span {

  font-size: 13px;

}



/* ========================================

   LARGE SCREENS

======================================== */



@media (min-width: 1200px) {

  .hero {

    min-height: 520px;

  }



  .hero-copy {

    padding-left: 28px;

  }



  .main-content {

    padding-right: 28px;

    padding-left: 28px;

  }

}



/* ========================================

   TABLETS & SMALL LAPTOPS

======================================== */



@media (max-width: 900px) {

  .site-shell {

    grid-template-columns: 112px minmax(0, 1fr);

  }



  .sidebar {

    padding-right: 6px;

    padding-left: 6px;

  }



  .folder-nav {

    gap: 15px;

  }



  .folder-hotspot {

    max-width: 98px;

  }



  .main-content {

    padding-right: 14px;

    padding-left: 14px;

  }



  .hero {

    min-height: 460px;

    grid-template-columns: minmax(0, 1fr);

  }



  .hero-copy {

    align-self: start;

    width: 67%;

    padding: 25px 0 20px 14px;

  }



  .logo-word {

    font-size: clamp(30px, 6vw, 50px);

    letter-spacing: -3px;

  }



  .hero-art-wrap {

    right: -12%;

    width: 76%;

    opacity: 0.9;

  }



  .about-body {

    gap: 13px;

  }



  .token-grid {

    gap: 10px;

    padding-right: 10px;

    padding-left: 10px;

  }



  .token-card {

    padding-right: 9px;

    padding-left: 9px;

  }

}



/* ========================================

   MOBILE

======================================== */



@media (max-width: 600px) {

  .site-shell {

    grid-template-columns: 86px minmax(0, 1fr);

  }



  .sidebar {

    padding: 13px 4px;

  }



  .monitor {

    height: 86px;

    margin-bottom: 13px;

  }



  .monitor-screen {

    width: 53px;

    height: 43px;

    font-size: 25px;

  }



  .monitor-stand {

    width: 38px;

  }



  .monitor small {

    font-size: 5px;

  }



  .folder-nav {

    gap: 12px;

  }



  .folder-hotspot {

    width: 100%;

    max-width: 78px;

    padding: 2px;

  }



  .sidebar-frog {

    margin-top: 22px;

    font-size: 30px;

  }



  .sidebar-sparkle {

    font-size: 26px;

  }



  .main-content {

    padding: 0 9px;

  }



  .hero {

    min-height: 425px;

  }



  .hero-copy {

    width: 73%;

    padding: 23px 0 18px 8px;

  }



  .eyebrow {

    font-size: 6px;

  }



  .logo-word {

    font-size: clamp(27px, 6vw, 38px);

    letter-spacing: -2px;

  }



  .tagline {

    font-size: 13px;

  }



  .hero-description {

    font-size: 14px;

  }



  .hero-art-wrap {

    right: -19%;

    width: 83%;

    opacity: 0.8;

  }



  .hero-stars {

    right: 2%;

  }



  .contract-panel {

    width: 100%;

    padding: 9px;

    border-radius: 10px;

  }



  .contract-label {

    font-size: 6px;

  }



  .contract-row code {

    font-size: 8px;

  }



  .copy-button {

    flex-basis: 25px;

    width: 25px;

    height: 25px;

  }



  .stat {

    gap: 5px;

  }



  .stat-icon,

  .network-icon {

    font-size: 20px;

  }



  .stat strong {

    font-size: 9px;

  }



  .stat small {

    font-size: 7px;

  }



  .yellow-button {

    min-width: 135px;

    padding: 10px 11px;

    border-radius: 10px;

    font-size: 15px;

  }



  .yellow-button span {

    font-size: 19px;

  }



  .small-button {

    min-width: 145px;

  }



  .window {

    margin: 16px 0;

    border-width: 2px;

    border-radius: 13px;

  }



  .windowbar {

    min-height: 34px;

    padding: 5px 7px;

    font-size: 7px;

  }



  .bar-icon {

    margin-right: 4px;

    font-size: 18px;

  }



  .window-controls {

    gap: 3px;

  }



  .window-controls i {

    width: 15px;

    height: 15px;

    border-radius: 4px;

    font-size: 10px;

  }



  .about-body {

    grid-template-columns: minmax(0, 1fr);

    gap: 13px;

    padding: 12px;

  }



  .about-copy {

    font-size: 14px;

  }



  .about-art-frame {

    min-height: 170px;

    max-height: 240px;

    border-radius: 10px;

  }



  .about-art-frame img {

    min-height: 170px;

    max-height: 240px;

  }



  .video-carousel {

    gap: 5px;

    padding: 12px 6px;

  }



  .carousel-arrow {

    flex-basis: 28px;

    width: 28px;

    height: 32px;

    font-size: 27px;

  }



  .video-track {

    gap: 7px;

  }



  .video-title {

    font-size: 10px;

  }



  .token-grid {

    grid-template-columns: minmax(0, 1fr);

    gap: 10px;

    padding: 16px 10px 13px;

  }



  .token-card {

    margin-top: 13px;

    padding: 36px 14px 14px;

    border-radius: 12px;

  }



  .token-card h2 {

    font-size: 16px;

  }



  .token-card h3 {

    font-size: 11px;

  }



  .token-card p {

    max-width: 260px;

    text-align: center;

    font-size: 13px;

  }



  .folder-tab {

    top: -14px;

    left: 12px;

    right: 12px;

    height: 31px;

    border-radius: 8px;

    font-size: 23px;

  }



  .site-footer {

    gap: 14px;

    padding: 17px 5px 20px;

  }



  .footer-flourish {

    display: none;

  }

}



/* ========================================

   VERY SMALL PHONES

======================================== */



@media (max-width: 380px) {

  .site-shell {

    grid-template-columns: 72px minmax(0, 1fr);

  }



  .sidebar {

    padding-right: 3px;

    padding-left: 3px;

  }



  .monitor {

    height: 76px;

    margin-bottom: 11px;

  }



  .monitor-screen {

    width: 45px;

    height: 36px;

    border-width: 3px;

    font-size: 22px;

  }



  .monitor-stand {

    width: 29px;

    height: 6px;

  }



  .monitor small {

    font-size: 5px;

  }



  .folder-nav {

    gap: 9px;

  }



  .folder-hotspot {

    max-width: 66px;

  }



  .sidebar-frog {

    font-size: 25px;

  }



  .main-content {

    padding-right: 6px;

    padding-left: 6px;

  }



  .hero {

    min-height: 405px;

  }



  .hero-copy {

    width: 77%;

    padding-left: 6px;

  }



  .logo-word {

    font-size: 27px;

  }



  .tagline {

    font-size: 11px;

  }



  .hero-description {

    font-size: 12px;

  }



  .yellow-button {

    min-width: 125px;

    padding: 9px;

    font-size: 13px;

  }



  .contract-panel {

    padding: 7px;

  }



  .contract-label {

    font-size: 5px;

  }



  .contract-row code {

    font-size: 7px;

  }



  .stat strong {

    font-size: 8px;

  }



  .stat small {

    font-size: 6px;

  }



  .video-track {

    grid-template-columns: minmax(0, 1fr);

  }



  .video-card:not(:first-child) {

    display: none;

  }



  .video-title {

    font-size: 12px;

  }



  .video-thumb {

    max-height: 170px;

  }



  .windowbar {

    font-size: 6px;

  }

}



/* ========================================

   ACCESSIBILITY

======================================== */



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    transition: none !important;

  }

}



/* FIX: prevent sidebar folder buttons being cropped */



.sidebar {

  height: auto;

  min-height: 100%;

  align-self: stretch;

  overflow: visible !important;

  padding-bottom: 30px;

}



.folder-nav {

  width: 100%;

  height: auto;

  flex: 0 0 auto;

  gap: 20px;

  padding: 4px 0 12px;

  overflow: visible !important;

}



.folder-hotspot {

  display: flex;

  flex: 0 0 auto;

  width: 100%;

  height: auto;

  max-width: 124px;

  min-height: 0;

  padding: 4px;

  overflow: visible !important;

}



.folder-hotspot img {

  display: block;

  width: 100%;

  height: auto !important;

  max-height: none !important;

  object-fit: contain;

  object-position: center;

}



/* Keep the bottom decorations below the folders */

.sidebar-frog {

  flex: 0 0 auto;

  margin-top: 24px;

}



.sidebar-sparkle {

  flex: 0 0 auto;

  margin-top: 24px;

}



/* Ensure mobile folder icons also remain fully visible */

@media (max-width: 600px) {

  .folder-nav {

    gap: 14px;

  }



  .folder-hotspot {

    max-width: 78px;

    padding: 3px;

  }

}



@media (max-width: 380px) {

  .folder-nav {

    gap: 11px;

  }



  .folder-hotspot {

    max-width: 66px;

  }

}



/* =========================================

   FINAL SIDEBAR FIX

   Smaller folders, no surrounding boxes,

   and all six folders fit in the sidebar.

========================================= */



.sidebar {

  position: relative;

  height: auto;

  min-height: 100vh;

  align-self: stretch;

  justify-content: flex-start;

  padding: 12px 5px 18px;

  overflow: visible !important;

}



/* Reduce the logo area to create more room */

.monitor {

  flex: 0 0 auto;

  height: 78px;

  margin-bottom: 12px;

}



.monitor-screen {

  width: 52px;

  height: 42px;

  font-size: 25px;

}



.monitor-stand {

  width: 34px;

  height: 6px;

}



.monitor small {

  font-size: 5px;

}



/* Compact vertical spacing so the last folder fits */

.folder-nav {

  display: flex;

  flex: 0 0 auto;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  width: 100%;

  margin: 0;

  padding: 0;

  overflow: visible !important;

}



/* Remove button boxes, borders, backgrounds and hover outlines */

.folder-hotspot,

.folder-hotspot:hover,

.folder-hotspot:focus-visible,

.folder-hotspot.is-active {

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 108px;

  height: auto;

  min-height: 0;

  margin: 0;

  padding: 0;



  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  outline: none !important;

  box-shadow: none !important;

  filter: none !important;

  transform: none;

}



/* Keep the complete folder artwork visible */

.folder-hotspot img {

  display: block;

  width: 100%;

  height: auto !important;

  max-height: none !important;

  margin: 0;

  padding: 0;



  object-fit: contain;

  object-position: center;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  filter: none !important;

}



/* Simple hover effect without a surrounding box */

.folder-hotspot:hover img {

  filter: brightness(1.15) drop-shadow(0 0 4px #ff4cff) !important;

}



.folder-hotspot:focus-visible img {

  outline: 1px dashed #ffe51e;

  outline-offset: 2px;

}



.sidebar-frog {

  flex: 0 0 auto;

  margin-top: 12px;

  font-size: 28px;

}



.sidebar-sparkle {

  flex: 0 0 auto;

  margin-top: 12px;

  padding-top: 0;

  font-size: 23px;

}



/* Fit the sidebar on shorter screens */

@media (max-height: 850px) {

  .sidebar {

    padding-top: 8px;

    padding-bottom: 10px;

  }



  .monitor {

    height: 68px;

    margin-bottom: 8px;

  }



  .folder-nav {

    gap: 4px;

  }



  .folder-hotspot {

    max-width: 94px;

  }



  .sidebar-frog {

    margin-top: 8px;

    font-size: 24px;

  }



  .sidebar-sparkle {

    margin-top: 8px;

    font-size: 20px;

  }

}



@media (max-width: 600px) {

  .folder-nav {

    gap: 7px;

  }



  .folder-hotspot {

    max-width: 72px;

  }

}



@media (max-width: 380px) {

  .folder-nav {

    gap: 6px;

  }



  .folder-hotspot {

    max-width: 62px;

  }

}



/* Remove the line between the hero and About section */

.hero {

  border-bottom: none !important;

}



/* Change the section window borders to soft lilac */

.window {

  border-color: #c4a1ff !important;

  box-shadow:

    0 0 10px #a985ff66,

    inset 0 0 16px #8b65ff22 !important;

}



/* Lilac divider under each section title */

.windowbar {

  border-bottom-color: #b99aff !important;

}



/* Lilac border around the About artwork */

.about-art-frame {

  border-color: #c4a1ff !important;

  box-shadow: 0 0 10px #a985ff66 !important;

}



/* Lilac video thumbnail borders */

.video-thumb {

  border-color: #c4a1ff !important;

  box-shadow: 0 0 8px #a985ff55 !important;

}



/* Lilac token cards */

.token-card {

  border-color: #c4a1ff !important;

  box-shadow: 0 0 8px #a985ff55 !important;

}



/* Lilac window control buttons */

.window-controls i {

  border-color: #d5c1ff !important;

  box-shadow: 0 0 4px #a985ff66 !important;

}



/* FORCE REMOVE THE PURPLE HERO BACKGROUND BOX */

.site-shell .hero,

.site-shell .main-content .hero {

  background: transparent !important;

  background-color: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}



/* Remove decorative layers that may create a boxed effect */

.site-shell .hero::before,

.site-shell .hero::after {

  background: none !important;

  border: none !important;

  box-shadow: none !important;

}



/* Remove the line between the hero and About */

.site-shell .hero {

  border-bottom: none !important;

}



/* Keep the Lola image itself visible */

.site-shell .hero-art,

.site-shell .hero-art-wrap {

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}



/* =========================================

   CHARACTER STYLE — SPACIOUS WINDOW LAYOUT

========================================= */



.lola-look-section.window {

  display: block;

  width: 100%;

  margin: 26px 0;

  padding: 0;

  overflow: hidden;

  box-sizing: border-box;

  background: #160039;

  border: 2px solid #c69aff;

  border-radius: 15px;

  box-shadow: 0 0 12px rgba(198, 154, 255, 0.28);

}



/* Window title bar */

.lola-look-section .windowbar {

  min-height: 43px;

  padding: 8px 14px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  background: #290052;

  border-bottom: 2px solid #c69aff;

}



.lola-look-section .window-title {

  display: flex;

  align-items: center;

  gap: 11px;

  color: #fff;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 1px;

}



.lola-look-section .window-star {

  color: #ffe51e;

  font-size: 22px;

}



.lola-look-section .window-controls {

  display: flex;

  gap: 5px;

}



.lola-look-section .window-controls i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 19px;

  height: 19px;

  box-sizing: border-box;

  color: #fff;

  background: #42006d;

  border: 1px solid #d7a7ff;

  border-radius: 5px;

  font-style: normal;

  font-size: 12px;

  line-height: 1;

}



/* Comfortable spacing inside the window */

.lola-look-section .lola-look-content {

  padding: 28px;

}



.lola-look-section .look-section-heading {

  display: none !important;

}



/* Balanced two-column layout */

.lola-look-section .lola-look-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);

  align-items: center;

  gap: clamp(28px, 4vw, 58px);

}



.lola-look-section .lola-look-copy {

  min-width: 0;

}



.lola-look-section .look-eyebrow {

  margin: 0 0 14px;

  color: #d7a7ff;

  font-size: 11px;

  line-height: 1.6;

  letter-spacing: 1.5px;

}



.lola-look-section .lola-look-copy h2 {

  margin: 0 0 18px;

  color: #f7eaff;

  font-size: clamp(29px, 3vw, 39px);

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.lola-look-section .lola-look-copy h2 span {

  color: #ffe51e;

}



.lola-look-section .look-intro {

  max-width: 460px;

  margin: 0 0 25px;

  font-size: 14px;

  line-height: 1.8;

}



/* Separate, evenly spaced prompt cards */

.lola-look-section .outfit-prompts {

  display: flex;

  flex-direction: column;

  gap: 12px !important;

}



.lola-look-section .outfit-prompt {

  display: flex;

  align-items: flex-start;

  gap: 13px;

  width: 100%;

  box-sizing: border-box;

  margin: 0 !important;

  padding: 15px 16px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid #9d7bc1;

  border-radius: 10px;

  box-shadow: none;

}



.lola-look-section .outfit-prompt:hover {

  border-color: #d8b6ff;

  background: rgba(190, 145, 255, 0.06);

}



.lola-look-section .prompt-number {

  display: flex;

  flex: 0 0 29px;

  align-items: center;

  justify-content: center;

  width: 29px;

  height: 29px;

  box-sizing: border-box;

  margin: 0;

  color: #e2c6ff;

  background: transparent;

  border: 1px solid #b18ad8;

  border-radius: 50%;

  font-size: 10px;

  font-weight: 700;

}



.lola-look-section .outfit-prompt p {

  flex: 1;

  min-width: 0;

  margin: 2px 0 0;

  font-size: 13px;

  line-height: 1.75;

  overflow-wrap: anywhere;

}



/* Match the existing yellow CTA buttons */

.lola-look-section .copy-look-button {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 22px;

  min-width: 165px;

  margin-top: 23px;

  padding: 12px 16px;

  box-sizing: border-box;

  color: #10003d;

  background: #ffe51e;

  border: 2px solid #fff4a0;

  border-radius: 12px;

  box-shadow:

    0 0 0 2px #ff4cff,

    0 0 10px rgba(255, 76, 255, 0.5);

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;

}



.lola-look-section .copy-look-button:hover {

  transform: translateY(-2px);

  box-shadow:

    0 0 0 2px #ff4cff,

    0 0 15px rgba(255, 76, 255, 0.7);

}



.lola-look-section .copy-look-button span {

  font-size: 18px;

}



.lola-look-section .look-copy-status {

  min-height: 16px;

  margin: 10px 0 0;

  color: #ffe51e;

  font-size: 12px;

}



/* Larger artwork area */

.lola-look-section .lola-look-art {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  align-self: stretch;

  min-width: 0;

  min-height: 570px;

  overflow: hidden;

  background: transparent;

  border: none;

  border-radius: 0;

  box-shadow: none;

}



.lola-look-section .lola-look-art img {

  display: block;

  width: 100%;

  height: 100%;

  max-height: 720px;

  object-fit: contain;

  object-position: center;

  border: none;

  border-radius: 0;

  box-shadow: none;

}



.lola-look-section .art-caption {

  position: absolute;

  right: 8px;

  bottom: 8px;

  padding: 7px 10px;

  color: #ead5ff;

  background: rgba(22, 0, 57, 0.9);

  border: 1px solid #9d7bc1;

  border-radius: 6px;

  font-size: 9px;

  letter-spacing: 0.8px;

}



/* Tablet */

@media (max-width: 900px) {

  .lola-look-section .lola-look-content {

    padding: 22px;

  }



  .lola-look-section .lola-look-layout {

    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);

    gap: 22px;

  }



  .lola-look-section .lola-look-art {

    min-height: 480px;

  }

}



/* Mobile */

@media (max-width: 650px) {

  .lola-look-section .lola-look-content {

    padding: 18px;

  }



  .lola-look-section .lola-look-layout {

    grid-template-columns: minmax(0, 1fr);

    gap: 25px;

  }



  .lola-look-section .lola-look-copy h2 {

    font-size: 30px;

  }



  .lola-look-section .lola-look-art {

    min-height: 330px;

    max-height: 460px;

  }



  .lola-look-section .lola-look-art img {

    max-height: 460px;

  }

}



/* Align sections below the hero with the contract address box */



/* Remove extra horizontal padding from the main content */

.main-content {

  padding-left: 0 !important;

  padding-right: 0 !important;

}



/* Make About, Character Style, Music and Tokenomics

   share the same left and right alignment */

.main-content > .window,

.main-content > .lola-look-section,

.main-content > section {

  margin-left: 0 !important;

  margin-right: 0 !important;

  width: 100%;

  box-sizing: border-box;

}



/* Ensure the hero and its contract box start at the same edge */

.hero {

  margin-left: 0 !important;

  margin-right: 0 !important;

}



/* Keep the contract box itself unchanged */

.contract-box {

  margin-left: 0;

}



/* Preserve the layout on smaller screens */

@media (max-width: 760px) {

  .main-content {

    padding-left: 0 !important;

    padding-right: 0 !important;

  }

}



/* Align all sections below the hero with the contract box */

.main-content > .window,

.main-content > section {

  margin-left: 25px !important;

  width: calc(100% - 25px) !important;

  box-sizing: border-box !important;

}



/* Keep the alignment responsive on smaller screens */

@media (max-width: 760px) {

  .main-content > .window,

  .main-content > section {

    margin-left: 12px !important;

    width: calc(100% - 12px) !important;

  }

}



/* Align all sections below the hero with the contract box */

.main-content > .window,

.main-content > section {

  margin-left: 25px !important;

  width: calc(100% - 25px) !important;

  box-sizing: border-box !important;

}



/* Keep the alignment responsive on smaller screens */

@media (max-width: 760px) {

  .main-content > .window,

  .main-content > section {

    margin-left: 12px !important;

    width: calc(100% - 12px) !important;

  }

}


/* =====================================================
   FINAL ALIGNMENT FIX — HERO CONTRACT PANEL / SECTIONS
   The contract panel sits inside .hero-copy, which has an
   extra 26px of horizontal inset compared with the windows.
   Match the windows to that same left edge and preserve
   their existing right edge. Do not shift the hero itself.
   ===================================================== */

.main-content > .window,
.main-content > section:not(.hero) {
  margin-left: 51px !important;
  margin-right: 0 !important;
  width: calc(100% - 51px) !important;
  box-sizing: border-box !important;
}

.main-content > .hero {
  margin-left: 25px !important;
  margin-right: 0 !important;
  width: calc(100% - 25px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .main-content > .window,
  .main-content > section:not(.hero) {
    margin-left: 32px !important;
    width: calc(100% - 32px) !important;
  }

  .main-content > .hero {
    margin-left: 12px !important;
    width: calc(100% - 12px) !important;
  }
}

/* MUSIC VIDEOS — SHOW 2 CARDS AT A TIME */
.music-window .video-carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.music-window .video-track {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.music-window .video-track::-webkit-scrollbar {
  display: none;
}

.music-window .video-card {
  flex: 0 0 calc((100% - 12px) / 2);
  min-width: 0;
  box-sizing: border-box;
}

.music-window .video-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.music-window .video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-window .carousel-arrow {
  flex: 0 0 auto;
  cursor: pointer;
}

/* MOBILE — KEEP 2 VISIBLE IF SPACE ALLOWS */
@media (max-width: 600px) {
  .music-window .video-carousel {
    gap: 6px;
  }

  .music-window .video-track {
    gap: 8px;
  }

  .music-window .video-card {
    flex-basis: calc((100% - 8px) / 2);
  }
}
/* ==========================================
   LOLA.EXE — STICKY SIDEBAR FIX
   Keeps the existing layout and column widths
   ========================================== */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: thin;
  scrollbar-color: #d32dff #10003b;
  z-index: 10;
}

/* Keep the folder links spaced out */
.folder-nav {
  flex-shrink: 0;
}

/* Keep the decorative sparkle near the bottom */
.sidebar-sparkle {
  margin-top: auto;
  flex-shrink: 0;
}

/* Allow the sidebar to scroll if the screen is too short */
@media (max-height: 650px) {
  .sidebar {
    overflow-y: auto;
  }
}

/* Slightly smaller pink folders + space underneath */
.folder-hotspot {
  max-width: 96px !important;
}

.folder-nav {
  gap: 8px;
  padding-bottom: 12px;
}

/* Inner section backgrounds */
.main-content .window,
.main-content .window-content,
.main-content .about-body,
.main-content .about-content,
.main-content .lola-look-content,
.main-content .music-content {
  background-color: #ce7add !important;
}
/* Inner section paragraph styling only */
.main-content .window p,
.main-content .window-content p,
.main-content .about-body p,
.main-content .about-content p,
.main-content .lola-look-content p,
.main-content .music-content p {
  color: #000000 !important;
}

/* Purple → pink → purple gradient for section heading bars */
.main-content .window .windowbar,
.main-content .window .window-title {
  background: linear-gradient(
    to right,
    #7900d8 0%,
    #e83cff 50%,
    #7900d8 100%
  ) !important;
}
/* Make inner section text bolder */
.main-content .window p,
.main-content .window-content p,
.main-content .about-body p,
.main-content .about-content p,
.main-content .lola-look-content p,
.main-content .music-content p {
  color: #000000 !important;
  font-weight: 400!important;
}

/* FORCE RETRO PIXEL FONT ON HOMEPAGE SECTION TEXT */
.home-page .main-content .window .about-copy,
.home-page .main-content .window .about-copy p,
.home-page .main-content .window .look-intro,
.home-page .main-content .window .outfit-prompt p,
.home-page .main-content .window .video-title,
.home-page .main-content .window .lola-look-content p {
  font-family: monospace !important;
  font-size: xx-small 40 !important;
  color: #000 !important;
  text-shadow: none !important;
}
/* =========================================
   RETRO GRADIENT CONTRACT ADDRESS PANEL
========================================= */

.home-page .contract-panel {
  background: linear-gradient(
    135deg,
 
    #e88cff 35%,
   
    #8b24e8 100%
  ) !important;

  border: 3px solid #ff8aff !important;
  border-radius: 10px !important;

  box-shadow:
    0 0 0 2px #7900d8,
    0 0 12px #ff43f5,
    inset 0 0 0 2px #ffd8ff !important;

  color: #16002d !important;
  box-sizing: border-box;
}

/* Contract heading */
.home-page .contract-label {
  color: #16002d !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  line-height: 1.8;
  text-shadow: none !important;
}

/* Contract address */
.home-page .contract-row code {
  color: #16002d !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere;
}

/* Token statistics labels */
.home-page .token-stats small {
  color: #39005b !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  line-height: 1.8;
}

/* Token statistics values */
.home-page .token-stats strong {
  color: #16002d !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere;
}

/* Icons and copy button */
.home-page .contract-panel .stat-icon,
.home-page .contract-panel .network-icon {
  color: #fff !important;
  text-shadow: 1px 2px 0 #7900d8;
}

.home-page .contract-panel .copy-button {
  color: #fff !important;
  background: linear-gradient(180deg, #d83cff, #7900d8) !important;
  border: 2px solid #ffe0ff !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px #67118f;
}

/* =========================================
   REMOVE UNWANTED LINE / RIGHT OVERFLOW
========================================= */

html,
body {
  max-width: 100%;
  overflow-x: clip !important;
}

.home-page .site-shell,
.home-page .main-content {
  max-width: 100%;
  min-width: 0;
}

.home-page .hero,
.home-page .main-content > .window,
.home-page .main-content > section:not(.hero) {
  min-width: 0;
  box-sizing: border-box;
}

.home-page .hero-art-wrap {
  max-width: 100%;
}
/* =========================================
   CHARACTER SECTION — TITLE + BACKGROUND
========================================= */

/* Remove background behind the character title text only */
.home-page .lola-look-section .window-title,
.home-page .lola-look-section .window-title span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Keep the title bar itself purple/pink */
.home-page .lola-look-section .windowbar {
  background: linear-gradient(
    90deg,
    #7900d8 0%,
    #e83cff 50%,
    #7900d8 100%
  ) !important;
}

/* Change ONLY the character section's inner background */
.home-page .lola-look-section .lola-look-content {
  background: linear-gradient(
    135deg,
   #7900d8 0%,
    #e83cff 50%,
    #7900d8 100%
  ) !important;
}

/* Ensure the character section itself keeps its own background */
.home-page .lola-look-section.window {
  background: #e8a0ff !important;
}

/* Dark text for readability on the lighter background */
.home-page .lola-look-section .lola-look-copy h2,
.home-page .lola-look-section .look-intro,
.home-page .lola-look-section .look-eyebrow {
  color: #210038 !important;
  text-shadow: none !important;
}

/* More space between section boxes and the right edge */
.home-page .main-content > .window,
.home-page .main-content > section:not(.hero) {
  width: calc(100% - 140px) !important;
  margin-right: 0px !important;
  box-sizing: border-box !important;
}

/* Responsive spacing for smaller screens */
@media (max-width: 760px) {
  .home-page .main-content > .window,
  .home-page .main-content > section:not(.hero) {
    width: calc(100% - 36px) !important;
    margin-right: 18px !important;
  }
}
/* =========================================
   CLOUD CITY — DECORATIVE FOOTER
========================================= */

.cloud-city-footer {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: 60px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(13, 0, 49, 0.2) 100%
  );
}

.cloud-city-footer__image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;

  /* Blend the artwork into the purple website */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 18%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 18%,
    black 100%
  );

  filter: saturate(1.15);
}

/* Keep the existing footer above the page background */
footer {
  position: relative;
  z-index: 2;
}

/* Smaller screens */
@media (max-width: 760px) {
  .cloud-city-footer {
    height: 200px;
    margin-top: 35px;
  }

  .cloud-city-footer__image {
    object-position: center bottom;
  }
}
/* Sidebar folder navigation */
.folder-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 110px;
  padding: 20px 8px;
}

.folder-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.folder-link span {
  display: block;
  color: #fff;
  text-shadow: 0 0 6px #c94cff;
}

.folder-link:hover {
  transform: translateY(-3px);
}

.folder-link:hover span {
  text-shadow: 0 0 5px #fff, 0 0 12px #ec4cff;
}

/* =========================================
   SIDEBAR FOLDER LABELS
========================================= */

.folder-nav .folder-hotspot {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  line-height: normal !important;
  text-decoration: none !important;
}

/* Keep folder images at their existing size */
.folder-nav .folder-hotspot img {
  display: block !important;
  flex: 0 0 auto;
}

/* Labels beneath each folder */
.folder-nav .folder-hotspot::after {
  display: block !important;
  width: 100%;
  color: #ffffff !important;
  font-family: 'Rajdhani', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 0 6px #d82cff !important;
}

/* Match labels to your existing HTML link order */
.folder-nav .folder-hotspot[href="index.html"]::after {
  content: "HOME";
}

.folder-nav .folder-hotspot[href="gallery.html"]::after {
  content: "ART";
}

.folder-nav .folder-hotspot[href="about.html"]::after {
  content: "ABOUT";
}

.folder-nav .folder-hotspot[href="music.html"]::after {
  content: "MUSIC";
}

.folder-nav .folder-hotspot[href="lore.html"]::after {
  content: "LORE";
}

.folder-nav .folder-hotspot[href="links.html"]::after {
  content: "LINKS";
}

/* Make sidebar folder icons smaller */
.folder-nav .folder-hotspot {
  max-width: 78px !important;
}

/* Keep folder images proportional */
.folder-nav .folder-hotspot img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Keep labels readable underneath */
.folder-nav .folder-hotspot::after {
  font-size: 11px !important;
  margin-top: 3px;
}
/* =================================
   SPINNING LOLA SIDEBAR LOGO
================================= */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin: 8px auto 38px;
  perspective: 700px;

  position: relative;
  z-index: 10;
  text-decoration: none;
}

.sidebar-logo img {
  display: block;
  width: 85px;
  max-width: 100%;
  height: auto;
  object-fit: contain;

  transform-origin: center;
  transform-style: preserve-3d;

  animation: lolaLogoSpin 5s linear infinite;

  filter:
    drop-shadow(0 0 5px rgba(190, 100, 255, 0.9))
    drop-shadow(0 0 14px rgba(130, 50, 255, 0.65));
}

/* Smooth 3D rotation */
@keyframes lolaLogoSpin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

/* Extra glow on hover */
.sidebar-logo:hover img {
  filter:
    drop-shadow(0 0 8px #e8b5ff)
    drop-shadow(0 0 20px #a020f0);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sidebar-logo img {
    animation: none;
  }
}
/* Push hero content down to create more space at the top */
.hero-content {
  padding-top: 70px;
}

/* Keep the hero layout from feeling cramped */
.hero {
  padding-top: 50px;
}
/* ==========================================
   LOLA PROMPT MACHINE
========================================== */

.lola-prompt-machine {
  position: relative;
  width: 100%;
  margin: 55px 0;
  padding: 0 4px 24px;
  overflow: hidden;
  color: #f5edff;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(111, 30, 190, .17), transparent 55%),
    #0b0320;
  border-top: 1px solid rgba(199, 111, 255, .65);
  border-bottom: 1px solid rgba(199, 111, 255, .4);
  font-family: 'Space Grotesk', sans-serif;
  box-sizing: border-box;
}

.lola-prompt-machine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    radial-gradient(circle, #e7baff 1px, transparent 1.5px);
  background-size: 37px 31px;
  mask-image: linear-gradient(90deg, black, transparent 80%);
}

.prompt-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(208, 119, 255, .4);
  letter-spacing: 3px;
}

.prompt-section-heading > span:first-child {
  color: #ff58f4;
  font-size: 12px;
  font-weight: 800;
}

.prompt-section-heading h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
}

.prompt-heading-sparkle {
  margin-left: auto;
  color: #ff55f2;
  font-size: 25px;
  text-shadow: 0 0 12px #ff30f0;
}

.prompt-machine-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 25px;
  padding: 0 12px;
}

.prompt-machine-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.prompt-turbo-image {
  display: block;
  width: 46%;
  max-width: 175px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(208, 46, 255, .35));
}

.prompt-machine-brand h3 {
  margin: 0;
  color: #ffdb35;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  text-shadow: 0 0 15px rgba(255, 202, 40, .16);
}

.prompt-orbit {
  position: absolute;
  right: 3%;
  bottom: -17px;
  color: #ed5cff;
  font-size: 45px;
  transform: rotate(-15deg);
  text-shadow: 0 0 15px #db2dff;
}

.prompt-machine-panel {
  position: relative;
  min-width: 0;
  padding: 18px 20px 14px;
  border: 1px solid #d94cff;
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    rgba(30, 9, 60, .96),
    rgba(11, 4, 30, .96)
  );
  box-shadow:
    0 0 12px rgba(212, 52, 255, .13),
    inset 0 0 18px rgba(164, 48, 255, .05);
}

.prompt-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: #ff64f4;
  border-style: solid;
}

.corner-tl {
  top: 7px;
  left: 7px;
  border-width: 1px 0 0 1px;
}

.corner-tr {
  top: 7px;
  right: 7px;
  border-width: 1px 1px 0 0;
}

.corner-bl {
  bottom: 7px;
  left: 7px;
  border-width: 0 0 1px 1px;
}

.corner-br {
  bottom: 7px;
  right: 7px;
  border-width: 0 1px 1px 0;
}

.prompt-intro {
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 1.55;
}

.prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}

.prompt-tags span {
  padding: 5px 13px;
  border: 1px solid #ffc92f;
  border-radius: 20px;
  color: #ffda48;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}

.prompt-tags span:nth-child(2) {
  border-color: #ed75ff;
  color: #f4c4ff;
}

.prompt-tags span:nth-child(3) {
  border-color: #9e61ff;
  color: #d7b9ff;
}

.generated-prompt {
  min-height: 55px;
  margin-bottom: 14px;
  color: #f3eaff;
  font-size: 14px;
  line-height: 1.6;
}

.prompt-machine-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.prompt-machine-buttons button {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 30px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.prompt-machine-buttons button:hover {
  transform: translateY(-2px);
}

.prompt-shuffle-btn {
  border: 1px solid #ff75f8;
  color: #190526;
  background: linear-gradient(90deg,  #ffdb19);
  box-shadow: 0 0 16px rgba(240, 65, 255, .3);
}

.prompt-copy-btn {
  border: 1px solid #db68ff;
  color: #fff;
  background: rgba(25, 7, 47, .8);
}

.prompt-copy-btn:hover {
  box-shadow: 0 0 14px rgba(213, 70, 255, .25);
}

.prompt-status {
  min-height: 14px;
  margin: 8px 0 0;
  color: #f6a6ff;
  font-size: 11px;
}

@media (max-width: 700px) {
  .prompt-machine-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .prompt-machine-brand {
    min-height: 155px;
  }

  .prompt-turbo-image {
    width: 36%;
    max-width: 145px;
  }

  .prompt-machine-brand h3 {
    font-size: clamp(23px, 7vw, 34px);
  }

  .prompt-orbit {
    right: 10%;
    bottom: -8px;
  }

  .prompt-machine-panel {
    padding: 18px 14px 12px;
  }

  .prompt-machine-buttons {
    grid-template-columns: 1fr;
  }

  .prompt-machine-buttons button {
    padding: 13px 8px;
  }
}

/* =========================================
   PROMPT MACHINE — FULL-SIZE TURBO BACKDROP
   ========================================= */

.prompt-machine-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: stretch;
  gap: 24px;
}

/* Left section becomes a full-size artwork canvas */
.prompt-machine-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border: none;
  box-sizing: border-box;
}

/* Large image fills the entire left section */
.prompt-machine-brand .prompt-turbo-image {
  position: absolute;
  z-index: -1;
  inset: -5%;
  width: 110%;
  height: 110%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;

  /* Fade into the page around every edge */
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 30%,
    rgba(0, 0, 0, 0.95) 48%,
    rgba(0, 0, 0, 0.7) 65%,
    rgba(0, 0, 0, 0.3) 82%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 30%,
    rgba(0, 0, 0, 0.95) 48%,
    rgba(0, 0, 0, 0.7) 65%,
    rgba(0, 0, 0, 0.3) 82%,
    transparent 100%
  );
}

/* Yellow title overlays the artwork */
.prompt-machine-brand h3 {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 12px;
  text-align: center;
  line-height: 1.05;
  font-size: clamp(32px, 3.3vw, 52px);
  color: #ffe72e;
  text-shadow:
    2px 2px 0 #18002f,
    0 0 8px #b62cff,
    0 0 22px rgba(211, 55, 255, 0.8);
}

/* Hide the extra sparkle if it clashes with the image */
.prompt-machine-brand .prompt-orbit {
  display: none;
}

/* Keep prompt text in its own right-hand panel */
.prompt-machine-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1050px) {
  .prompt-machine-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
  }

  .prompt-machine-brand {
    min-height: 340px;
  }

  .prompt-machine-brand h3 {
    font-size: clamp(28px, 3.5vw, 40px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .prompt-machine-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .prompt-machine-brand {
    min-height: 300px;
  }

  .prompt-machine-brand .prompt-turbo-image {
    inset: -3%;
    width: 106%;
    height: 106%;
  }

  .prompt-machine-brand h3 {
    font-size: clamp(32px, 8vw, 46px);
  }
}

/* REMOVE THE OUTER BOX AROUND THE PROMPT MACHINE */
.lola-prompt-machine {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Remove any boxed heading divider */
.lola-prompt-machine .prompt-section-heading {
  border: none !important;
  box-shadow: none !important;
}

/* LEFT SIDE: TURBO ART WITH TITLE OVERLAY */
.prompt-machine-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 400px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Make Turbo fill the whole artwork area */
.prompt-machine-brand .prompt-turbo-image {
  position: absolute;
  z-index: -1;
  inset: -5%;
  width: 110%;
  height: 110%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Fade image edges into the page */
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 25%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.65) 62%,
    rgba(0, 0, 0, 0.25) 82%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 25%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.65) 62%,
    rgba(0, 0, 0, 0.25) 82%,
    transparent 100%
  );
}

/* Yellow title overlaid on the image */
.prompt-machine-brand h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px;
  max-width: 100%;
  text-align: center;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.05;
  color: #ffe72e;
  text-shadow:
    2px 2px 0 #16002b,
    0 0 10px #bd35ff,
    0 0 24px rgba(189, 53, 255, 0.8);
}

/* Remove the decorative extra star if unwanted */
.prompt-machine-brand .prompt-orbit {
  display: none;
}

/* Keep the prompt panel independent, without an outer section box */
.prompt-machine-panel {
  position: relative;
  min-width: 0;
  box-shadow: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .prompt-machine-brand {
    min-height: 300px;
  }

  .prompt-machine-brand h3 {
    font-size: clamp(30px, 8vw, 42px);
  }
}

/* ==========================================
   LOLA PROMPT MACHINE — REFINED ART LAYOUT
   ========================================== */

/* Keep artwork and prompt panel side by side */
.prompt-machine-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 24px;
}

/* Artwork area */
.prompt-machine-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 340px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Smaller image, softly blended at the edges */
.prompt-machine-brand .prompt-turbo-image {
  position: absolute;
  z-index: -1;

  /* Smaller than the previous version */
  width: 100%;
  height: 100%;
  inset: 0;
  max-width: none;
  margin: 0;

  object-fit: contain;
  object-position: center;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  /* Gradual fade on all four edges */
  -webkit-mask-image: radial-gradient(
    ellipse 68% 65% at 48% 50%,
    #000 25%,
    rgba(0, 0, 0, 0.95) 40%,
    rgba(0, 0, 0, 0.7) 55%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 88%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse 68% 65% at 48% 50%,
    #000 25%,
    rgba(0, 0, 0, 0.95) 40%,
    rgba(0, 0, 0, 0.7) 55%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 88%,
    transparent 100%
  );
}

/* Move the yellow title to the right over Turbo */
.prompt-machine-brand h3 {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 0 0 0 48px;
  padding: 10px;
  text-align: left;
  line-height: 1.05;
  font-size: clamp(30px, 3vw, 44px);
  color: #ffe72e;

  text-shadow:
    2px 2px 0 #16002b,
    0 0 8px #b62cff,
    0 0 18px rgba(189, 53, 255, 0.65);
}

/* Hide the extra decorative sparkle */
.prompt-machine-brand .prompt-orbit {
  display: none;
}

/* Keep prompt panel independent */
.prompt-machine-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1050px) {
  .prompt-machine-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
  }

  .prompt-machine-brand {
    min-height: 300px;
  }

  .prompt-machine-brand h3 {
    margin-left: 28px;
    font-size: clamp(26px, 3vw, 36px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .prompt-machine-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .prompt-machine-brand {
    min-height: 270px;
  }

  .prompt-machine-brand .prompt-turbo-image {
    width: 100%;
    height: 100%;
  }

  .prompt-machine-brand h3 {
    margin-left: 35px;
    font-size: clamp(30px, 7vw, 42px);
  }
}

/* ==========================================
   LOLA.EXE — HOMEPAGE POLISH
   ========================================== */

/* HERO: make the main LOLA heading larger */
.home-page .hero h1 {
  font-size: clamp(58px, 7vw, 100px) !important;
  line-height: 0.98 !important;
  letter-spacing: -2px;
  max-width: 100%;
}

/* Add more breathing room between the hero and About */
.home-page .hero {
  margin-bottom: 100px !important;
}

.home-page .main-content > .window:first-of-type,
.home-page .main-content > section:not(.hero):first-of-type {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .home-page .hero h1 {
    font-size: clamp(46px, 11vw, 68px) !important;
    letter-spacing: -1px;
  }

  .home-page .hero {
    margin-bottom: 65px !important;
  }
}

/* ALL BUTTONS: rounder corners and consistent typography */
.home-page button,
.home-page .button,
.home-page a.button,
.home-page .copy-button,
.home-page .carousel-arrow,
.home-page .prompt-machine-buttons button {
  border-radius: 24px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Keep button labels consistent in weight and spacing */
.home-page button,
.home-page .button,
.home-page a.button,
.home-page .copy-button,
.home-page .carousel-arrow,
.home-page .prompt-machine-buttons button {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Preserve the pill shape on the Prompt Machine buttons */
.home-page .prompt-machine-buttons button {
  border-radius: 30px !important;
}

/* PROMPT MACHINE: remove the old small heading bar */
.home-page .lola-prompt-machine .prompt-section-heading {
  display: none !important;
}

/* Main yellow Prompt Machine title at the top */
.home-page .prompt-machine-title {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0 12px;
  box-sizing: border-box;

  color: #ffe72e;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(25px, 3.2vw, 46px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;

  text-shadow:
    0 0 8px rgba(182, 44, 255, 0.85),
    0 0 22px rgba(211, 55, 255, 0.5);
}

@media (max-width: 600px) {
  .home-page .prompt-machine-title {
    font-size: clamp(17px, 4.5vw, 27px);
    letter-spacing: 0;
    margin-bottom: 10px;
  }
}
/* LOLA PROMPT MACHINE — BLEND IMAGE INTO SECTION */
.home-page .prompt-turbo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  /* Fade the edges smoothly into the surrounding section */
  -webkit-mask-image: radial-gradient(
    ellipse 68% 68% at 50% 48%,
    #000 38%,
    rgba(0, 0, 0, 0.9) 53%,
    rgba(0, 0, 0, 0.55) 68%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse 68% 68% at 50% 48%,
    #000 38%,
    rgba(0, 0, 0, 0.9) 53%,
    rgba(0, 0, 0, 0.55) 68%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 100%
  );

  filter:
    drop-shadow(0 0 18px rgba(157, 75, 255, 0.2))
    saturate(1.05);
}

/* Keep the image area from creating a hard rectangular boundary */
.home-page .prompt-machine-brand {
  position: relative;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Subtle purple glow behind the image */
.home-page .prompt-machine-brand::before {
  content: "";
  position: absolute;
  inset: 15%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(113, 57, 210, 0.2) 0%,
    rgba(79, 39, 157, 0.1) 42%,
    transparent 75%
  );
  filter: blur(28px);
}

.home-page .prompt-machine-brand .prompt-turbo-image {
  position: relative;
  z-index: 1;
}
/* =========================================
   LOLA WEBSITE — FIXED COSMIC BACKGROUND
   ========================================= */

html {
  min-height: 100%;
  background: #100b35;
}

body.home-page {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
  isolation: isolate;
}

/* One background image stays fixed while scrolling */
body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("../images/cosmic-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Optional dark purple overlay for readable text */
body.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: rgba(12, 5, 43, 0.25);
}

/* Let the page sections sit over the shared background */
body.home-page .site-shell,
body.home-page .main-content,
body.home-page main,
body.home-page section {
  background-color: transparent;
}

/* Make the navigation float above the background */
body.home-page header,
body.home-page .site-header,
body.home-page nav {
  position: relative;
  z-index: 10;
}

/* =========================================
   LOLA PROMPT MACHINE — REMOVE BLURRED BOX
   ========================================= */

/* Remove the outer glass box around the section */
.home-page .lola-prompt-machine {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Remove the box and blur behind Turbo's image */
.home-page .prompt-machine-brand {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove any decorative blurred glow behind the image */
.home-page .prompt-machine-brand::before {
  display: none !important;
}

/* Keep the Turbo image itself clean */
.home-page .prompt-turbo-image {
  filter: none !important;
}

/* =========================================
   EXTRA SPACE AT THE BOTTOM OF THE HOMEPAGE
   ========================================= */

/* Reveal the fixed cosmic background after the music section */
.home-page .main-content {
  padding-bottom: 15vh !important;
}

/* Ensure the final section doesn't add an opaque background */
.home-page .main-content > section:last-of-type {
  background-color: transparent;
}

/* =========================================
   LOLA HOMEPAGE — REFINED SPACING
   ========================================= */

/* Moderate spacing on the sides */
.home-page .main-content {
  width: 100% !important;
  max-width: 1600px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 4vw, 65px) !important;
  padding-right: clamp(24px, 4vw, 65px) !important;
  padding-bottom: 35vh !important;
  box-sizing: border-box !important;
}

/* Navigation to hero spacing */
.home-page .site-header,
.home-page header {
  margin-bottom: 35px !important;
}

/* Hero width and spacing */
.home-page .hero {
  width: 100% !important;
  max-width: 1450px;
  margin: 0 auto 95px !important;
  box-sizing: border-box;
}

/* Consistent spacing between sections */
.home-page .main-content > section:not(.hero) {
  width: 100% !important;
  max-width: 1450px;
  margin: 0 auto 85px !important;
  box-sizing: border-box !important;
}

/* Music section */
.home-page .music-section {
  margin-top: 95px !important;
  margin-bottom: 0 !important;
}

/* Tablet */
@media (max-width: 900px) {
  .home-page .main-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .home-page .hero {
    margin-bottom: 70px !important;
  }

  .home-page .main-content > section:not(.hero) {
    margin-bottom: 65px !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .home-page .main-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 25vh !important;
  }

  .home-page .site-header,
  .home-page header {
    margin-bottom: 25px !important;
  }

  .home-page .hero {
    margin-bottom: 55px !important;
  }

  .home-page .main-content > section:not(.hero) {
    margin-bottom: 50px !important;
  }

  .home-page .music-section {
    margin-top: 55px !important;
  }
}
/* =========================================
   FINAL HERO ALIGNMENT + REMOVE RIGHT FRAME
   ========================================= */

/* Remove the opaque purple panel behind the page content */
.site-shell {
  background: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
}

.main-content {
  background: transparent !important;
  overflow: visible !important;
}

/* Align hero's left edge with the other section boxes */
.main-content > .hero {
  margin-left: 51px !important;
  margin-right: 0 !important;
  width: calc(100% - 51px) !important;
  box-sizing: border-box !important;
}

/* Align hero text and contract box with that same edge */
.hero-copy {
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.hero-copy .contract-panel {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Keep the content background transparent */
body,
.site-shell,
.main-content {
  background-color: transparent !important;
}

/* Keep alignment sensible on smaller screens */
@media (max-width: 760px) {
  .main-content > .hero {
    margin-left: 12px !important;
    width: calc(100% - 12px) !important;
  }

  .hero-copy {
    padding-left: 0 !important;
  }
}

@media (max-width: 380px) {
  .main-content > .hero {
    margin-left: 8px !important;
    width: calc(100% - 8px) !important;
  }
}/* HERO — SHIFT CONTENT LEFT WITHOUT CLIPPING */
.main-content > .hero {
  margin-left: 25px !important;
  width: calc(100% - 25px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.main-content > .hero .hero-copy {
  position: relative !important;
  left: -15px !important;
  width: min(57%, 620px) !important;
  max-width: calc(100% - 15px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep the contract card and buttons inside the content width */
.main-content > .hero .contract-card {
  max-width: 100% !important;
  min-width: 0 !important;
}

.main-content > .hero .hero-logo,
.main-content > .hero .hero-actions {
  max-width: 100% !important;
}

/* Prevent the main content from cutting off the shifted hero */
.main-content {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

@media (max-width: 760px) {
  .main-content > .hero {
    margin-left: 12px !important;
    width: calc(100% - 12px) !important;
  }

  .main-content > .hero .hero-copy {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* UPDATED HERO TITLE AND SPACING */
.logo-word {
  font-size: clamp(42px, 7vw, 84px);
  line-height: 1.3;
  letter-spacing: -5px;
  white-space: nowrap;
  margin: 12px 0 12px;
}

.tagline {
  margin-bottom: 34px;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .logo-word {
    font-size: clamp(36px, 7vw, 58px);
    letter-spacing: -3px;
  }
}

@media (max-width: 600px) {
  .logo-word {
    font-size: clamp(30px, 7vw, 42px);
    letter-spacing: -2px;
  }
  .tagline {
    margin-bottom: 25px;
  }
}

@media (max-width: 380px) {
  .logo-word {
    font-size: 29px;
    letter-spacing: -2px;
  }
}

.hero-logo {
  width: 125%;
  max-width: 680px;
  margin: 0 0 20px -25px;
  position: relative;
  z-index: 2;
}

.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .hero-logo {
    width: 115%;
    max-width: 420px;
    margin-left: -15px;
  }
}


/* LARGE HERO LOLA LOGO */
.main-content > .hero .hero-copy {
  width: min(75%, 850px) !important;
  max-width: none !important;
}

.main-content > .hero .hero-logo {
  width: 500px !important;
  max-width: none !important;
  margin: 0 0 25px -25px !important;
  position: relative;
  z-index: 5;
}

.main-content > .hero .hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* MOBILE */
@media (max-width: 760px) {
  .main-content > .hero .hero-copy {
    width: 100% !important;
  }

  .main-content > .hero .hero-logo {
    width: 115% !important;
    max-width: 550px !important;
    margin-left: -15px !important;
  }
}


/* ==========================================
   LOLA HERO — BIGGER ARTWORK + ABOUT OVERLAP
   Does not change hero text or logo
========================================== */

/* Allow Lola's artwork to extend below the hero */
.home-page .hero {
  overflow: visible !important;
}

/* Enlarge and lower the artwork */
.home-page .hero-art-wrap {
  top: 30px !important;
  bottom: -75px !important;

  right: -5% !important;
  width: 72% !important;

  height: auto !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;

  overflow: visible !important;
  z-index: 1 !important;
  pointer-events: none;
}

/* Keep the complete image visible */
.home-page .hero-art {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center bottom !important;
}

/* Let About sit in front of the bottom of Lola's artwork */
.home-page .about-window {
  position: relative !important;
  z-index: 2 !important;
}

/* TABLET */
@media (max-width: 900px) {
  .home-page .hero-art-wrap {
    top: 40px !important;
    bottom: -55px !important;
    right: -12% !important;
    width: 82% !important;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .home-page .hero-art-wrap {
    top: 55px !important;
    bottom: -35px !important;
    right: -19% !important;
    width: 90% !important;
  }
}
.hero-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
  mix-blend-mode: screen;

  /* Fade the left and bottom edges */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 17%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.85) 84%,
      rgba(0, 0, 0, 0.35) 94%,
      transparent 100%
    );

  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 17%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.85) 84%,
      rgba(0, 0, 0, 0.35) 94%,
      transparent 100%
    );

  mask-composite: intersect;
}

/* MUSIC VIDEO TITLES — readable white text */
.home-page .main-content .window .video-title,
.home-page .music-window .video-title {
  display: block !important;
  color: #ffffff !important;
  font-family: 'Rajdhani', Arial, sans-serif !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-shadow: 0 0 7px rgba(255, 90, 255, 0.55) !important;
}



/* Precisely centre the maximise icon in every section title bar */
.window-controls i {
  position: relative;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  line-height: 1;
}

/* Draw the middle maximise square instead of relying on font glyph metrics */
.window-controls i:nth-child(2) {
  font-size: 0 !important;
  line-height: 0 !important;
}

.window-controls i:nth-child(2)::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
  .window-controls i:nth-child(2)::before {
    width: 7px;
    height: 7px;
  }
}

/* =========================================
   CONSISTENT HOMEPAGE SECTION TITLE TYPOGRAPHY
   ABOUT LOLA / CHARACTER STYLE / MUSIC VIDEOS
========================================= */
.home-page .main-content .windowbar > span:first-child,
.home-page .main-content .windowbar > .window-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(8px, 1.1vw, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  text-shadow: 0 0 7px #f0f !important;
}

/* Keep the decorative star aligned without changing the title font */
.home-page .lola-look-section .window-title {
  display: flex;
  align-items: center;
  gap: 11px;
}


/* =====================================================
   MOBILE HAMBURGER NAVIGATION — HOMEPAGE ONLY
   Desktop/tablet layout above 760px remains unchanged.
===================================================== */
.mobile-menu-toggle,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 760px) {
  .home-page .site-shell {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    border-left: 0;
    border-right: 0;
  }

  /* Hide the sidebar off-canvas until the hamburger is tapped. */
  .home-page .sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1002 !important;
    display: flex !important;
    width: min(245px, 82vw);
    height: 100dvh;
    min-height: 100vh;
    padding: 66px 14px 24px !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 3px solid #d32dff;
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.55);
    transform: translateX(-110%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s ease;
  }

  .home-page .sidebar .sidebar-logo {
    flex: 0 0 auto;
    max-width: 150px;
    margin-bottom: 20px;
  }

  .home-page .sidebar .folder-nav {
    gap: 15px;
  }

  .home-page .sidebar .folder-hotspot {
    width: 100%;
    max-width: 115px;
  }

  .home-page .sidebar .social-icon-grid {
    margin-top: 8px;
  }

  .home-page .main-content {
    width: 100%;
    min-width: 0;
    padding-right: 9px;
    padding-left: 9px;
  }

  /* Fixed hamburger button in the top-left corner. */
  .home-page .mobile-menu-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1004;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: #fff;
    background: rgba(24, 0, 69, 0.94);
    border: 2px solid #f548ff;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(245, 72, 255, 0.65);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .home-page .mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #ffe51e;
    box-shadow: 0 0 6px rgba(255, 229, 30, 0.65);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .home-page .mobile-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .home-page .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(3, 0, 18, 0.62);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .home-page.mobile-nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  .home-page.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .home-page.mobile-nav-open .mobile-menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .home-page.mobile-nav-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .home-page.mobile-nav-open .mobile-menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Keep the menu above the page while open; don't shift homepage sections. */
  .home-page.mobile-nav-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .sidebar,
  .home-page .mobile-nav-backdrop,
  .home-page .mobile-menu-toggle span {
    transition: none !important;
  }
}


/* =====================================================
   MOBILE HOMEPAGE REFINEMENTS — MOBILE ONLY
===================================================== */
@media (max-width: 600px) {
  /* Stack the hero copy and artwork instead of layering text over Lola. */
  .home-page .main-content > .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .home-page .main-content > .hero .hero-copy {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 58px 15px 12px !important;
  }

  .home-page .main-content > .hero .hero-logo {
    width: min(100%, 340px) !important;
    max-width: 100% !important;
    margin: 0 auto 15px 0 !important;
  }

  .home-page .main-content > .hero .hero-logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .home-page .main-content > .hero .hero-art-wrap {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .home-page .main-content > .hero .hero-art {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 430px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .main-content > .hero .hero-stars {
    top: 10px !important;
    right: 12px !important;
  }

  /* Centre the About artwork beneath the copy. */
  .home-page .about-window .about-body {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  .home-page .about-window .about-art-frame {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin: 4px auto 0 !important;
    justify-self: center !important;
  }
  .home-page .about-window .about-art-frame img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* One large, centred video thumbnail at a time. */
  .home-page .music-window .video-carousel {
    gap: 7px !important;
    padding: 14px 9px !important;
  }
  .home-page .music-window .video-track {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    gap: 0 !important;
    scroll-snap-type: x mandatory;
    scroll-padding: 0;
  }
  .home-page .music-window .video-card {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: center;
    text-align: center !important;
  }
  .home-page .music-window .video-thumb {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .home-page .music-window .video-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .home-page .music-window .carousel-arrow {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 34px !important;
  }
}

/* Character reference image zoom viewer. Available on desktop and mobile. */
.character-image-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}
.character-image-zoom img {
  display: block;
  width: 100%;
  height: auto;
}
.character-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  color: #ffe51e;
  background: rgba(16, 0, 45, .88);
  border: 1px solid #f548ff;
  border-radius: 6px;
  font: 10px 'Press Start 2P', monospace;
  line-height: 1.5;
  text-shadow: 0 0 7px #f0f;
}
.character-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 18px 18px;
  background: rgba(3, 0, 18, .94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.character-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.character-lightbox > img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 28px rgba(218, 55, 255, .35);
}
.character-lightbox-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  color: #ffe51e;
  background: #210052;
  border: 2px solid #f548ff;
  border-radius: 10px;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
}
body.character-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .character-lightbox { transition: none; } }

/* =====================================================
   MOBILE HERO ORDER — LOGO, LOLA ART, THEN HERO COPY
   Desktop layout remains unchanged.
===================================================== */
@media (max-width: 600px) {
  /* Flatten the copy wrapper so its contents can be ordered
     alongside the artwork in the hero's vertical layout. */
  .home-page .main-content > .hero .hero-copy {
    display: contents !important;
  }

  .home-page .main-content > .hero .hero-logo {
    order: 1 !important;
    align-self: flex-start !important;
    width: min(88%, 310px) !important;
    margin: 0 0 8px 15px !important;
    padding-top: 58px !important;
  }

  .home-page .main-content > .hero .hero-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .home-page .main-content > .hero .hero-art-wrap {
    order: 2 !important;
    width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 10px !important;
  }

  .home-page .main-content > .hero .hero-art {
    width: 100% !important;
    max-height: 390px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .home-page .main-content > .hero .tagline {
    order: 3 !important;
    margin: 4px 15px 10px !important;
  }

  .home-page .main-content > .hero .hero-description {
    order: 4 !important;
    margin: 0 15px 14px !important;
  }

  .home-page .main-content > .hero .yellow-button {
    order: 5 !important;
    align-self: flex-start !important;
    margin: 0 15px 12px !important;
  }

  .home-page .main-content > .hero .contract-panel {
    order: 6 !important;
    width: calc(100% - 30px) !important;
    margin: 0 15px 18px !important;
  }

  .home-page .main-content > .hero .hero-stars {
    z-index: 3 !important;
  }
}

/* =====================================================
   MOBILE HERO POLISH — CENTER COPY + FADE ART BOTTOM
   Applies only to the mobile homepage.
===================================================== */
@media (max-width: 600px) {
  .home-page .main-content > .hero .tagline,
  .home-page .main-content > .hero .hero-description {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .home-page .main-content > .hero .yellow-button {
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fade the lower edge of Lola's artwork smoothly into the hero background. */
  .home-page .main-content > .hero .hero-art {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, .82) 84%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, .82) 84%,
      transparent 100%
    ) !important;
  }
}


/* =====================================================
   MOBILE HERO TEXT — WIDER, FEWER LINES
   Only affects the homepage on mobile.
===================================================== */
@media (max-width: 600px) {
  .home-page .main-content > .hero .tagline {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(12px, 3.7vw, 15px) !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .home-page .main-content > .hero .hero-description {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-wrap: pretty;
  }
}
/* ==========================================
   LOWER SIDEBAR NAVIGATION — DESKTOP & MOBILE
========================================== */

/* Desktop and tablets */
@media (min-width: 761px) {
  .home-page .sidebar {
    padding-top: 50px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .home-page .sidebar {
    padding-top: 81px !important;
  }
}