/* ===================================================================
   Tiffany Pham — Official Website
   =================================================================== */

/* --- Reset & Custom Properties --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --ink: #070707;
  --cream: #f0ebe3;
  --gold: #b8956a;
  --gold-lt: #d4b896;
  --muted: #6e6960;
  --dim: rgba(240,235,227,0.35);
  --hand: 'La Belle Aurore', cursive;
  --serif: 'Instrument Serif', serif;
  --body: 'Outfit', sans-serif;
}

html { scroll-behavior: smooth }

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===================== NAV ===================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.4rem 2.5rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .5s;
}
nav.scrolled { background: rgba(7,7,7,.88); backdrop-filter: blur(25px) }

.n-logo {
  font-family: var(--hand); font-size: 1.6rem;
  color: var(--cream); text-decoration: none;
}
.n-links { display: flex; gap: 2rem; align-items: center }
.n-links a {
  font-family: var(--hand); font-size: 1.1rem;
  color: var(--cream); text-decoration: none;
  transition: opacity .3s; opacity: .75;
}
.n-links a:hover { opacity: 1 }

/* Social row below nav links on desktop */
.n-social-row {
  position: fixed; top: 3.5rem; right: 2.5rem; z-index: 100;
  display: flex; gap: 1rem;
}
.n-social-row a {
  font-size: .5rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--dim); text-decoration: none; transition: color .3s;
}
.n-social-row a:hover { color: var(--cream) }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; z-index: 200; background: none; border: none; padding: 8px;
}
.hamburger span {
  width: 22px; height: 1.5px; background: var(--cream);
  display: block; transition: transform .3s, opacity .3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hamburger.active span:nth-child(2) { opacity: 0 }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* Mobile nav overlay */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: rgba(7,7,7,.96); backdrop-filter: blur(30px);
  flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.mobile-nav.open { opacity: 1; pointer-events: all }
.mobile-nav a {
  font-family: var(--hand); font-size: 1.8rem;
  color: var(--cream); text-decoration: none;
  opacity: .7; transition: opacity .3s;
}
.mobile-nav a:hover { opacity: 1 }
.mobile-nav .mob-social { display: flex; gap: 1.5rem; margin-top: 2rem }
.mobile-nav .mob-social a {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--gold);
}

/* ===================== HERO ===================== */
.hero {
  height: 100vh; width: 100%; position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 20%;
  filter: brightness(.55) contrast(1.08);
  transform: scale(1.05);
  animation: zoomSlow 30s ease-in-out infinite alternate;
}
@keyframes zoomSlow { 0% { transform: scale(1.05) } 100% { transform: scale(1) } }

.hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(7,7,7,.15) 0%, transparent 30%,
    rgba(7,7,7,.5) 85%, var(--ink) 100%);
}
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  opacity: 0; animation: rise 1s 1.2s forwards;
}
.hero-scroll span {
  font-size: .5rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold);
}
.scroll-bar {
  width: 1px; height: 45px; background: var(--gold);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: .2; transform: scaleY(.4) }
  50% { opacity: 1; transform: scaleY(1) }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(25px) translateX(-50%) }
  to   { opacity: 1; transform: translateY(0) translateX(-50%) }
}

/* ===================== SECTION STYLING ===================== */
.s-label {
  font-size: .55rem; text-transform: uppercase; letter-spacing: .3em;
  color: var(--gold); margin-bottom: .8rem; font-weight: 400;
}
.s-title {
  font-family: var(--hand);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400; line-height: 1.1;
}

/* ===================== MIRROR IMAGE ===================== */
.mirror-sec {
  width: 100%; position: relative; overflow: hidden;
  aspect-ratio: 16/9; max-height: 75vh;
}
.mirror-sec img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  filter: brightness(.6) contrast(1.08) saturate(.9);
  transition: transform 1.2s ease;
}
.mirror-sec:hover img { transform: scale(1.02) }
.mirror-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 12%, transparent 88%, var(--ink) 100%);
}
.mirror-text {
  position: absolute; bottom: 10%; right: 6%; z-index: 2; text-align: right;
}
.mirror-text .hand-q {
  font-family: var(--hand);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--cream); line-height: 1.25; opacity: .8;
}

