/*
Theme Name: Sophia Crescent
Theme URI: https://sophiacrescent.com
Author: Shelby L. Wood
Description: A cinematic midnight-and-gold artist website theme for Sophia Crescent.
Version: 21.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sophia-crescent
*/

:root {
  --sc-midnight: #08131f;
  --sc-navy: #101c2f;
  --sc-gold: #d9b46a;
  --sc-gold-light: #e8c978;
  --sc-ivory: #f7f2e8;
  --sc-muted: #c9bfae;
  --sc-border: rgba(217, 180, 106, .42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--sc-ivory);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  background:
    radial-gradient(circle at 70% 10%, rgba(232, 201, 120, .1), transparent 28%),
    linear-gradient(180deg, var(--sc-midnight), #02070c 78%);
}

a {
  color: var(--sc-gold-light);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

.sc-wrap {
  width: min(1160px, 92vw);
  margin: 0 auto;
}

/* Header */

.sc-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--sc-border);
  background: rgba(8, 19, 31, .92);
  backdrop-filter: blur(14px);
}

.sc-header-inner {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .7rem 0;
}

.sc-brand {
  display: flex;
  align-items: center;
  color: var(--sc-ivory);
}

.sc-brand img,
.sc-brand img.custom-logo {
  width: auto;
  max-height: 90px;
  transition: all .3s ease;
}

.sc-brand-title {
  display: none;
}

.sc-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-nav a {
  color: var(--sc-ivory);
  font-size: .88rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Hero */

.sc-hero {
  height: 750px;
  min-height: 0;
  margin: 0;
  border: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* General sections */

.sc-section {
  padding: 5rem 0;
}

.sc-section.alt {
  position: relative;
  border-block: 1px solid rgba(217, 180, 106, .18);
  background: rgba(16, 28, 47, .55);
}

.sc-section h2 {
  color: var(--sc-gold-light);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
}

.sc-divider {
  width: 110px;
  height: 1px;
  margin: 1rem auto 2rem;
  background: var(--sc-gold);
  box-shadow: 0 0 16px var(--sc-gold);
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 2rem;
}

.sc-album-art {
  border: 1px solid var(--sc-border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.sc-disclaimer {
  padding: 1rem;
  border: 1px solid var(--sc-border);
  background: rgba(0, 0, 0, .25);
  color: var(--sc-muted);
  text-align: center;
}

/* One-page magical About book */

#about.sc-single-book-section {
  position: relative;
  overflow: hidden;
  padding: 40px 0 64px;
  border-top: 1px solid rgba(217, 180, 106, .26);
  background:
    radial-gradient(ellipse at center, rgba(217, 180, 106, .12), transparent 58%),
    linear-gradient(180deg, rgba(8, 19, 31, .98), rgba(2, 7, 12, .98));
}

#about.sc-single-book-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/about-golden-glitter.gif");
  background-size: cover;
  background-position: center;
  opacity: .24;
  mix-blend-mode: screen;
  pointer-events: none;
}

.sc-single-book {
  --sc-book-image: none;
  width: min(1700px, 98vw);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 36px 34px rgba(0, 0, 0, .62))
    drop-shadow(0 0 26px rgba(217, 180, 106, .15));
}

.sc-single-book-art {
  position: absolute;
  inset: 0;
  background-image: var(--sc-book-image);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-single-book-page {
  position: absolute;
  top: 12%;
  bottom: 15%;
  width: 37%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--sc-ivory);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .78);
}

.sc-single-book-left {
  left: 11.7%;
  padding: 1.8% 3.2%;
}

.sc-single-book-right {
  right: 11.3%;
  padding: 1.8% 3.2%;
}

.sc-single-book-page h2 {
  margin: 0;
  color: var(--sc-gold-light);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.24;
  font-size: clamp(1.25rem, 2.2vw, 2.7rem);
}

.sc-single-book-page p,
.sc-single-book-page li,
.sc-single-book-page blockquote {
  font-size: clamp(.78rem, 1.08vw, 1.08rem);
  line-height: 1.55;
}

.sc-single-book-divider {
  width: 34%;
  height: 1px;
  margin: 1rem auto 1.3rem;
  background: linear-gradient(90deg, transparent, var(--sc-gold-light), transparent);
}

