/* Site-wide base color */
html,
body {
  background-color: #0d0a31 !important;
}

/* Desktop only (wide screens): ribbon canvas instead of static PNG */
@media only screen and (min-width: 1200px) {
  html,
  body {
    background-image: none !important;
  }

  .Home_container__3sao-,
  .About_container__2eann,
  .Contact_container__1spVL,
  .Portfolio_container__XqOXN,
  [class*="_container__"],
  #__next,
  #__next > div {
    background-image: none !important;
    background-color: #0d0a31 !important;
  }
}

/* Page hosts for ribbon canvas */
.Home_container__3sao-,
.About_container__2eann,
.Contact_container__1spVL,
.Portfolio_container__XqOXN {
  position: relative;
}

/* Ribbon canvas — desktop only */
.RibbonLife_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Keep content above the canvas — do NOT touch footer (must stay position:fixed) */
.Home_container__3sao- > main,
.About_container__2eann > main,
.About_mainContainer__1afXD,
.Contact_container__1spVL > main,
.Contact_mainContainer__Ozq7q,
.Portfolio_container__XqOXN > main,
.Portfolio_container__XqOXN > div {
  position: relative;
  z-index: 1;
}

/* Desktop layout refinements (wide screens only) */
@media only screen and (min-width: 1200px) {
  /*
   * Match live pmusik.art homepage content width (60%).
   */
  .Home_container__3sao- .Home_top__2_8qW .Home_headline__1YjxI,
  .Home_container__3sao- .Home_bottom__3MQH2 .Home_bottomContainer__TcUXI {
    max-width: 60% !important;
  }

  /* Subtitles under titles — balanced spacing, keep block in viewport */
  .Home_container__3sao- .Home_bottom__3MQH2 {
    margin-top: -12vh !important;
  }
}

/* Persist accent after client-side remount (React h4 has no color prop) */
.Home_portfolio__3pn-G h4 {
  color: #e60545;
}

.Home_portfolio__3pn-G h4 {
  margin-bottom: 2.4vh !important;
}

.Home_portfolio__3pn-G ul li {
  margin-bottom: 2.2vh !important;
}

.Home_portfolio__3pn-G ul li a {
  display: block !important;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}

.Home_portfolio__3pn-G ul li a span {
  display: block !important;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.22em !important;
  padding: 0;
  border: none;
  color: #fff;
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}

@media only screen and (min-width: 1200px) {
  .Home_portfolio__3pn-G a.Home_seeMore__3JXhh {
    display: inline-block;
    margin-top: 2.8vh !important;
  }
}

.Home_portfolio__3pn-G ul li a.Home_active__1lDxw {
  color: #fff;
}

.Home_portfolio__3pn-G ul li a.Home_active__1lDxw span {
  color: #fff;
}

.Home_portfolio__3pn-G ul li a:hover,
.Home_portfolio__3pn-G ul li a:hover span {
  color: #e60545;
}

/* See my projects — full white hover (text + arrow) */
.Home_portfolio__3pn-G a.Home_seeMore__3JXhh:hover {
  color: #fff;
}

.Home_portfolio__3pn-G a.Home_seeMore__3JXhh:hover i.Home_arrow__1aM4k,
.Home_portfolio__3pn-G a.Home_seeMore__3JXhh:hover i.Home_arrow__1aM4k:before,
.Home_portfolio__3pn-G a.Home_seeMore__3JXhh:hover i.Home_arrow__1aM4k:after {
  background: #fff;
}

/*
 * Mobile — same structure as live pmusik.art,
 * with updated bgm.png ribbon + current project photos/copy.
 */
