/*
Theme Name: George Watkinson Composer V2
Theme URI: https://www.georgewatkinson.com
Author: George Watkinson
Description: Bespoke cinematic one-page WordPress theme for film & TV composer George Watkinson.
Version: 1.0.0
Text Domain: george-watkinson-composer-theme-v2
*/

html { scroll-behavior: smooth; }


/* Watch section */
.gw-watch-section { padding: 7rem 0; }
.gw-watch-grid { margin-top: 2.5rem; max-width: 1100px; }
.gw-video-card { margin: 0; }
.gw-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.gw-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gw-video-card h3 {
  margin-top: 1rem;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: .04em;
}
@media (max-width: 700px) {
  .gw-watch-section { padding: 4.5rem 0; }
}


/* Watch section refinements */
.gw-watch-grid {
  margin-left: auto;
  margin-right: auto;
}
.gw-video-card {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.gw-video-card h3 {
  margin: 0 0 1.25rem;
  text-align: center;
}


/* Navigation spacing refinements */
header nav,
.site-header nav,
.main-navigation,
nav ul,
.main-navigation ul {
  column-gap: 2.25rem;
}

header nav a,
.site-header nav a,
.main-navigation a {
  margin-left: 0.35rem;
  margin-right: 0.35rem;
}

/* Listen descriptions */
.gw-listen-description {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.65;
  line-height: 1.5;
}

/* Watch title refinement */
.gw-video-card h3 {
  font-size: 1.25rem;
}


/* Shared Dinners poster */
.gw-shared-dinners-poster {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.gw-shared-dinners-poster img {
  display: block;
  width: min(100%, 320px);
  height: auto;
  object-fit: cover;
}

/* Keep Short Films cards tidy when artwork is present */
@media (min-width: 800px) {
  .gw-shared-dinners-poster {
    justify-content: flex-start;
  }
}


/* Exact, uniform desktop navigation spacing */
@media (min-width: 769px) {
  header nav,
  .site-header nav,
  .main-navigation {
    display: flex !important;
    align-items: center !important;
  }

  header nav ul,
  .site-header nav ul,
  .main-navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  header nav li,
  .site-header nav li,
  .main-navigation li {
    margin: 0 !important;
    padding: 0 !important;
  }

  header nav a,
  .site-header nav a,
  .main-navigation a {
    display: block !important;
    margin: 0 !important;
    padding: 0 1.35rem !important;
  }

  header nav li:first-child a,
  .site-header nav li:first-child a,
  .main-navigation li:first-child a {
    padding-left: 0 !important;
  }

  header nav li:last-child a,
  .site-header nav li:last-child a,
  .main-navigation li:last-child a {
    padding-right: 0 !important;
  }
}

.gw-listen-description {
  margin: .4rem 0 0;
  font-size: .9rem;
  opacity: .65;
  line-height: 1.5;
}

.gw-real-audio{display:block;width:100%;margin-top:1rem;height:40px;}

/* SoundCloud audio integration */
.gw-soundcloud-player{width:100%;margin-top:1rem;overflow:hidden;}
.gw-soundcloud-player iframe{display:block;width:100%;border:0;}

/* Minimal inline SoundCloud treatment */
.gw-soundcloud-player{
  width:100%;
  max-width:760px;
  margin:1rem 0 0;
  overflow:hidden;
  background:transparent;
}
.gw-soundcloud-player iframe{
  display:block;
  width:100%;
  height:84px;
  border:0;
  opacity:.88;
  filter:grayscale(1) contrast(.9);
}


/* Black treatment for the native Forest audio strip */
.gw-real-audio {
  background: #000;
  border-radius: 3px;
  color-scheme: dark;
  accent-color: #000;
}
.gw-real-audio::-webkit-media-controls-enclosure {
  background-color: #000;
  border-radius: 3px;
}
.gw-real-audio::-webkit-media-controls-panel {
  background-color: #000;
}


/* Bespoke Film Score Console audio player */
.score-console{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(150px,220px) 1fr auto;
  align-items:center;
  gap:24px;
  padding:18px 20px;
  background:#080808;
  border:1px solid rgba(255,255,255,.13);
  box-sizing:border-box;
}
.score-console audio{display:none}
.score-play{
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#f3f0e9;
  cursor:pointer;
  font-size:15px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.score-play:hover{border-color:rgba(255,255,255,.8)}
.score-title{
  color:#f3f0e9;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  letter-spacing:.28em;
  white-space:nowrap;
}
.score-time{
  color:rgba(255,255,255,.58);
  font-size:12px;
  letter-spacing:.05em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.score-wave{
  --played:0%;
  height:36px;
  display:flex;
  align-items:center;
  gap:3px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.score-wave span{
  flex:1;
  max-width:3px;
  min-width:1px;
  background:rgba(255,255,255,.27);
  height:30%;
}
.score-wave span:nth-child(3n){height:72%}
.score-wave span:nth-child(4n){height:46%}
.score-wave span:nth-child(5n){height:88%}
.score-wave span:nth-child(7n){height:58%}
.score-wave:after{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:var(--played);
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
@media(max-width:700px){
  .score-console{grid-template-columns:48px 1fr auto;gap:14px}
  .score-wave{grid-column:1/-1;height:25px}
  .score-title{font-size:13px;letter-spacing:.18em}
}


/* Slim clickable timeline for Film Score Console */
.score-timeline{
  --timeline-played:0%;
  grid-column:1 / -1;
  position:relative;
  height:12px;
  cursor:pointer;
  margin-top:-8px;
}
.score-timeline::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:2px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.16);
}
.score-timeline-progress{
  position:absolute;
  left:0; top:50%;
  width:var(--timeline-played);
  height:2px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.78);
  pointer-events:none;
}
.score-timeline-knob{
  position:absolute;
  left:var(--timeline-played);
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#f3f0e9;
  opacity:.9;
  pointer-events:none;
}


/* Blend Film Score Console into the website background */
.score-console{
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.score-play{
  background: transparent !important;
}

.score-timeline::before{
  background: rgba(255,255,255,.12) !important;
}

.score-timeline-progress{
  background: rgba(255,255,255,.70) !important;
}

.score-wave span{
  background: rgba(255,255,255,.24) !important;
}


/* Listen: true centred column, matching the centred Watch video */
#listen .listen-grid{
  grid-template-columns: 1fr !important;
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  margin-top: 64px !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

#listen .listen-card{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#listen .score-console,
#listen .mock-player{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#listen .score-console{
  grid-template-columns: 54px minmax(120px,220px) minmax(120px,1fr) auto !important;
}

@media (max-width: 820px){
  #listen .listen-grid{
    width: min(100% - 36px, 960px) !important;
  }
}

@media (max-width: 700px){
  #listen .score-console{
    grid-template-columns: 48px 1fr auto !important;
  }
}

.gw-listen-description-full p{
  margin: .45rem 0 0;
}
.gw-listen-description-full p + p{
  margin-top: .8rem;
}


/* Match Watch section presentation to Credits and Listen */
#watch{
  text-align: inherit;
}
#watch .section-head,
#watch .section-header{
  text-align: left !important;
}
#watch h2{
  text-align: left !important;
  margin-left: 0 !important;
}
#watch .eyebrow,
#watch .section-number,
#watch .kicker{
  text-align: left !important;
}
#watch .watch-video,
#watch .video-wrap,
#watch .watch-media{
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Watch now uses the exact same numbered section label as Credits / Listen */
#watch .section-label{
  margin-bottom: 1.25rem;
}