/* ===================== WORK GRID ===================== */
.latest { padding: 2rem 2rem 5rem; max-width: 1400px; margin: 0 auto }
.latest-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2rem; padding: 0 .5rem;
}
.view-all {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(184,149,106,.3);
  padding-bottom: 2px; transition: border-color .3s;
}
.view-all:hover { border-color: var(--gold) }

.work-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px }
.work-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer;
  background: rgba(240,235,227,.03);
  text-decoration: none; color: var(--cream); display: block;
}
.work-card-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 1s cubic-bezier(.25,.1,.25,1), filter .8s;
  filter: brightness(.35) saturate(.85);
}
.work-card:hover .work-card-bg { transform: scale(1.07); filter: brightness(.2) saturate(1) }
.work-card-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem;
}
.wc-type {
  font-size: .5rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold); margin-bottom: .4rem;
}
.wc-title {
  font-family: var(--hand);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400; line-height: 1.1;
}
.wc-year { font-size: .65rem; color: var(--muted); margin-top: .3rem }
.wc-desc {
  font-size: .78rem; color: rgba(240,235,227,.35);
  margin-top: .6rem; font-weight: 300;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: all .5s ease; line-height: 1.6;
}
.work-card:hover .wc-desc { max-height: 80px; opacity: 1 }
.wc-arrow {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 36px; height: 36px;
  border: 1px solid rgba(184,149,106,.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: .85rem;
  opacity: 0; transition: opacity .4s;
}
.work-card:hover .wc-arrow { opacity: 1 }

/* ===================== FULL WIDTH IMAGE BREAK ===================== */
.img-break {
  width: 100%; position: relative; overflow: hidden; max-height: 80vh;
}
.img-break img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: brightness(.5) contrast(1.05) saturate(.85);
  transition: transform 1.5s ease;
}
.img-break:hover img { transform: scale(1.02) }
.img-break-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 10%, transparent 90%, var(--ink) 100%);
}

/* ===================== ART ===================== */
.art-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.art-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 2.5rem }
.art-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 4/5; background: rgba(240,235,227,.03);
}
.art-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.85) saturate(.95);
  transition: transform 1s cubic-bezier(.25,.1,.25,1), filter .6s;
}
.art-card:hover img { transform: scale(1.05); filter: brightness(.5) saturate(1) }
.art-card-info {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1.5rem;
  opacity: 0; transition: opacity .5s;
  background: linear-gradient(to top, rgba(7,7,7,.7) 0%, transparent 50%);
}
.art-card:hover .art-card-info { opacity: 1 }
.art-card-title { font-family: var(--hand); font-size: 1.2rem; line-height: 1.2 }
.art-card-medium {
  font-size: .5rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gold); margin-top: .3rem;
}

/* Masonry-style: make some cards span 2 rows */
.art-card.tall { grid-row: span 2; aspect-ratio: auto }
.art-card.wide { grid-column: span 2; aspect-ratio: 16/9 }