.sc-single-book-portrait {
  width: clamp(110px, 12vw, 205px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1rem;
  object-fit: cover;
  border: 2px solid var(--sc-gold-light);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(217, 180, 106, .08),
    0 0 28px rgba(232, 201, 120, .3);
}

.sc-single-book-page blockquote {
  margin: 1.1rem auto 0;
  color: var(--sc-gold-light);
  text-align: center;
  font-style: italic;
}

.sc-single-book-moon {
  margin-bottom: .45rem;
  color: var(--sc-gold-light);
  text-align: center;
  font-size: clamp(2.5rem, 4.5vw, 5rem);
  line-height: 1;
}

.sc-single-book-pillars {
  width: min(420px, 95%);
  margin: .5rem auto 1rem;
  padding: 0;
  list-style: none;
}

.sc-single-book-pillars li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .58rem .75rem;
  border-bottom: 1px solid rgba(232, 201, 120, .22);
}

.sc-single-book-pillars span {
  color: var(--sc-gold-light);
}

.sc-single-book-signature {
    position: absolute;
    right: 10%;
    bottom: 12%;
    width: 320px;
    max-width: 42%;
    opacity: .95;
    filter:
        drop-shadow(0 0 12px rgba(255,215,120,.45))
        drop-shadow(0 0 30px rgba(255,190,80,.20));
}

.sc-single-book-signature-text {
  margin-top: 1.3rem;
  color: var(--sc-gold-light);
  text-align: center;
  font-family: cursive;
  font-size: clamp(2rem, 3.7vw, 4rem);
}

/* Music */

.sc-music-player-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.sc-song-card {
  padding: 1rem;
  border: 1px solid var(--sc-border);
  background: rgba(8, 19, 31, .62);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.sc-song-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sc-song-card h3 {
  margin: .8rem 0 .2rem;
  color: var(--sc-gold-light);
  font-size: 1rem;
}

.sc-song-card audio {
  width: 100%;
  margin-top: .65rem;
}

/* Journal */

#journal {
  position: relative;
  overflow: hidden;
}

#journal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/about-golden-glitter.gif");
  background-size: cover;
  opacity: .08;
  pointer-events: none;
}

#journal .sc-wrap {
  position: relative;
  z-index: 1;
}

.sc-journal-accordion {
  max-width: 850px;
  margin: 2rem auto 0;
}

.sc-journal-item {
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(217, 180, 106, .35);
  background: rgba(8, 19, 31, .65);
}

.sc-journal-item summary {
  cursor: pointer;
  color: var(--sc-gold-light);
  font-size: 1.1rem;
  letter-spacing: .08em;
}

.sc-journal-content {
  margin-top: 1rem;
}

/* Footer and social spacing */

.sc-footer {
  padding: 2.8rem 1rem;
  border-top: 1px solid var(--sc-border);
  background: #050b12;
  color: var(--sc-muted);
  text-align: center;
}

.sc-footer p {
  max-width: 900px;
  margin: .8rem auto;
}

.sc-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.4rem auto;
  padding: 0;
}

.sc-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: .58rem .9rem;
  border: 1px solid rgba(217, 180, 106, .38);
  border-radius: 999px;
  background: rgba(217, 180, 106, .06);
  color: var(--sc-gold-light);
}

@media (max-width: 1200px) {
  .sc-hero {
    height: 620px;
  }

  .sc-single-book {
    width: 99vw;
  }
}