#watch .gw-watch-grid{
  width:100%;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}


/* Werwulf featured credit: one small poster, neatly contained on the right */
.werwulf-featured{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 170px !important;
  gap:2rem !important;
  align-items:center !important;
  overflow:hidden !important;
}

.werwulf-featured-copy{
  min-width:0 !important;
}

.werwulf-featured-copy p:last-child{
  margin-bottom:0 !important;
}

.werwulf-featured-poster{
  width:170px !important;
  max-width:170px !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
}

.werwulf-featured-poster img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 !important;
}

@media (max-width:700px){
  .werwulf-featured{
    grid-template-columns:1fr !important;
  }
  .werwulf-featured-poster{
    width:145px !important;
    max-width:145px !important;
    justify-self:start !important;
    margin-top:.75rem !important;
  }
}


/* Approved Werwulf layout — ONLY make the existing poster slightly larger */
.werwulf-featured{
  grid-template-columns:minmax(0,1fr) 185px !important;
}

.werwulf-featured-poster{
  width:185px !important;
  max-width:185px !important;
}

@media (max-width:700px){
  .werwulf-featured-poster{
    width:155px !important;
    max-width:155px !important;
  }
}


/* Abbey Road credit — companion box beneath Werwulf */
.abbey-road-featured{
  margin-top:1.5rem !important;
  display:block !important;
}

