/* JCR ENERGIES — One shared stylesheet for the whole site.
   All navigation, film/album titles, headings and text are editable HTML.
   The original artwork and photographs live in /assets.
   Approved headline direction #6 is preserved; supporting typography can be
   adjusted here once the final font choice is made. */
/* Public web-font stylesheet; no proprietary font binaries shipped in the project. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Lato:wght@300;400;500&display=swap');
:root {
  --burgundy: #230919;
  --paper: #fcefd2;
  --cream: #f8eee2;
  --muted: #e5cbd6;
  --amber: #f0a343;
  --side: clamp(20px, 3.55vw, 58px);
}
* { box-sizing: border-box; }
html { background: var(--burgundy); }
body { min-height: 100vh; margin: 0; color: var(--cream); background: var(--burgundy); }
body.interior-page {
  background: radial-gradient(ellipse at 86% 15%, #63204d 0, transparent 50%),
              radial-gradient(ellipse at 6% 94%, #6d2c2b 0, transparent 53%), #230919;
  font-family: Arial, Helvetica, sans-serif;
}
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
.sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { width: min(100%, 1536px); padding-inline: var(--side); margin-inline: auto; }

/* Same real clickable navigation on every page. */
.site-header { position: relative; z-index: 10; }
.header-inner {
  width: min(100%, 1536px); margin: 0 auto; padding: 23px var(--side) 0;
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
}
.brand { display: block; width: clamp(180px, 21vw, 324px); flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  gap: clamp(12px, 1.8vw, 31px); padding-top: clamp(17px, 3.35vw, 44px); }
.site-nav a { font-family: Arial, Helvetica, sans-serif; font-weight: 600; font-size: clamp(10px, 0.91vw, 13px);
  letter-spacing: .09em; white-space: nowrap; text-decoration: none; padding-bottom: 10px;
  text-shadow: 0 1px 5px rgba(10,0,10,.55); }
.site-nav a:hover { color: var(--amber); }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--amber); }
.menu-toggle { display: none; }
/* Home preserves the approved photographic design, not an added logo or cards. */
body.home-page { min-height: 100dvh; background: #230919; overflow: hidden; }
.home-screen { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; }
.home-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; }
.home-header { position: absolute; left: 0; top: 0; width: 100%; z-index: 12; }
.home-header .header-inner { justify-content: flex-end; padding-top: 18px; }
.home-header .site-nav { padding-top: 16px; }

/* Shared #6 dimensional headings: genuine installed font, not screenshots. */
.main-content { padding-top: 1px; }
.display-heading { margin: -5px 0 34px; }
.section-title { font-family: 'Inter', 'Arial Black', Impact, sans-serif;
  color: var(--paper); font-size: clamp(40px, 7.5vw, 112px); font-weight: 900;
  line-height: 1.095; letter-spacing: -.065em; word-spacing: .14em;
  text-transform: uppercase; margin: 0; padding: 0 13px 17px 0;
  text-shadow: 1px 1px #311321, 3px 3px #d85249, 5px 5px #e09e43,
               7px 7px #571b3b, 9px 9px #26152b;
}
.main-content > .container { padding-bottom: 65px; }
/* Actual films, not AI stills or page-image crops. */
.film-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(18px, 2.3vw, 35px); }
.film-card { display: block; min-width: 0; text-decoration: none; }
.film-image { width: 100%; aspect-ratio: 16/9; background: #120a13; }
.film-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.film-card h2, .album-card h2 { font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.2; margin: 15px 0 0; }
.film-card:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.swipe-hint { display: none; }
/* Exact cover files. No white borders, frames, or cards. */
.album-grid { display: grid; grid-template-columns: repeat(2,minmax(0,355px));
  justify-content: center; gap: clamp(20px, 5.5vw, 88px); margin-top: 8px; }
.album-card { min-width: 0; }
.album-card > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border: 0; box-shadow: none; }
.album-card .artist { font: 400 12px/1.4 Arial, Helvetica, sans-serif;
  text-transform: uppercase; letter-spacing: .17em; color: var(--muted); margin: 5px 0 0; }
/* About and Contact: heading directly below JCR logo, photo in full, never faded. */
.scene-photo { margin: 7px 0 28px; padding: 0; }
.scene-photo img { width: 100%; height: auto; display: block; max-width: none; border: 0;
  -webkit-mask-image: none; mask-image: none; }
.body-copy { font: 400 clamp(18px, 1.7vw, 24px)/1.58 Georgia, 'Times New Roman', serif;
  max-width: 860px; margin: 0 auto; padding: 3px 0 20px; }
