/* ============================================================
   JMP MEDIA — themes.css
   Three visual directions + review switcher
   Toggle by setting body class: dir-noir | dir-heritage | dir-gallery
   ============================================================ */

/* themable sections read their skin from these vars */
.skin{ background:var(--bg); color:var(--fg); }

/* default dark skin tokens (shared) */
.skin{
  --muted:rgba(245,239,227,0.62);
  --hair:rgba(184,147,90,0.22);
  --seam:var(--brass);
  --accent:var(--bordeaux);
  --accent-fg:var(--bone);
}

/* reusable light-skin mixin */
.skin.is-light{
  --bg:var(--bone); --fg:var(--ink);
  --muted:rgba(26,20,17,0.60);
  --hair:rgba(26,20,17,0.13);
  --seam:var(--brass-2);
  --accent:var(--bordeaux); --accent-fg:var(--bone);
}
.skin.is-light .trust__logos img{ filter:grayscale(1) brightness(0) invert(0); opacity:0.5; }
.skin.is-light .trust__logos img:hover{ opacity:0.85; }

/* ════════════════════════════════════════════════════════════
   DIRECTION 1 · CINEMATIC NOIR  (default)
   Pure ink, edge to edge, oversized serif, sparse accents
   ════════════════════════════════════════════════════════════ */
.dir-noir{ --bg:var(--ink); --fg:var(--bone); }
.dir-noir .skin{ --bg:var(--ink); --fg:var(--bone); }
.dir-noir #trust{ --bg:#0c0b0a; }
.dir-noir #work{ --bg:var(--ink); }
.dir-noir #process{ --bg:#0c0b0a; }
.dir-noir #contact{ --bg:var(--oxblood); --fg:var(--bone); }
.dir-noir #contact .cta__bg{ background:
   radial-gradient(120% 90% at 50% 0%, rgba(92,21,24,0.55) 0%, rgba(0,0,0,0) 55%),
   linear-gradient(180deg,#1a0a09 0%, var(--oxblood) 100%); }
/* Noir loves scale + air */
.dir-noir .section-head h2{ font-size:clamp(36px,6.4vw,80px); }
.dir-noir #work .work__cell::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(8,7,6,0.9) 100%); }

/* ════════════════════════════════════════════════════════════
   DIRECTION 1 · SIGNATURE  (committed default)
   Noir ink palette + Heritage editorial chrome, photos in full colour
   ════════════════════════════════════════════════════════════ */
.dir-signature{ --bg:var(--ink); --fg:var(--bone); }
.dir-signature .skin{ --bg:var(--ink); --fg:var(--bone); --hair:rgba(184,147,90,0.30); }
.dir-signature #trust{ --bg:#0c0b0a; }
.dir-signature #work{ --bg:var(--ink); }
.dir-signature #process{ --bg:#0c0b0a; }
.dir-signature #contact{ --bg:var(--oxblood); --fg:var(--bone); }
.dir-signature #contact .cta__bg{ background:
   radial-gradient(120% 90% at 50% 0%, rgba(92,21,24,0.55) 0%, rgba(0,0,0,0) 55%),
   linear-gradient(180deg,#1a0a09 0%, var(--oxblood) 100%); }
/* keep Noir's editorial scale + brass eyebrows */
.dir-signature .section-head h2{ font-weight:400; }
.dir-signature .eyebrow{ color:var(--brass); }
/* full-colour photography (the modern part) */
.dir-signature #work .work__cell img{ filter:saturate(0.86); }
.dir-signature #work .work__cell:hover img{ filter:saturate(1.02); }
.dir-signature #work .work__cell::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 44%,rgba(8,7,6,0.92) 100%); }

/* ════════════════════════════════════════════════════════════
   DIRECTION 2 · EDITORIAL HERITAGE
   Warm oxblood, film-leader chrome, grain, bordered gallery
   ════════════════════════════════════════════════════════════ */
.dir-heritage{ --bg:var(--oxblood); --fg:var(--bone); }
.dir-heritage .skin{ --bg:var(--oxblood); --fg:var(--bone); --hair:rgba(184,147,90,0.28); }
.dir-heritage #trust{ --bg:#260707; }
.dir-heritage #work{ --bg:var(--oxblood); }
.dir-heritage #process{ --bg:#260707; }
.dir-heritage #contact{ --bg:var(--bordeaux); --fg:var(--bone); }
.dir-heritage #contact .cta__bg{ background:
   radial-gradient(100% 80% at 50% 0%, rgba(184,147,90,0.22) 0%, rgba(0,0,0,0) 55%),
   linear-gradient(180deg,#4a1012 0%, var(--bordeaux) 60%, #4a1012 100%); }

/* serif-forward section heads */
.dir-heritage .section-head h2{ font-weight:400; }
.dir-heritage .eyebrow{ color:var(--brass); }

/* persistent paper grain across the whole page */
:is(.dir-heritage,.dir-signature)::before{
  content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0.07; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,235,205,0.7) 1px,transparent 1px); background-size:3px 3px;
}
/* film-leader frame + corner crosshairs */
:is(.dir-heritage,.dir-signature)::after{
  content:''; position:fixed; z-index:88; pointer-events:none; inset:14px;
  border:1px solid rgba(184,147,90,0.32);
}
.heritage-chrome{ display:none; }
:is(.dir-heritage,.dir-signature) .heritage-chrome{ display:block; }
:is(.dir-heritage,.dir-signature) .heritage-chrome .cx{
  position:fixed; z-index:89; width:18px; height:18px; pointer-events:none;
}
:is(.dir-heritage,.dir-signature) .heritage-chrome .cx::before,:is(.dir-heritage,.dir-signature) .heritage-chrome .cx::after{
  content:''; position:absolute; background:var(--brass); opacity:0.95;
}
:is(.dir-heritage,.dir-signature) .heritage-chrome .cx::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-0.5px); }
:is(.dir-heritage,.dir-signature) .heritage-chrome .cx::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-0.5px); }
:is(.dir-heritage,.dir-signature) .heritage-chrome .tl{ left:8px; top:8px; }
:is(.dir-heritage,.dir-signature) .heritage-chrome .tr{ right:8px; top:8px; }
:is(.dir-heritage,.dir-signature) .heritage-chrome .bl{ left:8px; bottom:8px; }
:is(.dir-heritage,.dir-signature) .heritage-chrome .br{ right:8px; bottom:8px; }