.abbey-road-featured-copy{
  max-width:760px;
}

.abbey-road-featured-copy .eyebrow{
  margin-bottom:1rem;
}

.abbey-road-featured-copy p:last-child{
  margin-bottom:0;
}


/* Keep every Film Score Console aligned consistently */
#listen .score-time{
  white-space:nowrap !important;
  min-width:82px !important;
  text-align:right !important;
  justify-self:end !important;
}

/* Only the unusually long Seventeenth Year title needs a subtle fit adjustment */
#listen .score-title-long{
  font-size:0.86em !important;
  letter-spacing:0.04em !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

/* Let the title column surrender space before it can ever touch the time */
#listen .score-console{
  grid-template-columns:54px minmax(0,220px) minmax(0,1fr) minmax(82px,auto) !important;
}

@media (max-width:700px){
  #listen .score-title-long{
    font-size:0.78em !important;
    letter-spacing:0.025em !important;
  }
}


/* Seventeenth Year: keep improved timer spacing, restore standard track-title typography */
#listen .score-title-long{
  font-size:inherit !important;
  letter-spacing:inherit !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

@media (max-width:700px){
  #listen .score-title-long{
    font-size:inherit !important;
    letter-spacing:inherit !important;
  }
}


/* Watch video titles: match the site's typography */
#watch .watch-film-title{
  font-family:inherit !important;
  font-size:clamp(1.35rem, 2vw, 1.8rem) !important;
  font-weight:400 !important;
  line-height:1.15 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  margin:0 0 1rem !important;
  text-align:center !important;
}

/* Cupid and The Forest share the same centred Watch presentation */
#watch .watch-film{
  width:100%;
  max-width:960px;
  margin:0 auto 3rem;
}

#watch .gw-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
}

#watch .gw-video-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}


/* Subtle divider beneath each Watch video */
#watch .watch-film{
  padding-bottom:3rem !important;
  margin-bottom:3rem !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

/* Keep the final video divider subtle too, for consistent rhythm */
#watch .watch-film:last-child{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}


/* Shared Dinners clickable credit */
.shared-dinners-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.shared-dinners-card{
  cursor:pointer;
  transition:transform .28s ease, border-color .28s ease, background .28s ease;
}
.shared-dinners-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.20);
}

/* Expanding-card page transition */
.project-transition-overlay{
  position:fixed;
  z-index:99999;
  left:var(--start-left, 50%);
  top:var(--start-top, 50%);
  width:var(--start-width, 1px);
  height:var(--start-height, 1px);
  background:rgba(12,12,12,.96);
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  transform-origin:center;
}
.project-transition-overlay.is-active{
  opacity:1;
  animation:sharedDinnersExpand .62s cubic-bezier(.2,.75,.2,1) forwards;
}
.project-transition-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-transition-title{
  opacity:0;
  color:#f3f0e9;
  font-size:clamp(2rem,5vw,5rem);
  font-family:inherit;
  letter-spacing:.02em;
}
.project-transition-overlay.is-active .project-transition-title{
  animation:sharedDinnersTitle .62s ease forwards;
}
@keyframes sharedDinnersExpand{
  0%{
    left:var(--start-left);
    top:var(--start-top);
    width:var(--start-width);
    height:var(--start-height);
    border-radius:0;
  }
  100%{
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    border-radius:0;
  }
}
@keyframes sharedDinnersTitle{
  0%,45%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .project-transition-overlay{display:none!important;}
}

