/* =========================================================
   CHANDLER LETNER : Design tokens
   ========================================================= */
:root{
  --ivory:   #F3EFEA;
  --black:   #282925;
  --denim:   #3F6982;
  --burnt:   #AE4414;
  --walnut:  #5E4335;
  --dusty:   #8B959D;

  --ivory-dim: #E9E3DA;
  --black-soft: #32332E;

  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-editorial: 'Newsreader', serif;

  --edge: clamp(20px, 5vw, 72px);
  --section-pad: clamp(64px, 10vw, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ivory);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--burnt); color: var(--ivory); }

/* subtle film grain, applied to dark sections */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   NAV
   ========================================================= */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 22px var(--edge);
  display:flex; align-items:center;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.is-scrolled{
  background: rgba(243,239,234,.92);
  backdrop-filter: blur(6px);
  padding-top: 14px; padding-bottom:14px;
  box-shadow: 0 1px 0 rgba(40,41,37,.08);
}
.nav-inner{
  width:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--ivory);
  transition: color .4s var(--ease);
}
.site-nav.is-scrolled .nav-mark{ color: var(--black); }

.nav-links{
  display:flex; align-items:center; gap: clamp(20px, 3vw, 40px);
  font-size: 14px; letter-spacing:.03em;
}
.nav-links a{
  color: var(--ivory);
  transition: color .3s var(--ease), opacity .3s;
  padding: 4px 0;
  position: relative;
}
.site-nav.is-scrolled .nav-links a{ color: var(--black); }
.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ transform: scaleX(1); transform-origin:left; }

.nav-cta{
  background: var(--burnt);
  color: var(--ivory) !important;
  padding: 9px 20px;
  font-weight:600;
  transition: background .3s var(--ease), opacity .3s;
}
.nav-cta:hover{ background: #c4500f; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 32px; height: 22px; padding:0;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background: var(--ivory);
  transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.site-nav.is-scrolled .nav-toggle span{ background: var(--black); }

/* =========================================================
   HERO : Artist / Actor duality split
   ========================================================= */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}
.hero-split{
  position:absolute; inset:0;
  display:flex;
}
.hero-half{
  position:relative;
  flex:1 1 50%;
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.06);
  transition: transform 8s var(--ease);
}
.hero:hover .hero-img{ transform: scale(1); }

.hero-half--actor .hero-img{ filter: grayscale(1) contrast(1.08); }

/* Faint top veil only, keeps faces clean and unobscured */
.hero-half-veil{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(40,41,37,.28) 0%, rgba(40,41,37,0) 30%);
}
.hero-half--artist .hero-half-veil{
  background: linear-gradient(to bottom, rgba(40,41,37,.22) 0%, rgba(40,41,37,0) 30%);
}
.hero-half--actor .hero-half-veil{
  background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 30%);
}

/* Dedicated scrim behind the bottom text band only, so faces stay fully visible */
.hero-scrim{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  height: 40%;
  background: linear-gradient(to top, rgba(30,30,27,.82) 0%, rgba(30,30,27,.5) 45%, rgba(30,30,27,0) 100%);
  pointer-events:none;
}

.hero-half-tag{
  position:absolute; top: 84px; z-index:1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero-half--artist .hero-half-tag{ left: 28px; }
.hero-half--actor .hero-half-tag{ right: 28px; }
.hero-half-tag--artist{ color: var(--burnt); text-shadow: 0 1px 8px rgba(243,239,234,.6); }
.hero-half-tag--actor{ color: var(--ivory); }

.hero-split::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background: rgba(243,239,234,.35);
  transform: translateX(-.5px);
}