@media (max-width: 900px) {
  .sc-header-inner {
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
  }

  .sc-nav ul {
    justify-content: center;
  }

  .sc-hero {
    height: 480px;
  }

  .sc-grid {
    grid-template-columns: 1fr;
  }

  .sc-music-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sc-site-header {
    position: relative;
  }

  .sc-brand img,
  .sc-brand img.custom-logo {
    width: 112px;
  }

  .sc-nav ul {
    gap: .7rem;
  }

  .sc-nav a {
    font-size: .75rem;
  }

  .sc-hero {
    height: 330px;
  }

  #about.sc-single-book-section {
    padding: 22px 0 40px;
  }

  .sc-single-book {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .sc-single-book-art {
    background-size: cover;
  }

  .sc-single-book-page {
    top: 10%;
    bottom: 13%;
  }

  .sc-single-book-page h2 {
    font-size: clamp(.75rem, 2.8vw, 1.15rem);
  }

  .sc-single-book-page p,
  .sc-single-book-page li,
  .sc-single-book-page blockquote {
    font-size: clamp(.48rem, 1.65vw, .72rem);
    line-height: 1.38;
  }

  .sc-single-book-portrait{
    width:140px;
    height:140px;
}
	
	.sc-single-book-portrait{
    margin-top:-10px;
    margin-bottom:25px;
}
	
  .sc-single-book-pillars li {
    padding: .25rem .3rem;
  }

  .sc-single-book-signature {
    max-height: 68px;
    margin-top: .5rem;
  }

  .sc-music-player-grid {
    grid-template-columns: 1fr;
  }

  .sc-section {
    padding: 3rem 0;
  }
}

@media (max-width: 480px) {
  .sc-hero {
    height: 260px;
  }

  .sc-wrap {
    width: min(94vw, 1160px);
  }
}

/* Final About book alignment fix */

.sc-single-book {
    width: min(1600px, 96vw);
    aspect-ratio: 1570 / 873;
}

.sc-single-book-art {
    background-size: contain;
    background-position: center;
}

.sc-single-book-page {
    top: 13%;
    bottom: 16%;
    width: 35%;
}

.sc-single-book-left {
    left: 13%;
    padding: 1.5% 2.5%;
}

.sc-single-book-right {
    right: 12.5%;
    padding: 1.5% 2.5%;
}

.sc-single-book-portrait {
    width: clamp(105px, 10vw, 175px);
    margin-bottom: .7rem;
}

.sc-single-book-page h2 {
    font-size: clamp(1.15rem, 1.9vw, 2.35rem);
    line-height: 1.2;
}

.sc-single-book-page p,
.sc-single-book-page li,
.sc-single-book-page blockquote {
    font-size: clamp(.76rem, .92vw, 1rem);
    line-height: 1.5;
}

.sc-single-book-pillars {
    width: min(380px, 94%);
}

.sc-single-book-signature {
    width: min(340px, 80%);
    max-height: 95px;
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .sc-single-book {
        width: 100vw;
        aspect-ratio: 1570 / 873;
    }

    .sc-single-book-page {
        top: 12%;
        bottom: 15%;
    }

    .sc-single-book-left {
        left: 12%;
    }

    .sc-single-book-right {
        right: 12%;
    }
}

/* =====================================================
   FINAL ABOUT BOOK CONTENT BALANCE
===================================================== */

/* Give both pages more usable room */
.sc-single-book-page {
    top: 11.5%;
    bottom: 13.5%;
    justify-content: flex-start;
}

/* Move left-page content slightly inward */
.sc-single-book-left {
    left: 12.3%;
    padding: 1.5% 2.6%;
}

/* Keep right page balanced */
.sc-single-book-right {
    right: 12%;
    padding: 1.5% 2.8%;
}

/* Smaller portrait to create biography space */
.sc-single-book-portrait {
    width: clamp(90px, 8.5vw, 145px);
    margin: 0 auto .65rem;
}

/* Smaller About heading */
.sc-single-book-left h2 {
    max-width: 95%;
    margin: 0 auto;
    font-size: clamp(1rem, 1.65vw, 2rem);
    line-height: 1.16;
    letter-spacing: .08em;
}

/* Slightly smaller divider */
.sc-single-book-left .sc-single-book-divider {
    margin: .65rem auto .85rem;
}

/* Allow a much longer biography */
.sc-single-book-left > p {
    width: 100%;
    max-width: 560px;
    max-height: 185px;
    margin: 0 auto;
    padding-right: 8px;

    overflow-y: auto;

    font-size: clamp(.68rem, .82vw, .92rem);
    line-height: 1.48;
    text-align: left;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(232, 201, 120, .65)
        rgba(0, 0, 0, .18);
}

.sc-single-book-left > p::-webkit-scrollbar {
    width: 5px;
}

.sc-single-book-left > p::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .18);
}