.body-copy p { margin: 0 0 22px; }
/* Film detail page: real Vimeo embed and accurate links. */
.detail-container { max-width: 1090px; padding-top: 14px; }
.back-link { display: inline-block; text-decoration: none; font: 16px Georgia, serif; margin: 0 0 25px; }
.back-link:hover { text-decoration: underline; }
.detail-title { font: 400 clamp(34px, 4.4vw, 62px)/1.12 Georgia, serif; max-width: 920px; margin: 0 0 30px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #0f080e; }
.video-frame iframe { position: absolute; width: 100%; height: 100%; inset: 0; border: 0; }
.recognition { font: 400 14px/1.5 Arial,sans-serif; letter-spacing:.09em; }
.recognition:empty { display: none; }
.film-external { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0; font: 16px Georgia,serif; }
.film-external a { text-underline-offset: 5px; }

@media (max-width: 960px) {
  /* Big clear button instead of squeezing five links beside a logo on phones. */
  .header-inner { align-items: flex-start; }
  .brand { width: clamp(170px, 29vw, 250px); }
  .menu-toggle { position: relative; z-index: 15; display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 5px; margin: 14px 0 0 auto;
    width: 46px; height: 43px; border: 1px solid rgba(255,236,207,.55);
    border-radius: 3px; background: rgba(33,6,27,.8); cursor: pointer; color: var(--cream); }
  .menu-toggle span { display: block; width: 22px; height: 2px; background: currentColor; }
  .site-nav { display: none; position: absolute; top: 0; left: 0; right: 0;
    height: 100dvh; flex-direction: column; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 28px; padding: 80px 20px 30px;
    background: rgba(33,7,27,.98); overflow-y: auto; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-nav { display: flex; }
  .site-nav a { font-size: clamp(16px, 3.2vw, 21px); letter-spacing: .15em; }
  .site-nav a[aria-current="page"] { padding-bottom: 8px; }
  .home-header .menu-toggle { margin-top: 4px; }
  .section-title { font-size: clamp(40px, 7.4vw, 82px); }
}
@media (max-width: 700px) {
  .header-inner { padding-top: 18px; }
  .brand { width: 185px; }
  .display-heading { margin: 14px 0 23px; }
  .section-title { font-size: clamp(35px, 7.6vw, 59px); padding-bottom: 14px;
    text-shadow: 1px 1px #311321, 2px 2px #d85249, 3px 3px #e09e43,
                 4px 4px #571b3b, 5px 5px #26152b; }
  /* Still a single horizontal row: swipe; never tiny vertical columns. */
  .film-grid { display: flex; gap: 17px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--side); padding: 3px calc(2 * var(--side)) 16px; margin: 0 calc(-1 * var(--side));
    scrollbar-width: thin; }
  .film-card { flex: 0 0 min(82vw, 380px); scroll-snap-align: start; }
  .film-card h2, .album-card h2 { font-size: 19px; }
  .swipe-hint { display: block; margin: -14px 0 18px; font: 12px Arial,sans-serif;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
  .album-card h2 { font-size: 17px; }
  .album-card .artist { font-size: 10px; }
  .body-copy { font-size: 18px; line-height: 1.5; }
  .scene-photo { margin-top: 5px; }
  .detail-container { padding-top: 24px; }
  /* Full hallway image on portrait phones; no crop of JCR logo, no fade, no cards. */
  .home-screen { min-height: 100dvh; }
  .home-image { position: relative; width: 100%; height: auto; object-fit: contain; }
  .home-header .header-inner { padding-top: 12px; }
  .home-header .menu-toggle { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* JCR — refined supporting typography and page composition.
   Supporting font follows the thin, spaced capitals of the homepage tagline.
   Original #6 display font, real photo assets, and logo sizes remain in place. */
/* One lettering system: navigation, films, records. All text remains editable. */
.site-nav a { font-family: 'Lato', Arial, sans-serif; font-weight: 500;
  font-size: clamp(11px, .95vw, 14px); letter-spacing: .155em; }
.film-card h2, .album-card h2 {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.55vw, 22px);
  text-transform: uppercase;
  letter-spacing: .125em;
  line-height: 1.34;
  text-wrap: pretty;
  margin-top: 15px;
}
.album-card .artist {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 12px; font-weight: 300; letter-spacing: .21em;
  margin-top: 5px;
}
/* More deliberate record-gallery spacing. No frame around art. */
.page-music .album-grid { grid-template-columns: repeat(2, minmax(0, 350px));
  gap: clamp(28px, 5.5vw, 80px); }
/* On desktop the section title sits beside, not below, the big JCR brand.
   This brings the photographs/covers into view without reducing logo size. */
@media (min-width: 1050px) {
  .page-music .main-content > .container,
  .page-about .main-content > .container,
  .page-contact .main-content > .container { position: relative; }
  .page-music .display-heading,
  .page-about .display-heading,
  .page-contact .display-heading {
    position: absolute;
    top: -142px;
    left: clamp(345px, 28.2vw, 438px);
    right: var(--side);
    margin: 0;
    text-align: center;
  }
  .page-music .section-title,
  .page-about .section-title,
  .page-contact .section-title {
    font-size: clamp(62px, 5.7vw, 86px);
    letter-spacing: -.063em;
    padding-bottom: 12px;
    white-space: nowrap;
  }
  .page-music .album-grid { margin-top: 4px; }
  .page-about .scene-photo,
  .page-contact .scene-photo { margin-top: 0; }
}
/* Tablet widths keep the headline in normal document flow to avoid overlap. */
@media (min-width: 701px) and (max-width: 1049px) {
  .page-music .display-heading,
  .page-about .display-heading,
  .page-contact .display-heading { margin-top: -8px; margin-bottom: 8px; text-align: center; }
  .page-music .section-title,
  .page-about .section-title,
  .page-contact .section-title { font-size: clamp(50px, 7.15vw, 75px); }
  .page-music .album-grid { grid-template-columns: repeat(2,minmax(0,330px)); }
}
@media (max-width: 700px) {
  .page-music .display-heading,
  .page-about .display-heading,
  .page-contact .display-heading { text-align: center; margin: 0 0 9px; }
  .page-music .section-title,
  .page-about .section-title,
  .page-contact .section-title { font-size: clamp(33px, 7.2vw, 52px); }
  .album-grid { margin-top: 0; }
  .page-music .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .film-card h2, .album-card h2 { font-size: 17px; letter-spacing: .095em; }
  .site-nav a { font-size: clamp(15px, 3.2vw, 21px); letter-spacing: .16em; }
  .album-card .artist { font-size: 10px; }
}

/* Center the cinematic section title over the three-film row on desktops. */
@media (min-width: 1050px) { .page-films .display-heading { text-align: center; } }

/* --- JCR OCTOBER REVIEW: requested precise page-level adjustments --- */
/* Homepage: separate exact logo from photo, with editable tagline. No additional cards. */
.home-artboard {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, calc(100dvh * 1536 / 904));
  aspect-ratio: 1536 / 904;
  transform: translate(-50%, -50%);
}
.home-artboard .home-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.home-logo { position:absolute; display:block; left:10.2%; top:12.5%; width:28.0%; z-index:2; }
.home-logo img { display:block; width:100%; height:auto; }
.home-tagline { position:absolute; left:11.2%; top:50.9%; z-index:2; margin:0;
  color:rgba(248,243,244,.92); font-family:'Lato',Arial,sans-serif;
  font-size:clamp(8px, .91vw, 14px); font-weight:400; line-height:2.02;
  letter-spacing:.26em; text-transform:uppercase; text-shadow:0 1px 3px rgba(5,0,7,.7); }
/* Give the photo/covers more importance without letting headings crowd the top navigation. */
@media (min-width: 1050px) {
  .page-music .main-content,
  .page-about .main-content,
  .page-contact .main-content { margin-top: -24px; }
}
/* Music: a true centered heading, with room beneath navigation and covers above the fold. */
@media (min-width: 1050px) {
  .page-music .display-heading,
  .page-about .display-heading,
  .page-contact .display-heading {
    position: static; left:auto; right:auto; top:auto;
    width:100%; margin:-12px auto 10px; text-align:center;
  }
  .page-music .section-title { font-size:clamp(52px,5.05vw,73px); white-space:normal; }
  .page-about .section-title, .page-contact .section-title {
    font-size:clamp(65px,6.3vw,92px); white-space:normal; }
}
.page-music .album-grid { grid-template-columns:repeat(2, minmax(0,340px));
  gap:clamp(25px,4vw,66px); margin-top:0; }
.page-music .display-heading { margin-bottom:10px; }
.page-music .album-card h2 { margin-top:10px; }
/* About/Contact: wide cinematic photography, with centered headlines above it. */
.page-about .main-content > .container,
.page-contact .main-content > .container { width:100%; max-width:none; padding:0 0 55px; }
.page-about .display-heading,
.page-contact .display-heading { padding:0 var(--side); }
.page-about .scene-photo,
.page-contact .scene-photo { margin:10px 0 29px; width:100%; }
.page-about .scene-photo img,
.page-contact .scene-photo img { width:100%; height:auto; display:block; }
.page-about .body-copy,
.page-contact .body-copy { padding-inline:var(--side); }
/* Keep the selected film composition, #6 typeface and film art exactly as before. */
@media (min-width:701px) and (max-width:1049px) {
  .page-music .section-title { font-size:clamp(45px,5.3vw,61px); }
  .page-music .album-grid { grid-template-columns:repeat(2,minmax(0,310px)); }
}
@media (max-width:700px) {
  .home-artboard { position:relative; left:auto; top:auto; width:100%; height:auto; transform:none; }
  .home-artboard .home-image { position:relative; width:100%; height:auto; display:block; }
  .home-logo { top:12.5%; }
  .home-tagline { font-size:clamp(3.5px, .86vw, 7px); letter-spacing:.21em; line-height:1.75; }
  .page-music .display-heading { margin:12px auto 13px; }
  .page-music .section-title { font-size:clamp(28px,7.15vw,49px); }
  .page-music .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .page-about .display-heading, .page-contact .display-heading { margin:12px 0 14px; }
  .page-about .scene-photo, .page-contact .scene-photo { margin:10px 0 23px; }
}

/* Editorial About / Contact: approved Option B. The copy and title share
   exactly the same optical center; image remains the supplied original. */
.page-about .main-content > .container,
.page-contact .main-content > .container {
  max-width:none; width:100%; padding:0; padding-bottom:0;
}
.page-about .main-content,
.page-contact .main-content { margin-top:0; }
.editorial-layout { display:grid; grid-template-columns:minmax(0, 1.72fr) minmax(370px,1fr);
  min-height:max(555px, calc(100dvh - 239px)); width:100%; }
.editorial-photo { position:relative; min-width:0; overflow:hidden; background:#160f13; }
.editorial-photo img { position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover; object-position:29% center; }
.page-contact .editorial-photo img { object-position:57% center; }
.editorial-panel { min-width:0; display:grid; place-items:center;
  padding:50px clamp(25px,3.6vw,70px);
  background:radial-gradient(ellipse at 100% 0%, #552043 0%, transparent 70%),#270a20;
  border-left:1px solid rgba(255,226,202,.12); }
.editorial-content { width:100%; max-width:440px; text-align:center; }
.editorial-content::before { content:''; display:block; width:86px; height:2px;
  margin:0 auto 29px; background:#e8a34d; }
.editorial-heading { display:block; width:100%; margin:0 0 29px;
  font-size:clamp(52px,5.1vw,76px); line-height:1.12;
  letter-spacing:-.065em; padding:0 9px 14px 0; text-align:center;
  overflow:visible; }
.editorial-copy { max-width:390px; margin:0 auto; text-align:center;
  font:400 clamp(18px,1.45vw,22px)/1.5 Georgia,'Times New Roman',serif;
  text-wrap:pretty; }
.editorial-copy p { margin:0 0 20px; }
.editorial-copy p:last-child { margin-bottom:0; }
/* Music: two records as the focal objects, paired captions on the same axis. */
.page-music .album-grid { grid-template-columns:repeat(2,minmax(0,354px));
  gap:clamp(30px,4.8vw,66px); margin:0 auto; }
.page-music .album-card { text-align:center; }
.page-music .album-card h2 { margin-top:11px; }
.page-music .album-card .artist { margin-top:5px; }
.page-music .display-heading { margin-bottom:10px; }
@media (min-width:1050px) {
  .page-music .main-content { margin-top:-31px; }
  .page-music .section-title { font-size:clamp(52px,5.05vw,73px); }
}
@media (min-width:701px) and (max-width:1049px) {
  .page-music .album-grid { grid-template-columns:repeat(2,minmax(0,325px)); }
}
@media (max-width:980px) {
  .editorial-layout { display:flex; flex-direction:column; min-height:0; }
  .editorial-photo { width:100%; height:auto; aspect-ratio:1.8; }
  .editorial-photo img { object-position:26% center; }
  .editorial-panel { min-height:355px; padding:42px 26px 56px; border-left:0;
    border-top:1px solid rgba(255,226,202,.12); }
  .editorial-content::before { margin-bottom:24px; }
  .editorial-heading { font-size:clamp(51px,8.8vw,74px); margin-bottom:23px; }
  .editorial-copy { font-size:19px; }
}
@media (max-width:700px) {
  .editorial-photo { aspect-ratio:1.28; }
  .editorial-panel { padding:37px 22px 51px; min-height:0; }
  .editorial-heading { font-size:clamp(50px,12vw,66px); }
  .editorial-copy { font-size:18px; max-width:390px; }
  .page-music .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .page-music .album-card h2 { font-size:16px; }
}
/* Contact's shorter copy still fills the remaining phone viewport with its panel. */
@media (max-width:700px) {
  .page-contact .editorial-panel { min-height:max(375px,calc(100dvh - 470px)); }
}


/* --------------------------------------------------------------
   JCR TYPOGRAPHY / HEADER CONSISTENCY — 21 Oct 2026
   The same physical font, letter spacing, heading scale and navigation
   coordinates are applied across ALL pages. Home artwork is untouched.
   -------------------------------------------------------------- */
:root {
  --supporting-font: 'Lato', Arial, Helvetica, sans-serif;
  --supporting-tracking: .20em;
  --heading-size: clamp(44px, 5.05vw, 73px);
}
/* Align desktop menus to the exact position and typography of Home. */
.site-header .header-inner,
.home-header .header-inner {
  padding-top: 18px;
}
.site-header .site-nav,
.home-header .site-nav {
  padding-top: 16px;
  gap: clamp(12px, 1.8vw, 31px);
}
.site-nav a {
  font-family: var(--supporting-font);
  font-weight: 500;
  font-size: clamp(11px, .95vw, 14px);
  letter-spacing: .155em;
  line-height: normal;
  padding-bottom: 10px;
}
/* One exact heading font and size for Motion Pictures, Recorded Music,
   About and Contact. Film and record pages also share heading Y position. */
.section-title,
.page-films .section-title,
.page-music .section-title,
.page-about .editorial-heading,
.page-contact .editorial-heading {
  font-family: 'Inter', 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: var(--heading-size);
  line-height: 1.095;
  letter-spacing: -.065em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 1px 1px #311321, 3px 3px #d85249, 5px 5px #e09e43,
               7px 7px #571b3b, 9px 9px #26152b;
}
.page-films .main-content,
.page-music .main-content { margin-top: -31px; }
.page-films .display-heading,
.page-music .display-heading {
  position: static;
  width: 100%;
  inset: auto;
  text-align: center;
  margin: -12px auto 10px;
}
.page-films .section-title,
.page-music .section-title {
  white-space: normal;
  padding: 0 13px 12px 0;
}
/* Shared caption font is the same Lato used by the homepage tagline.
   Supporting text stays real selectable, editable HTML text. */
.film-card h2,
.album-card h2 {
  font-family: var(--supporting-font);
  font-weight: 400;
  font-size: clamp(16px, 1.42vw, 20px);
  letter-spacing: var(--supporting-tracking);
  text-transform: uppercase;
  line-height: 1.39;
}
.album-card .artist {
  font-family: var(--supporting-font);
  font-weight: 400;
  letter-spacing: var(--supporting-tracking);
}
/* Keep original photo-left / text-right editorial composition, without
   the decorative rule. Header is now exactly the shared site header. */
.page-about .main-content,
.page-contact .main-content { margin-top: 0; }
.page-about .main-content > .container,
.page-contact .main-content > .container {
  width: 100%; max-width: none; padding: 0;
}
.editorial-layout {
  display: grid;
  grid-template-columns: minmax(0,1.72fr) minmax(390px,1fr);
  min-height: max(555px, calc(100dvh - 245px));
}
.editorial-content::before,
.text-panel::before { content: none; display: none; }
.editorial-heading,
.page-about .editorial-heading,
.page-contact .editorial-heading {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 27px;
  padding: 0 10px 13px 0;
  white-space: nowrap;
}
.editorial-copy,
.editorial-copy p {
  font-family: var(--supporting-font);
  font-weight: 400;
  letter-spacing: .085em;
  text-align: center;
}
.editorial-copy {
  max-width: 390px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  margin-inline: auto;
}
@media (min-width: 961px) and (max-width: 1120px) {
  .editorial-layout { grid-template-columns: minmax(0, 1.35fr) minmax(390px, 1fr); }
}
@media (max-width: 980px) {
  .editorial-layout { display: flex; flex-direction: column; min-height: 0; }
  .editorial-photo { width: 100%; height: auto; aspect-ratio: 1.8; }
  .editorial-panel { padding: 42px 26px 56px; min-height: 355px; }
  .editorial-heading { margin-bottom: 24px; }
  .editorial-copy { font-size: 17px; }
}
@media (max-width: 960px) {
  .site-header .header-inner, .home-header .header-inner { padding-top: 18px; }
  .site-header .site-nav, .home-header .site-nav { padding: 80px 20px 30px; }
  .site-header .menu-toggle, .home-header .menu-toggle { margin-top: 0; }
  .site-nav a { font-size: clamp(16px, 3.2vw, 21px); letter-spacing: .19em; }
  :root { --heading-size: clamp(36px, 6.4vw, 64px); }
  .page-films .main-content, .page-music .main-content { margin-top: 0; }
  .page-films .display-heading, .page-music .display-heading { margin: 0 auto 12px; }
}
@media (max-width: 700px) {
  :root { --heading-size: clamp(26px, 7.1vw, 49px); }
  .page-films .display-heading, .page-music .display-heading { margin: 12px auto 13px; }
  .page-films .section-title, .page-music .section-title,
  .page-about .editorial-heading, .page-contact .editorial-heading {
    font-size: var(--heading-size);
    text-shadow: 1px 1px #311321, 2px 2px #d85249, 3px 3px #e09e43,
                 4px 4px #571b3b, 5px 5px #26152b;
  }
  .film-card h2, .album-card h2 { font-size: 16px; letter-spacing: .13em; }
  .editorial-photo { aspect-ratio: 1.28; }
  .editorial-panel { padding: 38px 22px 51px; min-height: 0; }
  .editorial-heading { margin-bottom: 22px; }
  .editorial-copy { font-size: 16px; line-height: 1.55; letter-spacing: .045em; }
  .page-contact .editorial-panel { min-height: max(375px, calc(100dvh - 470px)); }
}



/* CANONICAL photo pages — no former conflicting layout experiments */
body.full-photo-page{height:100dvh;min-height:0;position:relative;isolation:isolate;overflow:hidden;background:#230919}
.full-photo-page .site-header{position:relative;z-index:20}
.full-photo-page .full-photo-main{position:static;margin:0;padding:0;min-height:0}
.full-photo-page .full-photo-background{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;object-fit:cover;object-position:center;filter:none;transform:none;z-index:-1;pointer-events:none}
/* About original entrance: keep the real black decal and glowing wall logo. */
.page-about .full-photo-background{object-position:18% center}
.page-about .brand{visibility:hidden}
.full-photo-page .full-photo-copy{position:fixed;z-index:3;left:50%;top:51%;transform:translate(-50%,-10%);width:min(720px,calc(100vw - 48px));text-align:center}
.full-photo-page .full-photo-copy .section-title{font-family:'Inter','Arial Black',Impact,sans-serif;font-size:clamp(43px,5.1vw,69px);font-weight:900;line-height:1.08;letter-spacing:-.065em;text-transform:uppercase;color:#fcefd2;margin:0 0 24px;padding:0 12px 10px 0;text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b,9px 9px #26152b}
.full-photo-page .full-photo-text{font-family:'Lato',Arial,sans-serif;font-size:clamp(16px,1.45vw,19px);font-weight:400;line-height:1.55;letter-spacing:.055em;color:#fff3e7;text-shadow:0 2px 5px rgba(15,3,12,.88)}
.full-photo-page .full-photo-text p{margin:0 0 19px}
.full-photo-page .site-nav a{color:#fff3e8}
.contact-photo{display:contents}
/* Approved Contact mockup includes the logo/heading/copy already. Never double paint them. */
@media(min-width:961px){
 .page-contact .brand{visibility:hidden}
 .page-contact .full-photo-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .page-contact .site-nav{padding-top:16px}
 .page-contact .site-nav a{opacity:1;pointer-events:auto}
}
@media(max-width:960px){
 .page-contact .brand{visibility:visible}
 .page-contact .full-photo-copy{position:fixed;left:50%;top:50%;width:min(650px,calc(100vw - 36px));height:auto;transform:translate(-50%,-10%);clip-path:none;overflow:visible}
 .full-photo-page .full-photo-copy .section-title{font-size:clamp(34px,8vw,58px)}
}
@media(max-width:700px){
 .full-photo-page .full-photo-copy{top:45%;width:calc(100vw - 30px)}
 .full-photo-page .full-photo-copy .section-title{font-size:clamp(34px,9vw,52px);margin-bottom:16px}
 .full-photo-page .full-photo-text{font-size:clamp(13px,3.7vw,17px);letter-spacing:.035em;line-height:1.45}
 .full-photo-page .full-photo-text p{margin-bottom:12px}
}
/* Retain approved centered film captions. */
.page-films .film-card h2 { text-align:center; }

/* FINAL SITE PHOTO CORRECTIONS: one rule per page, override previous trials. */
@media (min-width:961px) {
  /* Photograph contains the approved logo and copy. Keep the entire artwork
     inside the viewport so its top cannot be cropped. Visible links are HTML. */
  .page-contact .full-photo-background { object-fit:fill; object-position:center center; }
  .page-contact .site-nav { z-index:30; }
  .page-contact .site-nav a { color:#fff4e9; }
  /* About must keep the black lettering on the left-hand glass door visible. */
  .page-about .full-photo-background { object-position:left center; }
}

/* APPROVED ABOUT typography only — 22 October 2026.
   All visible page words are real editable HTML; photo and wall signs remain an image. */
.page-about.full-photo-page .full-photo-background {object-fit:cover;object-position:center center;filter:none;transform:none}
.page-about.full-photo-page .brand {visibility:hidden}
.page-about.full-photo-page .full-photo-copy {left:50%;top:52%;transform:translate(-50%,-7%);width:min(800px,calc(100vw - 50px));text-align:center}
.page-about.full-photo-page .full-photo-copy .section-title {font-family:'Inter','Arial Black',Impact,sans-serif;font-weight:900;font-size:var(--heading-size);letter-spacing:-.065em;line-height:1.095;color:#fcefd2;text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b,9px 9px #26152b;margin:0 0 24px}
.page-about.full-photo-page .full-photo-text {font-family:var(--supporting-font);font-size:clamp(16px,1.45vw,19px);font-weight:400;letter-spacing:.055em;line-height:1.55}
@media (max-width:700px) { .page-about.full-photo-page .full-photo-copy{top:48%;width:calc(100vw - 30px)} .page-about.full-photo-page .full-photo-copy .section-title{font-size:var(--heading-size)} }

/* Approved refinement: slightly narrower centered description blocks only. */
.page-about.full-photo-page .full-photo-text,
.page-contact.full-photo-page .full-photo-text { max-width: 590px; margin-left: auto; margin-right: auto; }

/* Additional album LISTEN links and listening pages only. Existing styling untouched. */
.page-music .album-listen { margin: 17px 0 0; text-align: center; }
.page-music .album-listen a { color: #f4dccb; font-family: var(--supporting-font), Arial, sans-serif; font-size: 13px; letter-spacing: .22em; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.page-music .album-listen a:hover, .page-music .album-listen a:focus-visible { color: #fff; }
.page-listening .listening-main { width: min(100% - 36px, 900px); margin: 28px auto 70px; }
.page-listening .listening-content { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 360px); gap: clamp(28px, 5vw, 72px); align-items: center; justify-content: center; }
.page-listening .listening-back { grid-column: 1/-1; font-family: var(--supporting-font), Arial, sans-serif; font-size: 12px; letter-spacing: .16em; color: #ead4c9; text-decoration: none; }
.page-listening .listening-cover { width: 100%; display: block; height: auto; aspect-ratio: 1; object-fit: cover; }
.page-listening .listening-details h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #fcefd2; font-size: clamp(28px, 3.4vw, 45px); line-height: 1.18; margin: 0 0 8px; }
.page-listening .listening-artist, .page-listening .listening-prompt { font-family: var(--supporting-font), Arial, sans-serif; font-size: 11px; letter-spacing: .19em; color: #efd3c9; }
.page-listening .listening-prompt { margin: 27px 0 12px; }
.page-listening .listening-services { display: flex; flex-direction: column; gap: 4px; }
.page-listening .listening-service { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid rgba(255,240,225,.23); color: #fff0e2; text-decoration: none; font-family: var(--supporting-font), Arial, sans-serif; font-size: 14px; letter-spacing: .045em; }
.page-listening .listening-service:hover, .page-listening .listening-service:focus-visible { color: #ffbe91; }
@media(max-width:700px){.page-listening .listening-main{margin-top:16px}.page-listening .listening-content{grid-template-columns: minmax(0, 340px);gap:19px}.page-listening .listening-back{grid-column:1}.page-listening .listening-details h1{font-size:29px}}

/* Film detail pages: additive styling only; original film listing untouched. */
.page-film-detail .film-detail-main{width:min(100% - 36px, 940px);margin:25px auto 70px;text-align:center}
.page-film-detail .film-detail-back{display:block;text-align:left;color:#efd3c9;font-family:var(--supporting-font),Arial,sans-serif;font-size:12px;letter-spacing:.16em;text-decoration:none;margin:0 0 26px}
.page-film-detail .film-detail-title{color:#fcefd2;font-family:var(--supporting-font),Arial,sans-serif;font-weight:400;font-size:clamp(19px,2.5vw,32px);letter-spacing:.055em;line-height:1.4;text-transform:uppercase;margin:0 auto 25px;max-width:850px}
.page-film-detail .film-player-wrap{width:100%;aspect-ratio:16/9;background:#150b11;overflow:hidden}
.page-film-detail .film-player-wrap iframe{width:100%;height:100%;border:0;display:block}
.page-film-detail .film-recognition{font-family:var(--supporting-font),Arial,sans-serif;color:#ead6c9;font-size:13px;letter-spacing:.12em;margin:18px 0 0}
.page-film-detail .film-recognition:empty{display:none}
.page-film-detail .film-watch-links{display:flex;justify-content:center;gap:clamp(20px,5vw,70px);margin-top:25px;flex-wrap:wrap}
.page-film-detail .film-watch-links a{font-family:var(--supporting-font),Arial,sans-serif;color:#f4dccb;font-size:13px;letter-spacing:.13em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px}
.page-film-detail .film-watch-links a:hover,.page-film-detail .film-detail-back:hover{color:#fff}

/* Album covers: correct sizing after wrapping each image in a clickable link. */
.page-music .album-card > a:has(> img) { display:block; width:100%; max-width:100%; }
.page-music .album-card > a > img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1 / 1; object-fit:contain; border:0; box-shadow:none; }

/* Contact email: visible beneath the existing baked-in desktop copy;
   the untouched mobile photo has real HTML text. */
.page-contact .contact-email-desktop {
  position: fixed; z-index: 5; left: 0; right: 0; top: 72%;
  margin: 0; text-align:center; font-family: 'Lato',Arial,sans-serif;
  font-size: clamp(14px, 1.2vw, 19px); letter-spacing:.06em;
  text-shadow: 0 2px 5px rgba(10,5,10,.8);
}
.page-contact .contact-email-desktop a,
.page-contact .contact-email-mobile a { color: #fff1e5; text-decoration: none; border-bottom:1px solid rgba(255,241,229,.65); }
.page-contact .contact-email-desktop a:hover,
.page-contact .contact-email-mobile a:hover { color: #fff; }
.page-contact .contact-email-mobile { margin-top: 18px; }
@media (min-width:961px) { .page-contact .contact-email-mobile { display:none; } }
@media (max-width:960px) { .page-contact .contact-email-desktop { display:none; } }


/* CONTACT REBUILD — editable HTML on an existing, clean conference room photo.
   Old background contained baked-in type. The alternative approved clean
   photo is a wide crop of the same room, so its framing differs somewhat. */
.page-contact.full-photo-page { background: #180b13; }
.page-contact .contact-photo { display:contents; }
.page-contact .full-photo-background {
  position:fixed; inset:0; display:block; width:100%; height:100dvh;
  object-fit:cover; object-position:center center; filter:none; transform:none;
}
/* Make Contact's real separate logo consistent with Motion Pictures and Music. */
.page-contact .brand { visibility:visible !important; }
.page-contact .brand img { width:100%; height:auto; display:block; }
.page-contact .full-photo-copy {
  position:fixed !important; z-index:5; display:block !important;
  left:50%; top:52%; transform:translate(-50%,-12%);
  width:min(1160px,calc(100vw - 54px)); height:auto !important;
  overflow:visible !important; clip-path:none !important;
  margin:0; text-align:center;
}
.page-contact .full-photo-copy .section-title {
  font-family:'Inter','Arial Black',Impact,sans-serif;
  font-size:clamp(48px,5.1vw,69px); line-height:1.08;
  font-weight:900; letter-spacing:-.065em; color:#fcefd2;
  text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b,9px 9px #26152b;
  margin:0 0 28px; padding:0 14px 16px 0;
}
.page-contact .full-photo-text {max-width:none !important; margin:0 auto;
  font-family:'Lato',Arial,sans-serif; font-size:clamp(14px,1.38vw,18px);
  font-weight:400; line-height:1.55; letter-spacing:.03em;
  color:#fff3e7; text-shadow:0 2px 7px rgba(8,3,8,.95),0 1px 3px #160d17;
}
.page-contact .full-photo-text p {margin:0 auto 15px;}
.page-contact .contact-address {font-size:clamp(15px,1.42vw,19px); margin-top:19px !important;}
.page-contact .contact-address a {color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,243,231,.7); padding-bottom:3px;}
.page-contact .contact-address a:hover {color:white;border-color:white;}
@media(min-width:1000px) {
 .page-contact .full-photo-text p:first-child {white-space:nowrap;}
}
@media(max-width:960px) {
 .page-contact .full-photo-copy {width:calc(100vw - 40px);top:48%;transform:translate(-50%,0);}
 .page-contact .full-photo-copy .section-title {font-size:clamp(39px,7.9vw,60px);margin-bottom:18px;}
 .page-contact .full-photo-text {font-size:clamp(14px,2.15vw,18px);letter-spacing:.025em;}
}
@media(max-width:600px) {
 .page-contact .full-photo-copy {top:43%;width:calc(100vw - 36px);transform:translate(-50%,0);}
 .page-contact .full-photo-copy .section-title {font-size:clamp(39px,9vw,52px);margin-bottom:15px;}
 .page-contact .full-photo-text {font-size:15px;line-height:1.5;}
 .page-contact .contact-address {font-size:16px;}
}


/* Contact: match photographic JCR mark to exactly the same visual size and
   top/left corner as the common site logo on Music and Motion Pictures.
   Keep the approved room view instead of pushing the ceiling lower. */
@media (min-width: 961px) and (min-aspect-ratio: 1.46) {
  .page-contact .full-photo-background {
    position:fixed; inset:auto;
    left:-3.33vw;
    top:calc(23px - 1.72vw);
    width:107.70vw;
    height:max(100dvh, 63.35vw);
    max-width:none;
    object-fit:fill;
    object-position:left top;
    transform:none;
  }
  /* Only one logo and one CONTACT title: both are already on the room photo. */
  .page-contact .header-inner .brand {visibility:hidden !important;}
  .page-contact .full-photo-copy {
    position:fixed !important; left:50%; top:42.3vw;
    transform:translateX(-50%);
    width:min(1160px,calc(100vw - 38px));
    height:auto !important; clip-path:none !important;
    overflow:visible !important; text-align:center;
  }
  .page-contact .full-photo-copy .section-title {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .page-contact .full-photo-text {display:flex;flex-direction:column;align-items:center;
    max-width:none !important;margin:0 auto;
    font-size:clamp(14px,1.43vw,19px);
    line-height:1.3; letter-spacing:.045em;
  }
  .page-contact .full-photo-text p:first-child {white-space:nowrap;margin:0 !important;}
  .page-contact .contact-address {margin:9px auto 0 !important;font-size:clamp(14px,1.37vw,18px);}
}
/* Portrait/tablet and phone: use the original clean photo, shared live logo and
   same editable centered copy; don't render any baked text on this view. */
@media (max-width: 960px), (max-aspect-ratio: 1.46) {
  .page-contact .header-inner .brand {visibility:visible !important;}
  .page-contact .full-photo-background {
    position:fixed;inset:0;width:100%;height:100dvh;
    object-fit:cover;object-position:center center;transform:none;
  }
  .page-contact .full-photo-copy {
    position:fixed !important; left:50%; top:48%;
    transform:translate(-50%,-4%); width:calc(100vw - 36px);
    height:auto !important;clip-path:none !important;overflow:visible !important;
  }
  .page-contact .full-photo-text p:first-child {white-space:normal;}
  .page-contact .contact-address {margin-top:9px !important;}
}
@media(max-width:600px){.page-contact .full-photo-copy{top:44%;}}


/* FINAL CONTACT + ABOUT ADJUSTMENTS (Oct 2026)
   Contact should match the approved screenshot framing while using the shared
   live JCR logo position from Motion Pictures / Recorded Music.
   About heading should sit at the same vertical height as Contact. */
@media (min-width: 961px) {
  .page-contact .full-photo-background {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100dvh !important;
    left: 0 !important;
    top: 0 !important;
    inset: 0 !important;
  }
  .page-contact .header-inner .brand {
    visibility: visible !important;
  }
  .page-contact .full-photo-copy {
    position: fixed !important;
    left: 50% !important;
    top: 74.8% !important;
    transform: translateX(-50%) !important;
    width: min(960px, calc(100vw - 60px)) !important;
    text-align: center !important;
    z-index: 6 !important;
  }
  .page-contact .full-photo-copy .section-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .page-contact .full-photo-text {
    font-size: clamp(17px, 1.82vw, 19px) !important;
    line-height: 1.42 !important;
    letter-spacing: .02em !important;
    color: #fff3e7 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.75) !important;
  }
  .page-contact .full-photo-text p:first-child {
    white-space: nowrap !important;
    margin: 0 auto 8px !important;
  }
  .page-contact .contact-address {
    margin: 0 auto !important;
    font-size: clamp(16px, 1.62vw, 18px) !important;
  }
  .page-contact .contact-address a {
    border-bottom-width: 1px !important;
  }

  /* darken the previously baked-logo corner slightly so the new live logo sits
     cleanly over the same area without visible remnants */
  .page-contact .full-photo-main::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: min(29vw, 355px);
    height: min(33vh, 295px);
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(circle at 38% 67%, rgba(163,101,44,.22) 0, rgba(163,101,44,0) 24%),
      linear-gradient(180deg, rgba(29,10,16,.38), rgba(29,10,16,.08) 45%, rgba(29,10,16,0) 100%),
      linear-gradient(90deg, rgba(13,4,10,.55), rgba(13,4,10,.14) 40%, rgba(13,4,10,0) 100%);
  }
  .page-contact .site-header { z-index: 20; }

  .page-about.full-photo-page .full-photo-copy {
    top: 58.5% !important;
    transform: translate(-50%, -8%) !important;
  }
}
@media (max-width: 960px) {
  .page-contact .full-photo-background {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .page-about.full-photo-page .full-photo-copy {
    top: 50% !important;
    transform: translate(-50%, -6%) !important;
  }
}


/* LAST HEADING ALIGNMENT — Contact's visible title is now editable and
   anchored to ABOUT's preferred visual title position, not baked in a photo.
   Header/logo and boardroom crop are unchanged. */
.page-contact .contact-page-title {
  display:block !important;
  position:fixed !important;
  z-index:7 !important;
  left:50% !important;
  top:calc(58.5dvh - 22px) !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  height:auto !important;
  max-width:calc(100vw - 32px) !important;
  overflow:visible !important;
  clip-path:none !important;
  text-align:center !important;
  font-family:'Inter','Arial Black',Impact,sans-serif !important;
  font-size:var(--heading-size) !important;
  font-weight:900 !important;
  letter-spacing:-.065em !important;
  line-height:1.095 !important;
  color:#fcefd2 !important;
  text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b,9px 9px #26152b !important;
  margin:0 !important;
  padding:0 13px 10px 0 !important;
  white-space:nowrap !important;
}
@media (max-width:960px) {
 .page-contact .contact-page-title { top:calc(50dvh - 14px) !important; }
}
@media (max-width:700px) {
 .page-contact .contact-page-title { top:calc(48dvh + 2px) !important; font-size:var(--heading-size) !important; }
}
/* Mobile: supporting contact copy stays below the newly aligned headline. */
@media (min-width:701px) and (max-width:960px) {
  .page-contact .full-photo-copy {
    top:calc(50dvh + 76px) !important;
    transform:translateX(-50%) !important;
  }
}
@media (max-width:700px) {
  .page-contact .full-photo-copy {
    top:calc(48dvh + 62px) !important;
    transform:translateX(-50%) !important;
  }
}

/* Approved About page handoff — faithful image on desktop; real links remain clickable.
   Uses the pre-AI-experiment composition with Jay's actual original photograph. */
body.page-about-approved{height:100dvh;min-height:0;overflow:hidden;background:#230919;}
.page-about-approved .about-mobile-header{display:none}
.page-about-approved .approved-about-artboard{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw, calc(100dvh * 1672 / 941));aspect-ratio:1672/941;overflow:hidden;
}
.page-about-approved .approved-about-desktop-image{display:block;width:100%;height:100%;max-width:none}
.page-about-approved .about-artwork-links{position:absolute;inset:0;pointer-events:none;z-index:5}
.page-about-approved .about-artwork-links a{
  position:absolute;top:2.7%;height:4.8%;text-decoration:none;color:transparent;
  background:transparent;pointer-events:auto;white-space:nowrap;overflow:hidden;
  font-size:1px;line-height:1px;
}
.page-about-approved .about-artwork-links a:focus-visible{outline:2px solid #f0a343;outline-offset:1px;background:rgba(37,10,28,.45)}
.page-about-approved .about-hotspot-home{left:57.35%;width:4.15%}
.page-about-approved .about-hotspot-films{left:62.15%;width:10.9%}
.page-about-approved .about-hotspot-music{left:73.5%;width:10.25%}
.page-about-approved .about-hotspot-about{left:84.55%;width:5.35%}
.page-about-approved .about-hotspot-contact{left:90.35%;width:6.8%}
.page-about-approved .approved-about-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* On smaller screens, use an unaltered crop from the approved artwork plus readable,
   accessible HTML text and the original functional site menu. No scroll needed. */
@media(max-width:960px){
  body.page-about-approved{overflow:hidden}
  .page-about-approved .about-mobile-header{display:block;position:absolute;inset:0 0 auto;z-index:40}
  .page-about-approved .about-mobile-header .header-inner{padding:15px 19px 0;}
  .page-about-approved .about-mobile-header .brand{width:110px;opacity:0.98}
  .page-about-approved .about-mobile-header .menu-toggle{display:flex;margin-top:0}
  .page-about-approved .about-mobile-header .site-nav{display:none}
  .page-about-approved.menu-open .about-mobile-header .site-nav{display:flex}
  .page-about-approved .approved-about-artboard{display:none}
  .page-about-approved .approved-about-main{position:fixed;inset:0;overflow:hidden;
    background:linear-gradient(180deg,rgba(38,9,23,0) 15%,#230919 63%),#230919 url('assets/about-mobile-scene.jpg') center 15% / 100% auto no-repeat;
  }
  .page-about-approved .approved-about-copy{position:absolute;clip-path:none;overflow:visible;
    width:min(calc(100vw - 34px),600px);height:auto;left:50%;top:49dvh;bottom:auto;transform:translateX(-50%);
    text-align:center;color:#fff3e7;font:400 clamp(13px,3.3vw,17px)/1.52 'Lato',Arial,sans-serif;letter-spacing:.035em;
    text-shadow:0 2px 6px #190513;
  }
  .page-about-approved .approved-about-copy h1{color:#fcefd2;font:900 clamp(38px,10vw,64px)/1.05 Inter,'Arial Black',sans-serif;
    margin:0 0 21px;letter-spacing:-.06em;text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b;}
  .page-about-approved .approved-about-copy p{margin:0 0 15px;}
}
@media(min-width:701px) and (max-width:960px){
  .page-about-approved .approved-about-main{background-size:auto 64dvh;background-position:center top;}
  .page-about-approved .approved-about-copy{top:52dvh;font-size:clamp(16px,2.0vw,21px)}
}
@media(max-width:420px){
  .page-about-approved .approved-about-main{background-position:center 18%;background-size:110% auto;}
  .page-about-approved .approved-about-copy{top:49dvh}
}
@media(max-height:650px) and (max-width:960px){
  .page-about-approved .approved-about-copy{top:49dvh;font-size:12px;line-height:1.28}
  .page-about-approved .approved-about-copy h1{font-size:30px;margin-bottom:8px}
  .page-about-approved .approved-about-copy p{margin-bottom:7px}
}


/* About page: shared live desktop navigation, same size and placement as Contact.
   Original founder portrait and the other wall pictures have NOT been changed.
   Only previously baked-in text was cleaned from the hero art to allow exact positioning. */
@media(min-width:961px){
 .page-about-approved .about-mobile-header {display:block;position:relative;z-index:20;}
 .page-about-approved .about-mobile-header .header-inner .brand {visibility:hidden;}
 .page-about-approved .approved-about-copy {
   position:fixed;left:50%;top:calc(58.5dvh - 22px);transform:translateX(-50%);
   z-index:10;width:min(1000px,calc(100vw - 38px));height:auto;
   clip-path:none;overflow:visible;text-align:center;
   text-shadow:0 2px 6px rgba(0,0,0,.75);
 }
 .page-about-approved .approved-about-copy h1 {
   font-family:'Inter','Arial Black',Impact,sans-serif;
   font-size:var(--heading-size);font-weight:900;letter-spacing:-.065em;
   line-height:1.095;color:#fcefd2;text-transform:uppercase;
   text-shadow:1px 1px #311321,3px 3px #d85249,5px 5px #e09e43,7px 7px #571b3b,9px 9px #26152b;
   padding:0 12px 16px 0;margin:0 0 19px;
 }
 .page-about-approved .approved-about-copy p {
   margin:0 auto 17px;max-width:810px;
   font:400 clamp(17px,1.30vw,20px)/1.48 'Lato',Arial,sans-serif;
   letter-spacing:.045em;color:#fff3e7;
 }
}

@media(min-width:961px){
 .page-about-approved .approved-about-copy p{max-width:820px;font-size:clamp(17px,1.25vw,20px);letter-spacing:.04em;}
}
@media(max-width:960px){
 .page-about-approved .about-desktop-break{display:none;}
 .page-about-approved .about-mobile-header .header-inner{padding:18px var(--side) 0;}
 .page-about-approved .about-mobile-header .menu-toggle{margin:14px 0 0 auto;}
}


/* Film + album detail: locations and synopses — same supporting font (Lato) as the surrounding text */
.page-film-detail .film-location{font-family:var(--supporting-font),Arial,sans-serif;color:#d9c0b3;font-size:13px;letter-spacing:.12em;margin:8px 0 0}
.page-film-detail .film-recognition:empty + .film-location{margin-top:18px}
.page-film-detail .film-location:empty,.page-film-detail .film-synopsis:empty{display:none}
.page-film-detail .film-synopsis{font-family:var(--supporting-font),Arial,sans-serif;color:#fff3e7;font-size:clamp(15px,1.3vw,18px);line-height:1.6;letter-spacing:.035em;max-width:660px;margin:24px auto 0;text-wrap:balance}
.page-listening .listening-location{font-family:var(--supporting-font),Arial,sans-serif;font-size:11px;letter-spacing:.19em;color:#d9c0b3;margin:6px 0 0}

/* About: credits line — balanced so it breaks evenly like the centred paragraphs above it */
.page-about-approved .approved-about-copy p.about-credits{text-wrap:balance}

/* Short desktop windows: lift the About copy slightly so the added credits line never runs off the bottom */
@media(min-width:961px) and (max-height:780px){
 .page-about-approved .approved-about-copy{top:calc(52dvh - 22px)}
}

/* Film detail: use padding (not margin) for the bottom space so the page background runs to the very bottom when the page scrolls */
.page-film-detail .film-detail-main{margin-bottom:0;padding-bottom:70px}

/* Review: on film pages, introduce the work before the existing player. */
.page-film-detail .film-synopsis{margin:0 auto 12px;}
.page-film-detail .film-location{margin:0 auto 0;}
.page-film-detail .film-recognition{margin:8px auto 0;}
.page-film-detail .film-player-wrap{margin-top:22px;}
/* Preserve the fixed-height About page while accommodating the revised short credit paragraph. */
@media(min-width:961px){
 .page-about-approved .approved-about-copy p.about-credits{font-size:clamp(15px,1.14vw,18px);line-height:1.4;max-width:850px;}
}
@media(max-width:960px){
 .page-about-approved .approved-about-copy p.about-credits{font-size:.92em;line-height:1.37;margin-bottom:0;}
}

/* Review refinement: concise, left-aligned film information, aligned as one block above player. */
.page-film-detail .film-synopsis,
.page-film-detail .film-location,
.page-film-detail .film-recognition {
  width:min(100%, 810px);
  max-width:810px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  text-wrap:wrap;
}
.page-film-detail .film-synopsis {
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.48;
  letter-spacing:.012em;
  margin-top:0;
  margin-bottom:9px;
}
.page-film-detail .film-location { margin-top:0; }
.page-film-detail .film-recognition { margin-top:7px; }
.page-film-detail .film-player-wrap { margin-top:20px; }

/* Review: restore founder paragraph to the SAME body size as other About paragraphs. */
@media(min-width:961px){
 .page-about-approved .approved-about-copy p.about-credits {font-size:clamp(17px,1.30vw,20px);line-height:1.48;max-width:810px;}
}
@media(max-width:960px){
 .page-about-approved .approved-about-copy p.about-credits {font-size:inherit;line-height:inherit;}
}
/* Listening-page album titles: use the website's Lato typeface rather than Georgia. */
.page-listening .listening-details h1 {font-family:'Lato',Arial,sans-serif; font-weight:400;letter-spacing:.045em;}

/* Film synopsis alignment: keep Barry as approved; center the other two
   inside the same generous 810px synopsis area. */
.page-film-detail.film-id-clara .film-synopsis,
.page-film-detail.film-id-crowds .film-synopsis {
  text-align: center;
  text-wrap: balance;
}
.page-film-detail.film-id-clara .film-location,
.page-film-detail.film-id-crowds .film-location {
  text-align: center;
}

/* Consistent centered film details, retaining the generous 810px width. */
.page-film-detail .film-synopsis,
.page-film-detail .film-location,
.page-film-detail .film-recognition { text-align:center; }
.page-film-detail .film-synopsis { text-wrap:balance; }

/* Review: consistent site typography, with existing headline design preserved. */
body.interior-page { font-family:'Lato',Arial,sans-serif; }
.page-listening .listening-details h1 {font-family:'Lato',Arial,sans-serif; font-weight:400; text-transform:uppercase;}
/* The opening film copy is a quiet introduction; title is now under the player. */
.page-film-detail .film-synopsis {font-family:'Lato',Arial,sans-serif;font-size:clamp(17px,1.55vw,20px);line-height:1.55;letter-spacing:.018em;width:min(100%,810px);max-width:810px;margin:0 auto 12px;text-align:center;text-wrap:balance;}
.page-film-detail .film-location,.page-film-detail .film-recognition {font-family:'Lato',Arial,sans-serif;text-align:center;}
.page-film-detail .film-player-wrap {margin-top:clamp(38px,5vw,66px);}
.page-film-detail .film-detail-title {font-family:'Lato',Arial,sans-serif; font-size:clamp(17px,2vw,25px);font-weight:400;line-height:1.35;letter-spacing:.06em;max-width:850px;margin:24px auto 0;}
.page-film-detail .film-watch-links {margin-top:17px;}
.page-about-approved .approved-about-copy p.about-credits {font-family:'Lato',Arial,sans-serif;}

/* Film-detail typography: one consistent navigation-matched font and text column.
   Remove balancing (which made Barry appear much narrower) and film-specific overrides. */
.page-film-detail .film-detail-main .film-synopsis,
.page-film-detail .film-detail-main .film-location,
.page-film-detail .film-detail-main .film-recognition {
  box-sizing: border-box;
  width: 100%;
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Lato', Arial, sans-serif;
  text-align: center;
  text-wrap: wrap;
}
.page-film-detail .film-detail-main .film-synopsis {
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .018em;
}
.page-film-detail .film-detail-main .film-detail-title,
.page-film-detail .film-detail-main .film-detail-back,
.page-film-detail .film-detail-main .film-watch-links a {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 500;
}

/* About copy only: restore the narrower, more intimate paragraph measure. */
@media (min-width: 961px) {
  .page-about-approved .approved-about-copy p.about-credits {
    max-width: 620px;
    width: min(620px, calc(100vw - 48px));
  }
}

/* Review experiment: match all film-detail typography to the uppercase Lato navigation.
   Only lettering changes; layout, measures and video placement stay intact. */
.page-film-detail .film-detail-main .film-synopsis,
.page-film-detail .film-detail-main .film-location,
.page-film-detail .film-detail-main .film-recognition,
.page-film-detail .film-detail-main .film-detail-title,
.page-film-detail .film-detail-main .film-detail-back,
.page-film-detail .film-detail-main .film-watch-links a {
  font-family: 'Lato', Arial, sans-serif;
  text-transform: uppercase;
}

/* Review: film-first layout. All metadata is grouped below its player. */
.page-film-detail .film-detail-main .film-player-wrap { margin-top: 18px; }
.page-film-detail .film-after-player { max-width: 810px; margin: 0 auto; text-align: center; }
.page-film-detail .film-after-player .film-detail-title {
  font-family: var(--supporting-font), 'Lato', Arial, sans-serif;
  font-weight: 500; font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.4; letter-spacing: .085em; text-transform: uppercase;
  margin: 25px auto 13px; max-width: 810px;
}
.page-film-detail .film-after-player .film-synopsis {
  font-family: var(--supporting-font), 'Lato', Arial, sans-serif;
  font-weight: 400; font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55; letter-spacing: .012em; text-transform: none;
  text-align: center; text-wrap: pretty; width: 100%; max-width: 810px;
  margin: 0 auto 12px;
}
.page-film-detail .film-after-player .film-location {
  font-family: var(--supporting-font), 'Lato', Arial, sans-serif;
  font-weight: 500; font-size: clamp(11px, .95vw, 13px);
  line-height: 1.5; letter-spacing: .155em; text-transform: uppercase;
  width: 100%; max-width: 810px; margin: 0 auto;
}
.page-film-detail .film-detail-main .film-watch-links { margin-top: 20px; }
@media(max-width:600px){
 .page-film-detail .film-after-player .film-detail-title { margin-top: 20px; }
 .page-film-detail .film-after-player .film-synopsis { font-size: 16px; }
}

/* Film-first spacing refinement: lift player and keep its credits closely grouped.
   No other page or element styling is changed. */
.page-film-detail .film-detail-main { margin-top: 12px; }
.page-film-detail .film-detail-main .film-detail-back { margin-bottom: 12px; }
.page-film-detail .film-detail-main .film-player-wrap { margin-top: 8px; }
.page-film-detail .film-after-player .film-detail-title { margin-top: 16px; margin-bottom: 9px; }
.page-film-detail .film-after-player .film-synopsis { margin-bottom: 8px; }
.page-film-detail .film-detail-main .film-watch-links { margin-top: 13px; }
@media (max-width: 600px) {
  .page-film-detail .film-detail-main { margin-top: 10px; }
  .page-film-detail .film-after-player .film-detail-title { margin-top: 16px; }
}

/* Album detail titles: provide enough room for ALL NIGHT LONG on one line. */
@media (min-width: 701px) {
  .page-listening .listening-main { width: min(100% - 36px, 950px); }
  .page-listening .listening-content { grid-template-columns: minmax(0,350px) minmax(0,440px); }
  .page-listening .listening-details h1 { white-space: nowrap; }
}
@media (max-width: 700px) {
  .page-listening .listening-details h1 { font-size: clamp(23px, 5.4vw, 29px); white-space: nowrap; }
}

/* Review: crowds title is legible and intentionally breaks into two lines;
   video players start 12px higher than the Film Spacing Review baseline. */
.page-film-detail.film-id-crowds .film-after-player .film-detail-title {
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: .045em;
  line-height: 1.4;
  width: min(100%, 760px);
  max-width: 760px;
  white-space: normal;
  overflow-wrap: normal;
}
.page-film-detail .film-detail-main { margin-top: 0px; }
@media (max-width: 600px) {
  .page-film-detail .film-detail-main { margin-top: 0px; }
  .page-film-detail.film-id-crowds .film-after-player .film-detail-title { width: 100%; }
}

/* Film player: stays centred when it is sized down for shorter laptop screens (see film.js). 16:9 is kept by aspect-ratio. */
.page-film-detail .film-detail-main .film-player-wrap { margin-left:auto; margin-right:auto; }

/* MOBILE FILL (phones): Home and About use the whole screen like Contact,
   with a larger logo that matches the other pages. Desktop/tablet untouched. */
@media (max-width:700px) {
  /* Home */
  body.home-page { overflow:hidden; }
  .page-home .home-screen { position:fixed; inset:0; min-height:0; }
  .page-home .home-artboard { position:absolute; inset:0; left:0; top:0; width:100%; height:100%; aspect-ratio:auto; transform:none; }
  .page-home .home-artboard .home-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
  .page-home .home-artboard::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(35,9,25,.78) 0%,rgba(35,9,25,.42) 34%,rgba(35,9,25,0) 58%); }
  .page-home .home-logo { left:7%; top:calc(76px + 3dvh); width:min(52vw,260px); z-index:3; }
  .page-home .home-tagline { left:8%; top:calc(76px + 3dvh + min(52vw,260px) * .81); z-index:3; font-size:clamp(10px,2.9vw,13px); letter-spacing:.18em; line-height:1.8; text-shadow:0 1px 4px rgba(10,0,10,.9); }
}

/* Album pages on phones: slightly smaller cover so "Listen on" and the first
   streaming link are visible without scrolling. Desktop/tablet untouched. */
@media (max-width:700px) {
  .page-listening .listening-cover { width:min(100%, 37dvh); height:auto; aspect-ratio:1/1; }
  .page-listening .listening-content { gap:14px; }
}

/* Phones: hide the thin white edge baked into the bottom of the Home photo,
   and centre the larger album cover on the album pages. */
@media (max-width:700px) {
  .page-home .home-artboard { overflow:hidden; }
  .page-home .home-artboard .home-image { height:101.4%; }
  .page-listening .listening-cover { width:min(100%, 42dvh); margin:0 auto; }
}

/* Phones: the Home photo always reaches the very bottom of the screen
   (including under Safari's toolbar), and any edge matches the dark carpet. */
@media (max-width:700px) {
  html:has(body.page-home) { background:#1b1a20; }
  body.page-home { background:#1b1a20; }
  .page-home .home-screen { height:100vh; height:100dvh; }
}

/* Phones, Contact: the photo reaches the very bottom (under Safari's toolbar),
   and any edge is the dark brown of the photo, not purple. */
@media (max-width:700px) {
  html:has(body.page-contact) { background:#140a05; }
  body.page-contact { background:#140a05; }
  .page-contact .full-photo-background { height:100vh !important; height:100dvh !important; }
}

/* About on phones: the full-screen tall photo (the glass-wall rail visible, softened only at the very bottom). */
@media (max-width:700px) {
  .page-about-approved .about-mobile-header .brand { width:185px; }
  .page-about-approved .about-mobile-header .header-inner { padding-top:16px; }
  html:has(body.page-about-approved) { background:#100705; }
  body.page-about-approved { background:#100705; height:100lvh; }
  .page-about-approved .approved-about-main {
    height:100vh; height:100lvh; bottom:auto;
    background:
      linear-gradient(180deg,rgba(25,6,17,.72) 0%,rgba(25,6,17,0) 24%),
      linear-gradient(180deg,rgba(16,7,5,0) 52%,rgba(16,7,5,.62) 66%,rgba(16,7,5,.5) 82%,rgba(16,7,5,.28) 93%,rgba(16,7,5,.78) 100%),
      #100705 url('assets/about-mobile-final.jpg') 72% top / max(100vw, calc(100vh * .6326)) auto no-repeat;
    background-size:auto,auto,max(100vw, calc(100dvh * .6326)) auto;
  }
  .page-about-approved .approved-about-copy { top:63dvh; font-size:clamp(15px,4vw,18px); line-height:1.55; }
  .page-about-approved .approved-about-copy h1 { margin-bottom:14px; }
}