/*
Theme Name: MJM Portfolio
Theme URI: https://www.michaeljamesmurray.com
Author: Built for Michael James Murray
Description: A film-forward portfolio theme. Projects are WordPress posts with a Vimeo ID; series hold multiple films. Dark "screening room" grid with hover motion previews and a lights-on photography gallery.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mjm
*/

/* ============================================================
   Design is ported verbatim from the approved preview.
   Colors + type live in :root below — safe to tweak.
   ============================================================ */
:root{
    --bg:#0d0d0d;--ink:#fafafa;--dim:#7d7d7d;--line:#1f1f1f;--paper:#f4f4f2;--paper-ink:#111;--gold:#d2a93c;
    --sans:'Futura PT','Futura','Jost','Century Gothic',-apple-system,'Helvetica Neue',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  /* ===== SIDEBAR ===== */
  aside{position:fixed;top:0;left:0;bottom:0;width:210px;padding:36px 32px;display:flex;flex-direction:column;z-index:100;background:var(--bg)}
  aside .name{font-weight:700;font-size:23px;letter-spacing:.1em;text-transform:uppercase}
  aside .role{font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:.06em}
  aside nav{margin-top:64px;display:flex;flex-direction:column;gap:3px}
  aside nav button{font-family:inherit;background:none;border:0;text-align:left;font-size:13px;font-weight:500;padding:4px 0;color:#a8a8a8;transition:.15s;cursor:pointer}
  aside nav button:hover,aside nav button.active{color:var(--ink)}
  aside nav button.active::before{content:'— ';color:var(--gold)}
  aside nav button .n{font-size:9.5px;color:#565656;margin-left:6px}
  aside nav .sp{height:22px}
  aside nav .fnb{position:relative}
  aside nav .fnb::after{content:'SPECIALTY';position:absolute;top:50%;transform:translateY(-50%);margin-left:10px;font-size:7.5px;letter-spacing:.18em;color:#6b5a25;border:1px solid #3a301a;padding:2px 6px;border-radius:2px}
  aside .foot{margin-top:auto;font-size:10.5px;color:var(--dim);line-height:1.9}
  main{margin-left:210px;border-left:1px solid var(--line);min-height:100vh}
  /* ===== HERO ===== */
  .hero{padding:92px 40px 62px;border-bottom:1px solid var(--line)}
  .hero .inner{border-left:4px solid var(--gold);padding-left:34px}
  .hero .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
  .hero .k b{color:var(--gold);font-weight:600}
  h1{font-weight:700;font-size:clamp(42px,5.9vw,92px);letter-spacing:-.005em;line-height:.98;text-transform:uppercase;margin-top:16px}
  .hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:22px}
  .hero p{max-width:480px;color:#c2c2c2;font-size:15.5px;line-height:1.7}
  .hero p b{color:var(--ink);font-weight:600}
  .hero .loc{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
  /* ===== SECTION HEAD / VIEWS ===== */
  .g-head{display:flex;justify-content:space-between;padding:24px 40px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
  .view{display:none}
  .view.on{display:block}
  /* ===== FILM GRID ===== */
  .grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .cell{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;border-right:1px solid var(--line);border-bottom:1px solid var(--line);opacity:0;transform:scale(.97);animation:cellin .5s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes cellin{to{opacity:1;transform:none}}
  .cell:nth-child(3n){border-right:0}
  .cell:nth-child(6n+1){background:#181818}.cell:nth-child(6n+2){background:#141414}.cell:nth-child(6n+3){background:#1b1b1b}
  .cell:nth-child(6n+4){background:#101010}.cell:nth-child(6n+5){background:#1d1d1d}.cell:nth-child(6n){background:#161616}
  .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:transform .6s ease,opacity .4s}
  .cell:hover img{transform:scale(1.04)}
  /* motion preview — a muted, chromeless Vimeo loop injected on hover */
  .cell .loop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.03);width:100%;height:100%;border:0;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}
  .cell .loop.on{opacity:1}
  .cell .scrim{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);z-index:2;transition:.3s;pointer-events:none}
  .cell .tag{position:absolute;left:16px;bottom:13px;right:16px;z-index:3;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#e6e6e6;transition:.3s}
  .cell:hover .tag,.cell:hover .scrim{opacity:0}
  .cell .badge{position:absolute;top:12px;right:14px;z-index:4;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#e2e2e2;background:rgba(13,13,13,.62);backdrop-filter:blur(3px);padding:4px 9px;border-radius:2px}
  .cell .t{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;background:linear-gradient(to top,rgba(8,8,8,.9) 0%,rgba(8,8,8,.35) 45%,transparent 75%);opacity:0;transition:.3s;padding:22px}
  .cell:hover .t{opacity:1}
  .cell .t b{font-weight:700;font-size:17px;letter-spacing:.005em;text-transform:uppercase;line-height:1.15}
  .cell .t i{font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:9px}
  /* ===== PHOTO ===== */
  .photo-wrap{background:var(--paper);color:var(--paper-ink);padding:44px 40px 90px}
  .photo-wrap .ph-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#8b8b88}
  .masonry{columns:3;column-gap:2px}
  .ph-item{break-inside:avoid;margin-bottom:2px;overflow:hidden;cursor:pointer;opacity:0;transform:scale(.98);animation:cellin .5s cubic-bezier(.2,.7,.2,1) forwards}
  .ph-box{width:100%;background:radial-gradient(ellipse at 35% 30%,rgba(255,255,255,.2),transparent 60%)}
  .ph-item:nth-child(1) .ph-box{aspect-ratio:4/5;background-color:#b0987c}
  .ph-item:nth-child(2) .ph-box{aspect-ratio:3/4;background-color:#7c8a94}
  .ph-item:nth-child(3) .ph-box{aspect-ratio:1/1.15;background-color:#8f7a6e}
  .ph-item:nth-child(4) .ph-box{aspect-ratio:4/3;background-color:#6e7a64}
  .ph-item:nth-child(5) .ph-box{aspect-ratio:3/4;background-color:#94765e}
  .ph-item:nth-child(6) .ph-box{aspect-ratio:4/5;background-color:#5e6a78}
  .ph-item:nth-child(7) .ph-box{aspect-ratio:1/1;background-color:#a08464}
  .ph-item:nth-child(8) .ph-box{aspect-ratio:4/3;background-color:#78645e}
  .ph-item:nth-child(9) .ph-box{aspect-ratio:3/4;background-color:#64785e}
  .ph-item:nth-child(10) .ph-box{aspect-ratio:4/5;background-color:#84706a}
  .ph-item:nth-child(11) .ph-box{aspect-ratio:4/3;background-color:#6a7884}
  .ph-item:nth-child(12) .ph-box{aspect-ratio:1/1;background-color:#96805c}
  .ph-note{margin-top:30px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9b968b}
  /* ===== ABOUT ===== */
  .about-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:110px 40px}
  .about-wrap .k{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
  .about-wrap p{max-width:640px;margin-top:28px;font-size:clamp(18px,2vw,24px);line-height:1.55;font-weight:500;color:#e2e2e2}
  .about-wrap p em{font-style:normal;color:var(--dim)}
  .stats{display:flex;gap:56px;margin-top:48px}
  .stats div b{display:block;font-weight:900;font-size:30px}
  .stats div span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
  .clients-line{max-width:640px;margin-top:48px;font-size:12.5px;line-height:2.1;color:#8d8d8d}
  /* social link — custom aperture mark, sidebar + contact */
  .ig{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9a9a9a;transition:.2s}
  .ig:hover{color:var(--gold)}
  .ig svg{width:15px;height:15px;flex:0 0 auto;display:block}
  .igs{display:flex;flex-direction:column;gap:9px}
  aside .igs{margin-top:16px}
  .about-wrap .igs{flex-direction:row;gap:30px;justify-content:center;margin-top:28px;flex-wrap:wrap}
  .about-wrap .ig{font-size:12px;letter-spacing:.2em}
  .about-wrap .ig svg{width:18px;height:18px}
  .about-wrap .mail{display:inline-block;font-weight:700;font-size:clamp(24px,3.6vw,48px);letter-spacing:.01em;text-transform:uppercase;margin-top:52px;border-bottom:4px solid var(--gold);transition:.2s}
  .about-wrap .mail:hover{opacity:.55}
  /* ===== PLAYER ===== */
  .overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(8,8,8,.94);backdrop-filter:blur(10px)}
  .overlay.on{display:flex;animation:fade .35s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .player{width:min(1080px,92vw);animation:playerin .5s cubic-bezier(.2,.7,.2,1)}
  @keyframes playerin{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:none}}
  .player .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .player .pmeta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;gap:16px;flex-wrap:wrap}
  .player .pmeta b{font-size:19px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
  .player .pmeta i{font-style:normal;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
  .episodes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
  .ep{font-family:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid #333;background:none;color:#b5b5b5;cursor:pointer;transition:.2s}
  .ep:hover{border-color:#777;color:var(--ink)}
  .ep.active{border-color:var(--gold);color:var(--gold)}
  .close{position:fixed;top:26px;right:32px;font-family:inherit;background:none;border:1px solid #3a3a3a;color:#ddd;border-radius:100px;padding:10px 22px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s}
  .close:hover{background:var(--ink);color:#0d0d0d;border-color:var(--ink)}
  @media(max-width:980px){
    aside{position:static;width:auto}
    main{margin-left:0;border-left:0}
    .grid{grid-template-columns:1fr}
    .cell:nth-child(n){border-right:0}
    .masonry{columns:1}
    aside nav{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:20px}
    aside nav .sp{display:none}
    aside nav .fnb::after{display:none}
    aside .foot{display:none}
  }