/* ===================== LIMITED EDITION PRINTS ===================== */
.print-card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
  background: rgba(240,235,227,.03);
  border: 1px solid rgba(240,235,227,.06);
  border-radius: 6px; padding: 3rem;
  transition: border-color .4s;
}
.print-card:hover { border-color: rgba(184,149,106,.3) }
.print-card-img { display: flex; justify-content: center }
.print-mat {
  background: #fff; padding: 24px 24px 40px 24px;
  box-shadow: 8px 8px 30px rgba(0,0,0,.15);
  max-width: 380px; width: 100%;
}
.print-mat img { width: 100%; display: block; filter: contrast(1.02) }
.print-info-line {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 8px;
  border-top: 1px solid #e8e0d8;
}
.print-card-title {
  font-family: var(--hand); font-size: .95rem; color: var(--ink);
}
.print-card-ed {
  font-size: .55rem; letter-spacing: .15em; color: #8c8580;
}
.print-card-label {
  font-size: .45rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold); margin-bottom: .6rem;
}
.print-card-name {
  font-family: var(--hand); font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2; margin-bottom: 1rem;
}
.print-card-desc {
  font-size: .82rem; color: var(--muted); font-weight: 300;
  line-height: 1.7; margin-bottom: .8rem;
}
.print-specs {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0;
}
.print-spec {
  font-size: .4rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--gold); border: 1px solid rgba(184,149,106,.25);
  padding: .3rem .8rem; border-radius: 20px;
}
.print-prices {
  display: flex; gap: 2rem; margin: 1.5rem 0 .8rem;
}
.print-price-opt { text-align: center }
.print-price {
  font-family: var(--serif); font-size: 1.4rem; color: var(--cream);
}
.print-size {
  font-size: .55rem; color: var(--muted); letter-spacing: .1em;
  margin-top: .2rem;
}
.print-ship {
  font-size: .7rem; color: var(--muted); font-weight: 300;
  font-style: italic; margin-bottom: 1.5rem;
}
.print-inquire {
  display: inline-block; padding: .7rem 2rem;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--body); font-size: .6rem;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: background .3s, color .3s;
}
.print-inquire:hover { background: var(--gold); color: var(--ink) }

@media (max-width: 768px) {
  .print-card { grid-template-columns: 1fr; padding: 2rem }
  .print-mat { max-width: 300px; margin: 0 auto }
}
@media (max-width: 480px) {
  .print-card { padding: 1.5rem; gap: 2rem }
  .print-mat { max-width: 260px; padding: 16px 16px 32px }
  .print-prices { gap: 1.5rem }
  .print-price { font-size: 1.2rem }
}

/* ===================== MUSIC ===================== */
/* Upcoming performance */
.upcoming-sec { padding: 3rem 2rem 0; max-width: 1400px; margin: 0 auto }
.upcoming-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: stretch;
}
.upcoming-row > div { display: flex; flex-direction: column }
.upcoming-row .upcoming-card { flex: 1 }
@media (max-width: 768px) {
  .upcoming-row { grid-template-columns: 1fr }
}
.upcoming-card {
  border: 1px solid rgba(240,235,227,0.12);
  border-radius: 12px;
  padding: 2.5rem;
  background: rgba(240,235,227,0.03);
}
.upcoming-date {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--cream);
  margin-bottom: .4rem;
}
.upcoming-venue {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--gold);
}
.upcoming-location {
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.upcoming-time {
  font-size: .9rem;
  color: var(--dim);
  margin-bottom: .8rem;
}
.upcoming-note {
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
}

.music-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.music-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2.5rem; padding: 0 .5rem;
}

/* Albums grid */
.albums-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-bottom: 4rem;
}
.album-card {
  background: rgba(240,235,227,.03);
  border: 1px solid rgba(240,235,227,.06);
  border-radius: 6px; overflow: hidden;
  transition: border-color .4s, transform .3s;
}
.album-card:hover { border-color: rgba(184,149,106,.3); transform: translateY(-3px) }
.album-cover { width: 100%; aspect-ratio: 1/1; overflow: hidden }
.album-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.album-card:hover .album-cover img { transform: scale(1.03) }
.album-info { padding: 1.5rem }
.album-type {
  font-size: .45rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold); margin-bottom: .4rem;
}
.album-title {
  font-family: var(--hand); font-size: 1.5rem;
  line-height: 1.2; margin-bottom: .3rem;
}
.album-year { font-size: .65rem; color: var(--muted); margin-bottom: 1rem }
.album-embed { width: 100%; border-radius: 4px; overflow: hidden }
.album-embed iframe { display: block }