/* Shared Dinners project page */
.project-page{
  min-height:100vh;
}
.project-hero{
  padding:8rem 0 6rem;
}
.project-shell{
  max-width:1100px;
  margin:0 auto;
}
.project-back{
  display:inline-block;
  margin-bottom:3rem;
  color:inherit;
  text-decoration:none;
  opacity:.72;
}
.project-page h1{
  margin:1rem 0 .75rem;
  font-size:clamp(3rem,7vw,6rem);
  font-weight:400;
}
.project-kicker{
  opacity:.65;
  margin-bottom:3rem;
}
.project-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);
  gap:4rem;
  align-items:start;
}
.project-copy{
  max-width:720px;
}
.project-copy p{
  line-height:1.8;
}
.project-meta{
  border-top:1px solid rgba(255,255,255,.12);
}
.project-meta div{
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.project-meta span{opacity:.55;}
.project-meta strong{font-weight:400;}
@media(max-width:760px){
  .project-intro-grid{grid-template-columns:1fr;gap:2rem;}
}


/* Shared Dinners persistent full-screen project overlay */
body.shared-dinners-open{
  overflow:hidden !important;
}

.shared-dinners-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#0c0c0c;
  color:inherit;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}

.shared-dinners-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.shared-dinners-overlay-scroll{
  width:100%;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.shared-dinners-overlay-shell{
  max-width:1100px;
  margin:0 auto;
  padding-top:7rem;
  padding-bottom:6rem;
}

.shared-dinners-close{
  position:fixed;
  top:1.5rem;
  left:1.5rem;
  z-index:100001;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(12,12,12,.72);
  color:#f3f0e9;
  font-size:28px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.shared-dinners-close:hover{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.06);
  transform:scale(1.03);
}

/* Disable the old redirect/transition overlay if any legacy markup remains */
.project-transition-overlay{
  display:none !important;
}

@media(max-width:760px){
  .shared-dinners-overlay-shell{
    padding-top:6rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  .shared-dinners-close{
    top:1rem;
    left:1rem;
  }
}


/* Shared Dinners overlay: remove right-hand project menu/meta panel */
#shared-dinners-overlay .project-meta{
  display:none !important;
}

#shared-dinners-overlay .project-intro-grid{
  display:block !important;
}

#shared-dinners-overlay .project-copy{
  max-width:760px !important;
  width:100% !important;
}


/* Film credits — unified proportions + website-matched background */
#work,
#work .shell,
#work .project-grid {
  background: #0c0c0c !important;
}

#work .project-card {
  background: #0c0c0c !important;
  border-color: rgba(255,255,255,.10) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#work .gw-shared-dinners-poster {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  max-height: none !important;
  overflow: hidden !important;
  margin: 0 0 1.1rem 0 !important;
  background: #0c0c0c !important;
}

#work .gw-shared-dinners-poster img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

#work .project-grid {
  align-items: stretch !important;
}

#work .project-grid > * {
  min-width: 0 !important;
}

#work .project-card > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#work .project-card h3 {
  margin-top: 0 !important;
}

#work .project-card .project-note {
  margin-top: auto !important;
}


/* Film credits — keep approved layout/colour, reduce scale and restore spacing */
#work .project-grid{
  gap: 3rem 2.5rem !important;
  align-items: start !important;
}

#work .project-grid > *{
  width: 100% !important;
  max-width: 360px !important;
  justify-self: center !important;
}

#work .project-card{
  width: 100% !important;
  height: auto !important;
}

#work .project-card > div{
  height: auto !important;
}

#work .gw-shared-dinners-poster{
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  margin-bottom: 1.35rem !important;
}

#work .project-card .project-note{
  margin-top: 1rem !important;
}

@media (max-width: 900px){
  #work .project-grid{
    gap: 2.75rem 2rem !important;
  }
  #work .project-grid > *{
    max-width: 340px !important;
  }
}