.hero-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
  padding-bottom: clamp(28px, 4vw, 48px);
}
.hero-tags{
  display:flex; align-items:center; gap: clamp(60px, 16vw, 220px);
  margin-bottom: clamp(10px, 1.6vw, 18px);
}
.hero-name{
  font-family: var(--font-display);
  color: var(--ivory);
  font-size: clamp(34px, 6.4vw, 92px);
  line-height: .96;
  letter-spacing: -.005em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero-descriptor{
  margin: clamp(10px,1.4vw,16px) 0 0;
  font-family: var(--font-body);
  color: var(--ivory);
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: .26em;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

@media (max-width: 720px){
  .hero-split{ flex-direction:column; }
  .hero-split::after{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; }
  .hero-half-tag{ top: 64px; }
  .hero-name{ font-size: clamp(30px, 9vw, 48px); }
  .hero-scrim{ height: 22%; }
}

/* =========================================================
   SECTION EYEBROWS / TITLES (shared)
   ========================================================= */
.section-eyebrow{
  display:inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  margin-bottom: 18px;
}
.section-eyebrow--dark{ color: var(--burnt); }
.section-eyebrow--light{ color: #e9b892; }

.section-title{
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: .96;
  margin: 0;
  color: var(--black);
}
.section-title--light{ color: var(--ivory); }

/* =========================================================
   NEW RELEASE / COMING SOON
   ========================================================= */
.release{
  background: var(--walnut);
  color: var(--ivory);
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}
.release-art{
  overflow:hidden;
  min-height: 340px;
}
.release-art img{
  width:100%; height:100%; object-fit:cover;
}
.release-content{
  padding: clamp(36px,5vw,72px) clamp(28px,5vw,72px);
  display:flex; flex-direction:column;
  justify-content:center;
  gap: 4px;
}
.release-date{
  margin: 6px 0 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: #e9b892;
}
.release-copy{
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  opacity: .85;
  max-width: 420px;
}
.release-cta{
  margin-top: 26px;
  display:inline-block;
  width: fit-content;
  background: var(--burnt);
  color: var(--ivory);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  padding: 14px 28px;
  transition: background .3s var(--ease);
}
.release-cta:hover{ background: #c4500f; }

@media (max-width: 780px){
  .release{ grid-template-columns: 1fr; }
  .release-art{ aspect-ratio: 1/1; min-height: 0; }
}

/* =========================================================
   STATEMENT / INTRO
   ========================================================= */
.statement{
  padding: var(--section-pad) var(--edge);
  background: var(--ivory);
}
.statement-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px 32px;
  max-width: 1440px;
  margin: 0 auto;
  align-items:start;
}
.statement-eyebrow{
  grid-column: 1 / 4;
  display:flex; align-items:center; gap:14px;
}
.eyebrow-rule{ width:36px; height:1px; background: var(--burnt); }
.eyebrow-text{
  font-size:12px; font-weight:700; letter-spacing:.3em; color: var(--burnt);
}
.statement-quote{
  grid-column: 1 / 9;
  margin: 18px 0 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.12;
  color: var(--black);
}
.statement-quote-accent{ color: var(--burnt); }

.statement-body{
  grid-column: 1 / 8;
  margin-top: 34px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--black-soft);
  max-width: 620px;
}
.statement-body p{ margin: 0 0 20px; }
.statement-italic{ font-family: var(--font-editorial); font-style: italic; color: var(--walnut); }

.statement-image{
  grid-column: 9 / 13;
  grid-row: 2 / 4;
  align-self: start;
}
.statement-image img{
  width:100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
  filter: grayscale(1);
}

@media (max-width: 900px){
  .statement-grid{ grid-template-columns: 1fr; }
  .statement-eyebrow, .statement-quote, .statement-body, .statement-image{ grid-column: 1 / -1; }
  .statement-image{ grid-row:auto; margin-top: 28px; max-width: 340px; }
}

/* =========================================================
   MUSIC (warm / color)
   ========================================================= */
.music{
  padding: var(--section-pad) var(--edge);
  background: var(--ivory-dim);
  border-top: 1px solid rgba(40,41,37,.08);
  border-bottom: 1px solid rgba(40,41,37,.08);
}
.music-top{
  max-width: 1440px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(12,1fr); gap: 24px 32px;
  margin-bottom: clamp(40px,6vw,80px);
}
.music-heading{ grid-column: 1 / 6; }
.music-copy{ grid-column: 7 / 13; align-self:end; font-size:17px; line-height:1.7; color: var(--black-soft); }
.music-copy p{ margin:0 0 18px; }
.music-italic{ font-family: var(--font-editorial); font-style: italic; color: var(--burnt); }

.music-gallery{
  max-width: 1440px; margin: 0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
}
.music-gallery-main img{
  width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5;
}
.music-gallery-side{
  display:grid; grid-template-rows: 1fr auto; gap:20px;
}
.music-gallery-side img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 5/4; }
.music-stat{
  background: var(--walnut);
  color: var(--ivory);
  padding: 28px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.music-stat-number{ font-family: var(--font-display); font-size: 40px; line-height:1; }
.music-stat-label{ font-size:13px; letter-spacing:.03em; opacity:.9; }

.music-links{
  max-width: 1440px; margin: clamp(36px,5vw,64px) auto 0;
  display:flex; flex-wrap:wrap; gap: 14px;
}
.music-link{
  flex:1 1 220px;
  border: 1px solid rgba(40,41,37,.25);
  padding: 20px 22px;
  display:flex; flex-direction:column; gap:4px;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.music-link:hover{ border-color: var(--burnt); background: rgba(174,68,20,.06); transform: translateY(-2px); }
.music-link-label{ font-size:12px; letter-spacing:.1em; color: var(--dusty); text-transform:uppercase; }
.music-link-name{ font-family: var(--font-display); font-size: 18px; }

@media (max-width: 900px){
  .music-heading, .music-copy{ grid-column: 1 / -1; }
  .music-copy{ margin-top: 24px; }
  .music-gallery{ grid-template-columns: 1fr; }
}

/* =========================================================
   SIGNATURE INTERSTITIAL
   ========================================================= */
.interstitial{
  position:relative;
  height: 62vh;
  min-height: 380px;
  overflow:hidden;
  background: var(--black);
}
.interstitial-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 25%;
  filter: grayscale(1);
}
.interstitial::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(40,41,37,.15), rgba(40,41,37,.75));
}
.interstitial-line{
  position:relative; z-index:1;
  margin:0;
  height:100%;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom: clamp(28px,5vw,56px);
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--ivory);
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing:.02em;
  text-align:center;
}