/* Singles grid */
.singles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 2rem;
}
.single-card {
  background: rgba(240,235,227,.03);
  border: 1px solid rgba(240,235,227,.06);
  border-radius: 6px; overflow: hidden;
  transition: border-color .4s, transform .3s;
}
.single-card:hover { border-color: rgba(184,149,106,.3); transform: translateY(-3px) }
.single-cover { width: 100%; aspect-ratio: 1/1; overflow: hidden }
.single-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.single-card:hover .single-cover img { transform: scale(1.03) }
.single-info { padding: 1.2rem }
.single-title {
  font-family: var(--hand); font-size: 1.15rem;
  line-height: 1.2; margin-bottom: .2rem;
}
.single-year { font-size: .6rem; color: var(--muted); margin-bottom: .8rem }
.single-embed { width: 100%; border-radius: 4px; overflow: hidden }
.single-embed iframe { display: block }

/* Streaming links */
.stream-links {
  display: flex; gap: 1rem; justify-content: center;
  margin-top: 3rem; flex-wrap: wrap;
}
.stream-link {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(184,149,106,.3);
  padding: .7rem 2rem; border-radius: 2px;
  transition: background .3s, color .3s;
}
.stream-link:hover { background: var(--gold); color: var(--ink) }

@media (max-width: 768px) {
  .albums-grid { grid-template-columns: 1fr; gap: 1.5rem }
  .singles-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem }
}
@media (max-width: 480px) {
  .singles-grid { grid-template-columns: 1fr }
  .album-title { font-size: 1.3rem }
  .single-title { font-size: 1rem }
  .stream-links { flex-direction: column; align-items: center }
}
.tracks { list-style: none }
.trk {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem .5rem;
  border-bottom: 1px solid rgba(240,235,227,.06);
  cursor: pointer; transition: background .3s;
}
.trk:hover { background: rgba(240,235,227,.03) }
.trk-n { font-size: .65rem; color: var(--muted); width: 1.5rem; text-align: right }
.trk-name { flex: 1; font-size: .88rem; font-weight: 300 }
.trk-d { font-size: .65rem; color: var(--muted) }
.trk-play {
  width: 28px; height: 28px;
  border: 1px solid rgba(184,149,106,.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, transform .2s;
}
.trk-play svg { width: 8px; fill: var(--gold) }
.trk:hover .trk-play { border-color: var(--gold); transform: scale(1.1) }
.trk.playing .trk-play { background: var(--gold) }
.trk.playing .trk-play svg { fill: var(--ink) }

/* ===================== FILMS ===================== */
.films-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.films-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 2.5rem }
.film-card {
  position: relative; overflow: hidden; border-radius: 6px;
  background: rgba(240,235,227,.03);
  border: 1px solid rgba(240,235,227,.06);
  transition: border-color .4s, transform .3s; cursor: pointer;
  text-decoration: none; color: var(--cream);
}
.film-card:hover { border-color: rgba(184,149,106,.3); transform: translateY(-3px) }
.film-poster {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.film-poster-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.4) saturate(.85);
  transition: transform .8s ease, filter .5s;
}
.film-card:hover .film-poster-bg { transform: scale(1.05); filter: brightness(.25) saturate(1) }
.film-play {
  position: relative; z-index: 2;
  width: 50px; height: 50px;
  border: 1.5px solid rgba(184,149,106,.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s, transform .3s;
}
.film-card:hover .film-play { opacity: 1; transform: scale(1.05) }
.film-poster-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.4) saturate(.85);
  transition: transform .8s ease, filter .5s;
}
.film-card:hover .film-poster-video { transform: scale(1.05); filter: brightness(.25) saturate(1) }
.film-play svg { width: 14px; height: 14px; fill: var(--gold); margin-left: 3px }
.film-info { padding: 1.5rem }
.film-role {
  font-size: .45rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold); margin-bottom: .4rem;
}
.film-title { font-family: var(--hand); font-size: 1.5rem; line-height: 1.2; margin-bottom: .3rem }
.film-year { font-size: .65rem; color: var(--muted); margin-bottom: .6rem }
.film-desc { font-size: .78rem; color: rgba(240,235,227,.45); font-weight: 300; line-height: 1.6 }
.film-tags { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap }
.film-tag {
  font-size: .4rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--gold); border: 1px solid rgba(184,149,106,.2);
  padding: .25rem .7rem; border-radius: 20px;
}