@media (max-width: 620px){
  #work .project-grid{
    gap: 2.5rem !important;
  }
  #work .project-grid > *{
    max-width: 360px !important;
  }
}


/* Film credits — slightly larger cards, preserving approved spacing and proportions */
#work .project-grid > *{
  max-width: 390px !important;
}

@media (max-width: 900px){
  #work .project-grid > *{
    max-width: 365px !important;
  }
}

@media (max-width: 620px){
  #work .project-grid > *{
    max-width: 380px !important;
  }
}


/* Film cards — subtle cinematic hover enlargement */
#work .project-card{
  position:relative !important;
  z-index:1 !important;
  transform:scale(1) !important;
  transform-origin:center center !important;
  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    border-color .32s ease,
    box-shadow .32s ease !important;
}

#work .project-grid > *:hover .project-card,
#work .project-card:hover{
  transform:scale(1.045) !important;
  z-index:10 !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

#work .project-grid > *{
  position:relative !important;
}

#work .project-grid > *:hover{
  z-index:10 !important;
}

@media (prefers-reduced-motion: reduce){
  #work .project-card{
    transition:none !important;
  }
  #work .project-grid > *:hover .project-card,
  #work .project-card:hover{
    transform:none !important;
  }
}


/* FIX: visibly enlarge the entire film tile on hover */
#work .project-grid > *{
  transform:scale(1) !important;
  transform-origin:center center !important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), filter .28s ease !important;
  will-change:transform;
}

#work .project-grid > *:hover{
  transform:scale(1.09) !important;
  z-index:50 !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));
}

/* Prevent earlier nested-card transform rules from cancelling the visible effect */
#work .project-grid > *:hover .project-card,
#work .project-card:hover{
  transform:none !important;
}

@media (hover:none){
  #work .project-grid > *:hover{
    transform:none !important;
    filter:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #work .project-grid > *{
    transition:none !important;
  }
}


/* Credits film grid — remove the large outer grey box/frame */
#work .project-grid{
  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

#work .project-grid::before,
#work .project-grid::after{
  display:none !important;
  content:none !important;
}

/* If the grid's immediate wrapper supplied the visible frame, neutralise that too */
#work .project-grid-wrapper,
#work .projects-wrap,
#work .projects-panel{
  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}


/* Listen tracks — subtle hover zoom without blocking controls */
#listen .listen-card{
  position:relative !important;
  z-index:1 !important;
  transform:scale(1) !important;
  transform-origin:center center !important;
  transition:
    transform .26s cubic-bezier(.2,.7,.2,1),
    filter .26s ease !important;
  will-change:transform;
}

#listen .listen-card:hover{
  transform:scale(1.035) !important;
  z-index:20 !important;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.18));
}

/* Keep all interactive audio controls above the transformed card surface */
#listen .score-console,
#listen .score-play,
#listen .score-timeline,
#listen audio{
  position:relative !important;
  z-index:25 !important;
  pointer-events:auto !important;
}

@media (hover:none){
  #listen .listen-card:hover{
    transform:none !important;
    filter:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #listen .listen-card{
    transition:none !important;
  }
}


/* Minimal social links at the very bottom of the homepage */
.gw-social-footer{
  padding:3.25rem 0 3.75rem;
  border-top:1px solid rgba(255,255,255,.10);
  background:#0c0c0c;
}

.gw-social-footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3.5rem;
  flex-wrap:wrap;
}

.gw-social-footer a{
  color:inherit;
  text-decoration:none;
  display:flex;
  align-items:baseline;
  gap:.65rem;
  transition:opacity .2s ease, transform .2s ease;
}

.gw-social-footer a span{
  opacity:.5;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.gw-social-footer a strong{
  font-weight:400;
}

.gw-social-footer a:hover{
  opacity:.72;
  transform:translateY(-2px);
}

@media(max-width:620px){
  .gw-social-footer-inner{
    gap:1.25rem 2rem;
  }
}


/* Abbey Road professional experience image — mirrors Werwulf text/image treatment */
.gw-abbey-road-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  gap:2rem !important;
  align-items:center !important;
}