/* bordered gallery treatment for work cells */
:is(.dir-heritage,.dir-signature) #work .work__cell{ border:1px solid rgba(184,147,90,0.32); }
.dir-heritage #work .work__cell img{ filter:saturate(0.7) sepia(0.12); }
.dir-heritage #work .work__cell:hover img{ filter:saturate(0.95) sepia(0.04); }

/* ════════════════════════════════════════════════════════════
   DIRECTION 3 · GALLERY CONTRAST
   Alternating bone / ink fields, airy, CTAs pop on bordeaux
   ════════════════════════════════════════════════════════════ */
.dir-gallery{ --bg:var(--bone); --fg:var(--ink); }
.dir-gallery .skin{ --bg:var(--bone); --fg:var(--ink); }
.dir-gallery #fork{ --bg:var(--ink); }  /* fork stays cinematic dark */
.dir-gallery #trust{ --bg:var(--bone-2); --fg:var(--ink);
  --muted:rgba(26,20,17,0.6); --hair:rgba(26,20,17,0.13); --seam:var(--brass-2); }
.dir-gallery #trust .trust__logos img{ filter:grayscale(1) brightness(0) invert(0); opacity:0.5; }
.dir-gallery #work{ --bg:var(--bone); --fg:var(--ink);
  --muted:rgba(26,20,17,0.6); --hair:rgba(26,20,17,0.13); --seam:var(--brass-2); }
.dir-gallery #process{ --bg:var(--ink); --fg:var(--bone);
  --muted:rgba(245,239,227,0.62); --hair:rgba(184,147,90,0.22); --seam:var(--brass); }
.dir-gallery #contact{ --bg:var(--bordeaux); --fg:var(--bone); }
.dir-gallery #contact .cta__bg{ background:
   radial-gradient(110% 85% at 50% 0%, rgba(184,147,90,0.26) 0%, rgba(0,0,0,0) 55%),
   linear-gradient(180deg,#4d1113 0%, var(--bordeaux) 55%, #3a0d0f 100%); }
.dir-gallery #contact h2{ color:var(--bone); }

/* gallery work keeps photos in full color */
.dir-gallery #work .work__cell img{ filter:saturate(0.92); }
.dir-gallery #work .work__cell:hover img{ filter:saturate(1.05); }
.dir-gallery #work .work__cell::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(8,7,6,0.78) 100%); }
/* on light work field, the section head colours flip automatically via vars */

/* ============================================================
   REVIEW SWITCHER  (for picking a direction — not part of site)
   ============================================================ */
.switcher{
  position:fixed; z-index:120; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:8px 8px 8px 18px;
  background:rgba(15,14,13,0.86); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(184,147,90,0.4); box-shadow:0 18px 50px rgba(0,0,0,0.5);
  font-family:'Inter',sans-serif;
}
.switcher__lbl{ display:flex; flex-direction:column; line-height:1; margin-right:8px; }
.switcher__lbl b{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.switcher__lbl span{ font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(245,239,227,0.5); margin-top:3px; }
.switcher__opt{
  display:flex; align-items:center; gap:9px; padding:9px 14px; color:rgba(245,239,227,0.66);
  border:1px solid transparent; transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.switcher__opt .k{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1; color:var(--brass); }
.switcher__opt .nm{ font-size:11px; letter-spacing:0.06em; white-space:nowrap; }
.switcher__opt:hover{ color:var(--bone); }
.switcher__opt.is-active{ background:rgba(184,147,90,0.16); border-color:rgba(184,147,90,0.45); color:var(--bone); }
.switcher__opt.is-active .k{ color:var(--champagne); }
@media (max-width:680px){
  .switcher{ left:12px; right:12px; transform:none; justify-content:space-between; padding:8px 10px; gap:4px; }
  .switcher__lbl{ display:none; }
  .switcher__opt .nm{ display:none; }
  .switcher__opt{ flex:1; justify-content:center; padding:11px 8px; }
}