/* =========================================================
   LIVE / TOUR
   ========================================================= */
.live{
  padding: var(--section-pad) var(--edge);
  background: var(--ivory);
}
.live-header{
  max-width: 1440px; margin: 0 auto clamp(32px,5vw,56px);
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.live-follow{
  font-size:14px; font-weight:600; color: var(--burnt);
  border-bottom: 1px solid var(--burnt);
  padding-bottom:2px;
  transition: opacity .3s;
}
.live-follow:hover{ opacity:.65; }

.live-list{
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid rgba(40,41,37,.15);
}
.live-row{
  display:grid;
  grid-template-columns: 110px 1fr auto auto;
  align-items:center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(40,41,37,.15);
  transition: background .3s var(--ease);
}
.live-row:hover{ background: rgba(174,68,20,.05); }
.live-date{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--burnt);
}
.live-venue{ font-size:16px; }
.live-venue strong{ font-weight:700; }
.live-city{ color: var(--dusty); font-size:14px; }
.live-status{
  font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: var(--denim);
  justify-self:end;
}
.live-link{
  justify-self:end;
  font-size: 13px; font-weight:600;
  border-bottom: 1px solid currentColor;
  white-space:nowrap;
}
.live-note{
  max-width:1440px; margin: 24px auto 0;
  font-size: 13px; color: var(--dusty);
}

@media (max-width: 720px){
  .live-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date status"
      "venue venue"
      "link link";
    row-gap: 8px;
  }
  .live-date{ grid-area: date; }
  .live-status{ grid-area: status; }
  .live-venue{ grid-area: venue; }
  .live-link{ grid-area: link; justify-self:start; }
}

/* =========================================================
   ACTING (dark / cinematic)
   ========================================================= */