.gw-abbey-road-image{
  width:100% !important;
  max-width:180px !important;
  justify-self:end !important;
}

.gw-abbey-road-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

@media(max-width:700px){
  .gw-abbey-road-card{
    grid-template-columns:minmax(0,1fr) 120px !important;
    gap:1.25rem !important;
  }
  .gw-abbey-road-image{max-width:120px !important;}
}


/* Additional film cards use the same persistent project-view behavior as Shared Dinners */
.film-project-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

body.film-project-open{
  overflow:hidden !important;
}

.film-project-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#0c0c0c;
  color:inherit;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}

.film-project-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.film-project-overlay-scroll{
  width:100%;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.film-project-overlay-shell{
  max-width:1100px;
  margin:0 auto;
  padding-top:7rem;
  padding-bottom:6rem;
}

.film-project-overlay h1{
  margin:1rem 0 .75rem;
  font-size:clamp(3rem,7vw,6rem);
  font-weight:400;
}

.film-project-overlay .project-copy{
  max-width:760px !important;
  width:100% !important;
}

.film-project-close{
  position:fixed;
  top:1.5rem;
  left:1.5rem;
  z-index:100001;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(12,12,12,.72);
  color:#f3f0e9;
  font-size:28px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
}

@media(max-width:760px){
  .film-project-overlay-shell{
    padding-top:6rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  .film-project-close{
    top:1rem;
    left:1rem;
  }
}


/* Film credit role */
#work .film-role{
  margin:.35rem 0 0;
  opacity:.62;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* Film Detail Page still galleries */
.film-stills-gallery{
  margin-top:3.25rem;
  display:grid;
  gap:1.15rem;
  width:100%;
}

.film-stills-gallery-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.film-stills-gallery-3{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.film-stills-gallery-3 .film-still:first-child{
  grid-column:1 / -1;
}

.film-still{
  margin:0;
  overflow:hidden;
  background:#090909;
}

.film-still img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  transition:transform .45s ease;
}

.film-still:hover img{
  transform:scale(1.025);
}

@media(max-width:700px){
  .film-stills-gallery-2,
  .film-stills-gallery-3{
    grid-template-columns:1fr;
  }
  .film-stills-gallery-3 .film-still:first-child{
    grid-column:auto;
  }
}


/* Click-to-enlarge film stills */
.film-still-lightbox-trigger{
  cursor:zoom-in;
}

body.film-still-lightbox-open{
  overflow:hidden !important;
}

.film-still-lightbox{
  position:fixed;
  inset:0;
  z-index:120000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.film-still-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.film-still-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.92);
}

.film-still-lightbox-content{
  position:absolute;
  inset:3.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.film-still-lightbox-content img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.film-still-lightbox-close{
  position:fixed;
  top:1.25rem;
  left:1.25rem;
  z-index:120002;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

@media(max-width:700px){
  .film-still-lightbox-content{
    inset:4rem 1rem 1rem;
  }
}

/* The Perfect Man unreleased placeholder */
.perfect-man-coming-soon{
  margin-top:.85rem;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.62;
  font-size:.78rem;
}


/* ===== Cinematic aesthetic pass =====
   Restrained section lighting, soft transitions and subtle grain.
*/
html{
  background:#11100e;
}

body{
  background:#11100e;
  position:relative;
}

/* Extremely subtle film-grain veil across the site, built in CSS so no external asset is required. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  opacity:.022;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,.9) 0 .45px, transparent .55px 3px),
    repeating-radial-gradient(circle at 71% 67%, rgba(255,255,255,.55) 0 .35px, transparent .5px 4px);
  background-size:7px 7px, 11px 11px;
  mix-blend-mode:soft-light;
}

/* The sections use broad gradients rather than hard-edged blocks, so the change reads as light. */
#work{
  background:
    linear-gradient(to bottom,
      #11100e 0%,
      #15120f 11%,
      #15120f 89%,
      #11100e 100%);
}

#experience{
  background:
    linear-gradient(to bottom,
      #11100e 0%,
      #181817 12%,
      #181817 88%,
      #11100e 100%);
}

#listen{
  background:
    radial-gradient(ellipse at 52% 38%, rgba(112,75,38,.105) 0%, rgba(24,21,17,.72) 36%, rgba(24,21,17,0) 70%),
    linear-gradient(to bottom,
      #11100e 0%,
      #181511 12%,
      #181511 88%,
      #11100e 100%) !important;
}

#watch{
  background:
    radial-gradient(ellipse at 50% 42%, rgba(34,63,79,.11) 0%, rgba(13,17,20,.68) 40%, rgba(13,17,20,0) 72%),
    linear-gradient(to bottom,
      #11100e 0%,
      #0d1114 12%,
      #0d1114 88%,
      #11100e 100%) !important;
}

/* A quiet warm pool behind the listening content, without creating a visible card. */
#listen .shell{
  position:relative;
  isolation:isolate;
}
#listen .shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:7%;
  right:7%;
  top:10%;
  bottom:8%;
  background:radial-gradient(ellipse at center, rgba(135,84,39,.055), transparent 68%);
  filter:blur(22px);
  pointer-events:none;
}

/* Keep all existing cards/content above the texture veil interaction-wise. */
.site-header,
.section,
footer{
  position:relative;
  z-index:1;
}


/* Listen: subtle individual track atmospheres */
#listen .listen-card{
  position:relative;
  isolation:isolate;
}