/* ===================== BOOKS ===================== */
.books-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.books-row {
  display: flex; align-items: flex-start; gap: 3rem;
  margin-top: 2.5rem; flex-wrap: wrap; justify-content: center;
}
.book-cov {
  width: 210px; height: 315px; border-radius: 4px;
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 12px 12px 40px rgba(0,0,0,.5);
  transition: transform .5s, box-shadow .5s; flex-shrink: 0;
}
.book-cov:hover { transform: translateY(-6px); box-shadow: 16px 16px 50px rgba(0,0,0,.6) }
a.book-cov { text-decoration: none; color: inherit }
.book-cov.gold { background: linear-gradient(135deg, #b8956a, #d4b896, #a07a52) }
.book-cov.rose { background: linear-gradient(135deg, #c49aab, #e8c5d3, #a67d8e) }
.bc-lbl {
  font-size: .45rem; text-transform: uppercase;
  letter-spacing: .25em; color: rgba(7,7,7,.6); margin-bottom: .6rem;
}
.bc-ttl {
  font-family: var(--hand); font-size: 1.5rem;
  color: var(--ink); line-height: 1.15; margin-bottom: .4rem;
}
.bc-auth {
  font-size: .55rem; text-transform: uppercase;
  letter-spacing: .2em; color: rgba(7,7,7,.5);
}
.bc-badge {
  position: absolute; bottom: 1rem;
  font-size: .4rem; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(7,7,7,.45); border: 1px solid rgba(7,7,7,.15);
  padding: .25rem .8rem; border-radius: 20px;
}
.book-info { max-width: 320px }
.book-info p {
  font-size: .82rem; color: var(--muted); font-weight: 300;
  line-height: 1.7; margin-top: 1rem;
}
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem }
.pill {
  font-size: .45rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--gold); border: 1px solid rgba(184,149,106,.25);
  padding: .35rem .9rem; border-radius: 20px;
}

/* ===================== COMPANIES ===================== */
.co-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.co-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2.5rem }
.co-card {
  background: rgba(240,235,227,.03); border: 1px solid rgba(240,235,227,.06);
  border-radius: 6px; padding: 2rem;
  transition: border-color .4s, transform .3s;
  text-decoration: none; color: var(--cream);
}
.co-card:hover { border-color: rgba(184,149,106,.3); transform: translateY(-3px) }
.co-name { font-family: var(--hand); font-size: 1.4rem; margin-bottom: .3rem }
.co-type {
  font-size: .5rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gold); margin-bottom: .8rem;
}
.co-desc { font-size: .78rem; color: var(--muted); font-weight: 300; line-height: 1.6 }

/* ===================== MERCH ===================== */
.merch-sec { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto }
.merch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem }
.merch-card {
  position: relative; overflow: hidden; border-radius: 6px;
  background: rgba(240,235,227,.03);
  border: 1px solid rgba(240,235,227,.06);
  transition: border-color .4s, transform .3s; cursor: pointer;
  text-decoration: none; color: var(--cream);
}
.merch-card:hover { border-color: rgba(184,149,106,.3); transform: translateY(-3px) }
.merch-img {
  width: 100%; aspect-ratio: 1/1;
  overflow: hidden; position: relative;
  background-size: cover; background-position: center;
  filter: brightness(.85) saturate(.9);
  transition: filter .5s, transform .5s;
}
.merch-card:hover .merch-img { filter: brightness(.7) saturate(1); transform: scale(1.03) }
.merch-img img { width: 100%; height: 100%; object-fit: cover }
.merch-info { padding: 1.2rem 1.5rem 1.5rem }
.merch-tag {
  font-size: .45rem; text-transform: uppercase;
  letter-spacing: .25em; color: var(--gold); margin-bottom: .4rem;
}
.merch-name {
  font-family: var(--hand); font-size: 1.3rem;
  line-height: 1.2; margin-bottom: .3rem;
}
.merch-price { font-size: .75rem; color: var(--muted); font-weight: 300 }
.merch-badge {
  position: absolute; top: 1rem; left: 1rem;
  font-size: .4rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink); background: var(--gold);
  padding: .3rem .8rem; border-radius: 20px; font-weight: 500;
}
.merch-cta {
  display: inline-block; margin-top: 2.5rem;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink); background: var(--gold);
  padding: .85rem 2.5rem; border-radius: 2px; text-decoration: none;
  transition: background .3s; font-weight: 500;
}
.merch-cta:hover { background: var(--gold-lt) }