.sc-single-book-left > p::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(232, 201, 120, .65);
}

/* Keep quote below the biography */
.sc-single-book-left blockquote {
    margin: .75rem auto 0;
    font-size: clamp(.67rem, .82vw, .9rem);
}

/* Right-page heading slightly smaller */
.sc-single-book-right h2 {
    font-size: clamp(1.15rem, 1.9vw, 2.3rem);
}

/* Make pillars slightly more compact */
.sc-single-book-pillars li {
    padding: .42rem .7rem;
}

/* Make the actual visible signature much larger */
.sc-single-book-signature {
    position: absolute;
    left: 50%;
    bottom: 7%;

    width: 430px;
    max-width: 92%;
    max-height: none;
    margin: 0;

    object-fit: contain;

    transform:
        translateX(-50%)
        scale(1.45);

    transform-origin: center;

    filter:
        drop-shadow(0 0 10px rgba(232, 201, 120, .45))
        drop-shadow(0 0 24px rgba(217, 180, 106, .22));
}

/* Text fallback */
.sc-single-book-signature-text {
    position: absolute;
    left: 50%;
    bottom: 9%;

    width: 100%;
    margin: 0;

    transform: translateX(-50%);

    font-size: clamp(2rem, 4vw, 4.4rem);
}

/* =====================================================
   SOPHIA CONTACT POPUP
===================================================== */

#sophia-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(2, 7, 12, 0.82);
    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

#sophia-contact-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#sophia-contact-modal .sc-contact-card,
#sophia-contact-modal .sc-popup-card {
    position: relative;

    width: min(620px, 94vw);
    max-height: 90vh;
    overflow-y: auto;

    padding: 48px 42px 40px;

    border: 1px solid rgba(217, 180, 106, 0.7);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at top,
            rgba(217, 180, 106, 0.1),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(16, 28, 47, 0.99),
            rgba(5, 13, 22, 0.99)
        );

    color: #f7f2e8;
    text-align: center;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 35px rgba(217, 180, 106, 0.14);
}

#sophia-contact-modal h2 {
    margin: 0 0 12px;

    color: #e8c978;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

#sophia-contact-modal .sc-contact-close,
#sophia-contact-modal [data-contact-close] {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(217, 180, 106, 0.5);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.25);
    color: #e8c978;

    font-size: 1.4rem;
    line-height: 1;

    cursor: pointer;
}

#sophia-contact-modal .sc-contact-form {
    display: grid;
    gap: 16px;

    margin-top: 26px;
    text-align: left;
}

#sophia-contact-modal .sc-contact-form label {
    display: grid;
    gap: 6px;

    color: #e8c978;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
}

#sophia-contact-modal input,
#sophia-contact-modal textarea {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(217, 180, 106, 0.38);
    border-radius: 7px;

    background: rgba(0, 0, 0, 0.3);
    color: #f7f2e8;

    font: inherit;
}

#sophia-contact-modal textarea {
    min-height: 140px;
    resize: vertical;
}

#sophia-contact-modal button[type="submit"] {
    justify-self: center;

    padding: 12px 28px;

    border: 1px solid rgba(217, 180, 106, 0.72);
    border-radius: 999px;

    background: rgba(217, 180, 106, 0.1);
    color: #e8c978;

    cursor: pointer;
}

body.sophia-contact-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    #sophia-contact-modal {
        padding: 14px;
    }

    #sophia-contact-modal .sc-contact-card,
    #sophia-contact-modal .sc-popup-card {
        padding: 42px 22px 30px;
    }
}

#sophia-contact-modal,
.sc-contact-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#sophia-contact-modal.is-visible,
.sc-contact-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sc-single-book-left > p {
    max-width: 590px;
    line-height: 1.58;
}

.sc-single-book-left blockquote {
    margin-top: 1rem;
}

.sc-single-book-signature {
    bottom: 5%;
    width: 460px;
    max-width: 94%;
}

.sc-single-book-portrait {
    transform: translateY(40px);
}

.sc-single-book-left h2 {
    transform: translateY(40px);
}

.sc-single-book-left > p {
    transform: translateY(40px);
}

.sc-single-book-left blockquote {
    transform: translateY(40px);
}