#listen .listen-card::before{
  content:"";
  position:absolute;
  inset:-12% -6%;
  z-index:-1;
  opacity:0;
  filter:blur(34px);
  transform:scale(.98);
  transition:opacity .32s ease, transform .32s ease;
  pointer-events:none;
}

#listen .listen-card:hover::before{
  opacity:.92;
  transform:scale(1.02);
}

#listen .track-remember::before{
  background:radial-gradient(circle at 40% 50%, rgba(190,126,58,.21), transparent 64%);
}

#listen .track-the-foreboding::before{
  background:radial-gradient(circle at 40% 50%, rgba(87,108,128,.20), transparent 64%);
}

#listen .track-the-forest::before{
  background:radial-gradient(circle at 40% 50%, rgba(77,104,72,.21), transparent 64%);
}

#listen .track-after-battle::before{
  background:radial-gradient(circle at 40% 50%, rgba(122,63,48,.21), transparent 64%);
}

#listen .track-mormont::before{
  background:radial-gradient(circle at 40% 50%, rgba(96,104,114,.20), transparent 64%);
}

#listen .track-the-seventeenth-year::before{
  background:radial-gradient(circle at 40% 50%, rgba(120,67,82,.21), transparent 64%);
}

#listen .track-industrial-revolution::before,
#listen .track-cavrn-1::before,
#listen .track-current-prodject::before{
  background:radial-gradient(circle at 40% 50%, rgba(110,102,88,.10), transparent 64%);
}

@media (hover:none){
  #listen .listen-card::before{
    opacity:.24;
    transform:none;
  }
}

@media (prefers-reduced-motion: reduce){
  #listen .listen-card::before{
    transition:none;
  }
}


/* Listen: gently breathing atmosphere while a real track is playing */
#listen .listen-card.is-playing::before{
  opacity:.92;
  animation:gwTrackBreathe 9s ease-in-out infinite;
}

@keyframes gwTrackBreathe{
  0%,100%{ transform:scale(1); filter:blur(34px); }
  50%{ transform:scale(1.075); filter:blur(42px); }
}

@media (prefers-reduced-motion: reduce){
  #listen .listen-card.is-playing::before{
    animation:none;
    transform:scale(1.02);
  }
}


/* Professional Experience: match Abbey Road Studios to the Werwulf grey feature box */
#experience .gw-abbey-road-card{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  padding:clamp(1.5rem,3vw,2.5rem) !important;
  box-sizing:border-box;
}


/* MOBILE_ONLY_FIXES_2026_08_27
   Desktop remains unchanged. */