@media only screen and (max-width: 767px) {
  .Home_container__3sao-,
  .About_container__2eann,
  .Contact_container__1spVL,
  .Portfolio_container__XqOXN {
    background-image: url(/bgm.png) !important;
    background-color: #0d0a31 !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
  }

  .Home_container__3sao- {
    background-size: 100% !important;
  }

  .About_container__2eann,
  .Contact_container__1spVL,
  .Portfolio_container__XqOXN {
    background-size: contain !important;
  }

  .RibbonLife_canvas {
    display: none !important;
  }

  /* Undo desktop width lock so original mobile layout can breathe */
  .Home_container__3sao- .Home_top__2_8qW .Home_headline__1YjxI,
  .Home_container__3sao- .Home_bottom__3MQH2 .Home_bottomContainer__TcUXI {
    max-width: none !important;
  }

  .Home_container__3sao- .Home_bottom__3MQH2 {
    margin-top: 0 !important;
  }

  /* Mobile hides the text list — keep title spacing tight */
  .Home_portfolio__3pn-G h4 {
    margin-bottom: 2vh !important;
  }

  .Home_portfolio__3pn-G ul li {
    margin-bottom: 0 !important;
  }

  .Home_portfolio__3pn-G a.Home_seeMore__3JXhh {
    margin-top: 0 !important;
  }
}