/* ===================== ABOUT BIO ===================== */
.about-bio {
  max-width: 680px; margin: 0 auto; padding: 0 2rem 3rem;
}
.about-p {
  font-size: 1.05rem; font-weight: 300; color: var(--cream);
  line-height: 1.85; margin-bottom: 1.5rem; opacity: .85;
}
.about-p a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(184,149,106,.25);
  transition: border-color .3s;
}
.about-p a:hover { border-color: var(--gold) }
.about-p em { font-style: italic }

/* ===================== SIGN UP ===================== */
.signup-sec { padding: 5rem 2rem; text-align: center; max-width: 600px; margin: 0 auto }
.signup-desc {
  font-size: .82rem; color: var(--muted); font-weight: 300;
  margin-bottom: 2rem; max-width: 360px;
  margin-left: auto; margin-right: auto; line-height: 1.6;
}
.signup-form { display: flex; gap: 0; max-width: 380px; margin: 0 auto }
.signup-form input {
  flex: 1; background: transparent;
  border: 1px solid rgba(240,235,227,.12); border-right: none;
  padding: .75rem 1rem; color: var(--cream);
  font-family: var(--body); font-size: .78rem;
  outline: none; transition: border-color .3s;
}
.signup-form input:focus { border-color: var(--gold) }
.signup-form input::placeholder { color: var(--muted) }
.signup-form button {
  background: var(--gold); border: none; color: var(--ink);
  padding: .75rem 1.6rem; font-family: var(--body); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .2em; cursor: pointer;
  transition: background .3s; font-weight: 500;
}
.signup-form button:hover { background: var(--gold-lt) }
.signup-form button:disabled { opacity: .5; cursor: not-allowed }
.form-msg {
  font-size: .7rem; margin-top: .8rem; opacity: 0;
  transition: opacity .4s; min-height: 1.2rem;
}
.form-msg.show { opacity: 1 }
.form-msg.success { color: var(--gold) }
.form-msg.error { color: #c97070 }

/* ===================== SUBPAGE HERO ===================== */
.sub-hero {
  padding: 10rem 2rem 4rem;
  max-width: 1400px; margin: 0 auto;
}
.sub-hero .s-label { margin-bottom: .6rem }
.sub-hero .s-title { font-size: clamp(2.5rem, 5vw, 4rem) }

@media (max-width: 768px) {
  .sub-hero { padding: 8rem 1.5rem 3rem }
}
@media (max-width: 480px) {
  .sub-hero { padding: 7rem 1rem 2.5rem }
  .sub-hero .s-title { font-size: clamp(2rem, 7vw, 3rem) }
}

/* ===================== FOOTER ===================== */
footer {
  padding: 3rem 2.5rem;
  border-top: 1px solid rgba(240,235,227,.06);
}
.f-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}
.f-social { display: flex; gap: 2rem }
.f-social a {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--muted); text-decoration: none; transition: color .3s;
}
.f-social a:hover { color: var(--cream) }
.f-copy { font-size: .55rem; color: var(--muted); letter-spacing: .08em }

/* ===================== SCROLL REVEAL ===================== */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease }
.rv.vis { opacity: 1; transform: translateY(0) }
.rv-d1 { transition-delay: .12s }
.rv-d2 { transition-delay: .24s }
.rv-d3 { transition-delay: .36s }

/* ===================== LIGHTBOX ===================== */
.art-card { cursor: pointer }