.acting{
  position:relative;
  background: var(--black);
  color: var(--ivory);
  display:grid;
  grid-template-columns: 1fr 1.15fr 0.85fr;
  min-height: 92vh;
}
.acting-image, .acting-image-secondary{ position:relative; overflow:hidden; }
.acting-image img, .acting-image-secondary img{
  width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05);
  min-height: 320px;
}
.acting-content{
  padding: clamp(48px,6vw,96px) clamp(28px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
  gap: 6px;
}
.acting-copy{
  font-size:16px; line-height:1.75; color: var(--ivory);
  opacity:.85;
  max-width: 440px;
  margin: 10px 0 0;
}
.acting-cta{
  margin-top: 22px;
  display:inline-block;
  font-weight:700; font-size:14px; letter-spacing:.04em;
  color: var(--burnt);
  border-bottom: 1px solid var(--burnt);
  padding-bottom:3px;
  width: fit-content;
  transition: opacity .3s;
}
.acting-cta:hover{ opacity:.7; }

@media (max-width: 900px){
  .acting{ grid-template-columns: 1fr; }
  .acting-image, .acting-image-secondary{ min-height: 340px; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{
  padding: var(--section-pad) var(--edge);
  background: var(--ivory);
}
.gallery-header{ max-width:1440px; margin: 0 auto clamp(28px,4vw,48px); }
.gallery-grid{
  max-width: 1440px; margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 16px;
}
.gallery-item{ overflow:hidden; grid-column: span 2; grid-row: span 2; }
.gallery-item--tall{ grid-row: span 3; }
.gallery-item--wide{ grid-column: span 2; }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.gallery-item:hover img{ transform: scale(1.06); }

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 220px; }
  .gallery-item, .gallery-item--tall{ grid-column: span 1; grid-row: span 1; }
  .gallery-item--wide{ grid-column: span 2; grid-row: span 1; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  background: var(--black);
  color: var(--ivory);
  padding: var(--section-pad) var(--edge);
  text-align:center;
}
.contact-inner{ max-width: 1040px; margin:0 auto; }
.contact-copy{
  font-size:16px; opacity:.8; margin: 18px auto 0; max-width:440px;
}

.contact-columns{
  margin-top: clamp(48px,6vw,72px);
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px,5vw,64px);
  text-align:left;
  border-top: 1px solid rgba(243,239,234,.15);
  padding-top: clamp(32px,4vw,48px);
}

/* Booking form */
.booking-form-label{
  display:block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ivory);
  margin-bottom: 20px;
}
.form-hidden{ position:absolute; left:-9999px; }
.form-row{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom: 16px;
}
.form-row label{
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--dusty);
}
.form-row input, .form-row textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(243,239,234,.3);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 2px;
  resize: vertical;
  transition: border-color .3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus{
  outline:none;
  border-color: var(--burnt);
}
.form-row input::placeholder, .form-row textarea::placeholder{ color: var(--dusty); opacity:.7; }

.form-submit{
  margin-top: 8px;
  background: var(--burnt);
  color: var(--ivory);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 14px 30px;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.form-submit:hover{ background: #c4500f; }

/* Contact info column */
.contact-info{ display:flex; flex-direction:column; gap: 28px; }
.contact-block{ display:flex; flex-direction:column; gap:6px; }
.contact-label{ font-size:11px; letter-spacing:.2em; color: var(--dusty); text-transform:uppercase; }
.contact-value{ font-size:15px; }
.contact-block a{ font-size:15px; transition: color .3s; word-break: break-word; }
.contact-block a:hover{ color: var(--burnt); }

.contact-socials{
  margin-top: 12px;
  display:flex; gap: 24px;
  font-size: 13px; letter-spacing:.08em; text-transform:uppercase;
}
.contact-socials a{ opacity:.75; transition: opacity .3s; }
.contact-socials a:hover{ opacity:1; color: var(--burnt); }

@media (max-width: 780px){
  .contact-columns{ grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--black);
  color: var(--dusty);
  padding: 26px var(--edge) 34px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  border-top: 1px solid rgba(243,239,234,.1);
  font-size: 12px;
}
.footer-mark{ font-family: var(--font-display); color: var(--ivory); font-size:13px; letter-spacing:.06em; }

/* =========================================================
   MOBILE NAV MENU
   ========================================================= */
@media (max-width: 780px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 340px);
    height: 100svh;
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 0 40px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    font-size: 20px;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ color: var(--ivory) !important; }
  .nav-cta{ margin-top: 10px; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--burnt);
  outline-offset: 3px;
}