/*
 * Tablet / iPad / Galaxy (portrait + narrower landscape)
 * Mobile-style composition, tuned for wider viewports.
 * Overrides original desktop CSS that kicks in at 768px.
 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  html,
  body {
    background-color: #0d0a31 !important;
  }

  .RibbonLife_canvas {
    display: none !important;
  }

  .Home_container__3sao-,
  .About_container__2eann,
  .Contact_container__1spVL,
  .Portfolio_container__XqOXN {
    background-image: url(/bgm.png) !important;
    background-color: #0d0a31 !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
  }

  .Home_container__3sao- {
    display: flex !important;
    flex-direction: column !important;
    font-size: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background-size: 100% auto !important;
    min-height: 100vh !important;
    max-height: none !important;
  }

  .Home_container__3sao- main {
    max-height: none !important;
  }

  .Home_container__3sao- .Home_top__2_8qW {
    width: 100% !important;
    height: auto !important;
    min-height: 34vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 12vh 6vw 2vh !important;
  }

  .Home_container__3sao- .Home_top__2_8qW .Home_headline__1YjxI {
    flex: none !important;
    width: 100% !important;
    max-width: 720px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .Home_container__3sao- .Home_top__2_8qW .Home_headline__1YjxI h1 {
    margin: 0 !important;
    font-size: clamp(28px, 5.2vw, 44px) !important;
    line-height: 1.1 !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  .Home_container__3sao- .Home_top__2_8qW .Home_headline__1YjxI h1 span {
    display: block !important;
    font-size: clamp(56px, 12vw, 110px) !important;
    line-height: 1.05 !important;
  }

  .Home_container__3sao- .Home_bottom__3MQH2 {
    z-index: 10 !important;
    position: relative !important;
    height: auto !important;
    margin-top: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .Home_container__3sao- .Home_bottom__3MQH2:after {
    display: none !important;
  }

  .Home_container__3sao- .Home_bottom__3MQH2 .Home_bottomContainer__TcUXI {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1vh 0 12vh !important;
  }

  .Home_portfolio__3pn-G {
    flex: none !important;
    width: 100% !important;
    z-index: 5 !important;
    padding: 0 6vw !important;
  }

  .Home_portfolio__3pn-G h4 {
    margin: 0 0 2.5vh !important;
    font-size: clamp(22px, 3.4vw, 32px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Keep carousel style like mobile (hide desktop text list) */
  .Home_portfolio__3pn-G ul,
  .Home_portfolio__3pn-G a.Home_seeMore__3JXhh {
    display: none !important;
  }

  .Home_images__1cxPv {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .Home_images__1cxPv ul {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .Home_images__1cxPv ul li {
    position: static !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: min(420px, 58vw) !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 0 0 24px !important;
    vertical-align: top !important;
    white-space: normal !important;
    transition: none !important;
  }

  .Home_images__1cxPv ul li.Home_currentImage__2rrUs,
  .Home_images__1cxPv ul li:not(.Home_currentImage__2rrUs) {
    opacity: 1 !important;
  }

  .Home_images__1cxPv ul li:first-child {
    margin-left: 6vw !important;
  }

  .Home_images__1cxPv ul li:last-child {
    margin-right: 6vw !important;
  }

  .Home_images__1cxPv ul li a {
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .Home_images__1cxPv ul li a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Parent overflow was clipping the carousel */
  .Home_container__3sao- {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* About */
  .About_container__2eann {
    background-size: contain !important;
    font-size: 100% !important;
    padding: 14vh 0 0 !important;
  }

  .About_mainContainer__1afXD {
    height: auto !important;
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto 160px !important;
    padding: 0 !important;
    display: block !important;
  }

  .About_content__1r7VB {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #fff !important;
    padding: 0 8vw !important;
  }

  .About_content__1r7VB h1 {
    font-size: clamp(64px, 14vw, 120px) !important;
    line-height: 1 !important;
  }

  .About_content__1r7VB h3 {
    font-size: clamp(28px, 5vw, 44px) !important;
    line-height: 1.25 !important;
  }

  .About_content__1r7VB p {
    font-size: clamp(16px, 2.4vw, 22px) !important;
    line-height: 1.45 !important;
  }

  .About_social__J5Qyq {
    display: none !important;
  }

  /* Contact */
  .Contact_container__1spVL {
    background-size: contain !important;
    font-size: 100% !important;
  }

  .Contact_mainContainer__Ozq7q {
    height: auto !important;
    min-height: 100vh !important;
    background: transparent !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 14vh 0 0 !important;
    text-align: center !important;
  }

  .Contact_mainContainer__Ozq7q h1 {
    font-size: clamp(64px, 14vw, 120px) !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
  }

  .Contact_mainContainer__Ozq7q p {
    font-size: clamp(16px, 2.4vw, 22px) !important;
    line-height: 1.45 !important;
    padding: 0 8vw !important;
    max-width: 640px !important;
  }

  .Contact_mainContainer__Ozq7q .Contact_form__14fvc {
    width: 100% !important;
    max-width: 560px !important;
    padding: 0 8vw 140px !important;
  }

  .Contact_mainContainer__Ozq7q .Contact_form__14fvc .Contact_group__2unT3 {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .Contact_mainContainer__Ozq7q
    .Contact_form__14fvc
    .Contact_group__2unT3
    .Contact_input__2O0C3 {
    max-width: 100% !important;
  }

  .Contact_mainContainer__Ozq7q .Contact_form__14fvc input,
  .Contact_mainContainer__Ozq7q .Contact_form__14fvc textarea {
    text-align: center !important;
    font-size: clamp(16px, 2.2vw, 20px) !important;
  }

  .Contact_mainContainer__Ozq7q .Contact_form__14fvc textarea {
    min-height: 12vh !important;
  }

  /* Portfolio grid */
  .Portfolio_container__XqOXN {
    height: auto !important;
    overflow: hidden !important;
    background-size: contain !important;
    font-size: 100% !important;
  }

  .Portfolio_mainContainer__146X_ {
    height: auto !important;
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    background: transparent !important;
    padding: 14vh 4vw 120px !important;
  }

  .Portfolio_mainContainer__146X_ h1 {
    font-size: clamp(64px, 14vw, 120px) !important;
    line-height: 1 !important;
    margin: 0 0 4vh !important;
    text-align: center !important;
  }

  .Portfolio_portfolio__3-1aK {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }

  .Portfolio_portfolio__3-1aK .Portfolio_image__2hPNs {
    width: 48% !important;
    max-width: 48% !important;
    padding: 10px 0 0 !important;
  }

  .PortfolioBtn_portfolioBtn__2nsKc {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  @media only screen and (min-width: 1200px) {
    .Home_container__3sao-,
    .About_container__2eann,
    .Contact_container__1spVL,
    .Portfolio_container__XqOXN {
      background-image: url(/bg-ribbon.png) !important;
      background-color: #0d0a31 !important;
      background-repeat: no-repeat !important;
      /* Full-loop asset: park crown just above the fold */
      background-position: center -4vh !important;
      background-size: 92% !important;
    }

    .RibbonLife_canvas {
      display: none;
    }
  }
}

/* Contact form — Google reCAPTCHA v2 (match Send button centering) */
.Contact_mainContainer__Ozq7q .Contact_form__14fvc .Contact_recaptcha__wrap,
.Contact_recaptcha__wrap {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 2vh auto !important;
}

.Contact_recaptcha__wrap .g-recaptcha,
.Contact_recaptcha__wrap > div {
  margin-left: auto !important;
  margin-right: auto !important;
}