.lb-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(7,7,7,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.lb-overlay.open {
  opacity: 1; pointer-events: auto;
}
.lb-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  color: var(--cream); font-size: 2.2rem;
  cursor: pointer; z-index: 10;
  line-height: 1;
}
.lb-close:hover { color: var(--gold) }
.lb-content {
  display: flex; flex-direction: column; align-items: center;
  max-width: 90vw; max-height: 90vh; gap: 1.5rem;
}
.lb-img {
  max-width: 100%; max-height: 70vh;
  object-fit: contain; border-radius: 4px;
}
.lb-info { text-align: center }
.lb-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--cream);
  margin-bottom: .3rem;
}
.lb-medium {
  font-size: .8rem; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.lb-inquire {
  display: inline-block;
  padding: .6rem 2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--body);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background .3s, color .3s;
}
.lb-inquire:hover {
  background: var(--gold);
  color: var(--ink);
}

/* ===================== RESPONSIVE — TABLET (1024px) ===================== */
@media (max-width: 1024px) {
  .n-links { display: none }
  .n-social-row { display: none }
  .hamburger { display: flex }
  .mobile-nav { display: flex }

  .work-grid { grid-template-columns: 1fr 1fr }
  .co-grid { grid-template-columns: 1fr 1fr }
  .merch-grid { grid-template-columns: 1fr 1fr }
  .art-grid { grid-template-columns: 1fr 1fr }
  .art-card.tall { grid-row: span 1; aspect-ratio: 4/5 }
  .art-card.wide { grid-column: span 1; aspect-ratio: 4/5 }

  .books-row { flex-direction: column; align-items: center }

  .latest { padding: 2rem 1.5rem 4rem }
  .music-sec { padding: 4rem 1.5rem }
  .art-sec { padding: 4rem 1.5rem }
  .films-sec { padding: 4rem 1.5rem }
  .films-grid { grid-template-columns: 1fr }
  .books-sec { padding: 4rem 1.5rem }
  .co-sec { padding: 4rem 1.5rem }
  .merch-sec { padding: 4rem 1.5rem }
  .signup-sec { padding: 4rem 1.5rem }

  .work-card-inner { padding: 1.5rem }
  .mirror-text { bottom: 8%; right: 5% }
}

/* ===================== RESPONSIVE — SMALL TABLET (768px) ===================== */
@media (max-width: 768px) {
  nav { padding: 1.1rem 1.5rem }
  .n-logo { font-size: 1.4rem }

  .hero { height: 90vh }
  .hero-bg { background-position: center center }

  .mirror-sec { aspect-ratio: 4/3; max-height: 60vh }
  .mirror-text { bottom: 6%; right: 4% }
  .mirror-text .hand-q { font-size: clamp(1.2rem, 4vw, 1.8rem) }
  .img-break { max-height: 55vh }

  .work-card .wc-desc { max-height: 60px; opacity: .6 }
  .work-card .wc-arrow { opacity: .6 }

  .art-card .art-card-info {
    opacity: 1;
    background: linear-gradient(to top, rgba(7,7,7,.8) 0%, transparent 60%);
  }

  .trk { gap: 1rem; padding: 1rem .5rem }
  .trk-name { font-size: .82rem }

  .book-cov { width: 190px; height: 285px }
  .book-info { text-align: center; max-width: 280px }
  .pills { justify-content: center }

  .co-card { padding: 1.5rem }

  .merch-img svg { width: 60px; height: 60px }

  .f-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem }
  .f-social { flex-wrap: wrap; justify-content: center }
}