@media (max-width: 700px) {
  /* Professional Experience: prevent desktop poster column from squeezing copy */
  .werwulf-featured {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
  }
  .werwulf-featured-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .werwulf-featured-copy h3,
  .werwulf-featured-copy p {
    width: 100% !important;
    max-width: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .werwulf-featured-poster {
    width: 155px !important;
    max-width: 155px !important;
    justify-self: start !important;
  }

  /* Listen: purpose-built phone layout with no title/time collisions */
  .score-console {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "play time"
      "timeline timeline" !important;
    gap: 12px 14px !important;
    padding: 16px !important;
    align-items: center !important;
  }
  .score-title {
    grid-area: title !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .14em !important;
  }
  .score-play {
    grid-area: play !important;
    width: 48px !important;
    height: 48px !important;
  }
  .score-time {
    grid-area: time !important;
    justify-self: end !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  .score-timeline {
    grid-area: timeline !important;
    grid-column: auto !important;
    width: 100% !important;
  }
  .score-wave {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}


/* Abbey Road Institute professional experience card */
.gw-abbey-institute-card{
  margin-top:1.5rem !important;
  border:1px solid var(--border) !important;
  background:rgba(34,32,30,.55) !important;
  padding:2rem !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  gap:2rem !important;
  align-items:center !important;
}

.gw-abbey-institute-copy{
  min-width:0 !important;
}

.gw-abbey-institute-copy .eyebrow{
  margin-bottom:1rem !important;
}

.gw-abbey-institute-copy p{
  margin:0 !important;
  color:var(--muted) !important;
}

.gw-abbey-institute-copy small{
  display:block !important;
  color:#77716a !important;
  margin-top:.5rem !important;
}

.gw-abbey-institute-image{
  width:100% !important;
  max-width:180px !important;
  justify-self:end !important;
}

.gw-abbey-institute-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

/* Preserve the approved phone layout */
@media(max-width:700px){
  .gw-abbey-institute-card{
    grid-template-columns:minmax(0,1fr) 120px !important;
    gap:1.25rem !important;
    padding:1.5rem !important;
  }
  .gw-abbey-institute-image{
    max-width:120px !important;
  }
}


/* Lorne Balfe ongoing Zoom Q&A professional experience */
.gw-lorne-balfe-card{
  margin-top:1.5rem !important;
  padding:2rem !important;
}
.gw-lorne-balfe-card .eyebrow{
  margin-bottom:1rem !important;
}
.gw-lorne-balfe-card p:last-child{
  margin:0 !important;
  max-width:820px !important;
}


/* Professional Experience: consistent spacing and title hierarchy */
#experience .werwulf-featured,
#experience .gw-lorne-balfe-card,
#experience .gw-abbey-road-card,
#experience .gw-abbey-institute-card{
  margin-top:1.5rem !important;
}

#experience .gw-lorne-balfe-card h3,
#experience .gw-abbey-road-card h3{
  font-size:clamp(2.2rem,5vw,3.6rem) !important;
  margin-top:22px !important;
  margin-bottom:0 !important;
  font-weight:300;
  line-height:1.05;
}

#experience .gw-lorne-balfe-card p:last-child,
#experience .gw-abbey-road-card p:last-child{
  margin-top:26px !important;
  margin-bottom:0 !important;
  color:var(--muted) !important;
  font-size:16px !important;
  line-height:1.8 !important;
}

/* Make Abbey Road Studios visually match the other bordered experience cards */
#experience .gw-abbey-road-card{
  border:1px solid var(--border) !important;
  background:rgba(34,32,30,.55) !important;
  padding:2rem !important;
}

/* Desktop: keep the approved text/image arrangement */
@media (min-width:701px){
  #experience .gw-abbey-road-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 180px !important;
    gap:2rem !important;
    align-items:center !important;
  }
}

#experience .gw-abbey-institute-card h3{
font-size:clamp(2.2rem,5vw,3.6rem)!important;
margin-top:22px!important;margin-bottom:0!important;font-weight:300;line-height:1.05}
#experience .gw-abbey-institute-copy>p:last-child{
margin-top:26px!important;margin-bottom:0!important;color:var(--muted)!important;
font-size:16px!important;line-height:1.8!important}