/* ===================== RESPONSIVE — MOBILE (480px) ===================== */
@media (max-width: 480px) {
  nav { padding: .9rem 1rem }
  .n-logo { font-size: 1.2rem }

  .hero { height: 80vh }
  .hero-scroll span { font-size: .45rem }
  .scroll-bar { height: 35px }

  .s-title { font-size: clamp(1.5rem, 6vw, 2.2rem) }
  .s-label { font-size: .5rem; letter-spacing: .25em }

  .mirror-sec { aspect-ratio: 3/2; max-height: 45vh }
  .mirror-text .hand-q { font-size: 1.1rem }
  .img-break { max-height: 40vh }

  .work-grid { grid-template-columns: 1fr 1fr }
  .work-card-inner { padding: 1.2rem }
  .wc-title { font-size: clamp(1.4rem, 5vw, 2rem) }

  .art-grid { grid-template-columns: 1fr 1fr; gap: 3px }
  .art-card { aspect-ratio: 3/4 }
  .art-card.tall { grid-row: span 1; aspect-ratio: 3/4 }
  .art-card.wide { grid-column: span 1; aspect-ratio: 3/4 }
  .art-card-title { font-size: 1rem }
  .art-card-medium { font-size: .4rem }
  .art-card-info { padding: 1rem }

  .trk { gap: .8rem; padding: .85rem .3rem }
  .trk-name { font-size: .8rem }
  .trk-n { font-size: .6rem; width: 1.2rem }
  .trk-d { font-size: .6rem }
  .trk-play { width: 24px; height: 24px }
  .trk-play svg { width: 6px }
  .music-head { flex-direction: column; align-items: flex-start; gap: .8rem }

  .book-cov { width: 160px; height: 240px }
  .bc-ttl { font-size: 1.3rem }
  .bc-lbl { font-size: .4rem }
  .bc-auth { font-size: .5rem }
  .book-info p { font-size: .78rem }

  .co-grid { grid-template-columns: 1fr }
  .co-card { padding: 1.2rem }
  .co-name { font-size: 1.2rem }

  .merch-grid { grid-template-columns: 1fr }
  .merch-img { aspect-ratio: 4/3 }
  .merch-name { font-size: 1.1rem }
  .merch-cta { padding: .75rem 2rem; font-size: .55rem }

  .signup-form { flex-direction: column; max-width: 100% }
  .signup-form input {
    border-right: 1px solid rgba(240,235,227,.12);
    border-bottom: none; padding: .9rem 1rem;
  }
  .signup-form button { padding: .9rem }

  .latest { padding: 1.5rem 1rem 3rem }
  .music-sec { padding: 2.5rem 1rem }
  .art-sec { padding: 2.5rem 1rem }
  .films-sec { padding: 2.5rem 1rem }
  .film-info { padding: 1.2rem }
  .film-title { font-size: 1.3rem }
  .film-play { width: 40px; height: 40px }
  .books-sec { padding: 2.5rem 1rem }
  .co-sec { padding: 2.5rem 1rem }
  .merch-sec { padding: 2.5rem 1rem }
  .signup-sec { padding: 2.5rem 1rem }

  .f-social { gap: 1.2rem }
  .f-social a { font-size: .65rem }

  .mobile-nav a { font-size: 1.5rem }
  .mobile-nav { gap: 1.5rem }
}

/* ===================== RESPONSIVE — SMALL PHONE (360px) ===================== */
@media (max-width: 360px) {
  .hero { height: 75vh }
  .n-logo { font-size: 1.1rem }
  .s-title { font-size: clamp(1.3rem, 7vw, 1.8rem) }
  .art-grid { grid-template-columns: 1fr; gap: 2px }
  .art-card { aspect-ratio: 4/5 }
  .art-card.tall { aspect-ratio: 4/5 }
  .work-grid { grid-template-columns: 1fr }
  .work-card { aspect-ratio: 3/4 }
  .book-cov { width: 140px; height: 210px }
  .bc-ttl { font-size: 1.1rem }
  .mobile-nav a { font-size: 1.3rem }
  .mobile-nav { gap: 1.2rem }
  .mob-social { flex-wrap: wrap; justify-content: center }
}

/* ===================== LANDSCAPE MOBILE ===================== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { height: 100vh }
  .hero-scroll { bottom: 1rem }
  .mobile-nav { gap: 1rem; padding: 1rem }
  .mobile-nav a { font-size: 1.2rem }
}

/* ===================== TOUCH DEVICES ===================== */
@media (hover: none) {
  .work-card .wc-desc { max-height: 60px; opacity: .5 }
  .work-card .wc-arrow { opacity: .5 }
  .art-card .art-card-info {
    opacity: 1;
    background: linear-gradient(to top, rgba(7,7,7,.75) 0%, transparent 55%);
  }
  .trk-play { border-color: rgba(184,149,106,.4) }
  .film-play { opacity: .7 }
}