/*
Theme Name: JR Pugh
Theme URI: https://jeffvhs.com/
Author: JR Pugh
Author URI: https://jeffvhs.com/
Description: Minimal custom theme for JR Pugh, NYC-based actor. Serves the hand-built static site natively: serif/sans loader, Featured slideshow, Acting grid, Reel cascade, About, Contact. No page builder, no dependencies. All photo and video media stays hotlinked from the WordPress media library.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: All rights reserved
Text Domain: jrpugh
Tags: one-column, custom-colors, full-width-template
*/

/* ============================================================
   Everything below this line is the site stylesheet, unchanged.
   Edit with care: the loader, the Featured rail, and the Reel
   cascade all depend on these exact rules.
   ============================================================ */

/* ============================================================
   JR PUGH — shared stylesheet for all pages
   Scoped under body.jrp with WP-proof resets so theme /
   Elementor styles (blue links, double underlines) can't leak.
   ============================================================ */
:root{
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', Helvetica, Arial, sans-serif;
  --cream:#f2ede3;
  --ink:#111111;
  --dim:rgba(242,237,227,.72);
  --line-light:rgba(200,200,200,.55);
  --line-dark:rgba(20,20,20,.4);
}
body.jrp, body.jrp *{margin:0;padding:0;box-sizing:border-box;}
body.jrp{
  font-family:var(--serif);
  background:#0b0b0c;
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.jrp.light{background:#fff;color:var(--ink);}
/* cinematic film treatment on every page: vignette + film grain.
   The grain is masked toward the edges/corners so the content area stays
   clean, and drifts very slowly (projector flutter) at the edges only.
   Both sit below the loader (z 100) and never intercept clicks. */
body.jrp::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:92;
  background:radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0,0,0,.34));
}
body.jrp::after{
  content:'';position:fixed;inset:-80px;pointer-events:none;z-index:93;
  opacity:.08;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(0,0,0,.45) 60%, #000 86%);
  mask-image:radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(0,0,0,.45) 60%, #000 86%);
  animation:jrpGrain 1.15s steps(1) infinite;
}
@keyframes jrpGrain{
  0%{transform:translate(0,0);}
  25%{transform:translate(-46px,28px);}
  50%{transform:translate(30px,-52px);}
  75%{transform:translate(-24px,-30px);}
  100%{transform:translate(0,0);}
}
@media (prefers-reduced-motion: reduce){
  body.jrp::after{animation:none;}
}
body.jrp ::-webkit-scrollbar{width:0;height:0;}

/* WP-proof link reset: kills theme blue + double underlines.
   Any underline in this design is a single border-bottom. */
body.jrp a, body.jrp a:visited, body.jrp a:hover, body.jrp a:focus{
  color:inherit !important;
  text-decoration:none !important;
  box-shadow:none !important;
  background:transparent !important;
  outline:none !important;
  cursor:pointer;
}
body.jrp a.u{border-bottom:1px solid var(--line-light);padding-bottom:2px;}
body.jrp.light a.u{border-bottom-color:var(--line-dark);}
body.jrp a.u:hover{border-bottom-color:currentColor;}

/* ---------------- HEADER (the menu, baked into every page) ---------------- */
body.jrp header.site{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  z-index:50;width:max-content;max-width:92vw;
  padding-top:2.9rem;text-align:left;
}
/* centered "JR Pugh" wordmark: JR sans, Pugh serif (the site's duality),
   read as the full name and centered over the page-centered nav */
body.jrp .brandmark{
  display:block;text-align:center;white-space:nowrap;
  font-size:1.24rem;letter-spacing:.05em;
  margin-bottom:.2rem;
}
/* wordmark is serif throughout (JR slightly heavier than Pugh) */
body.jrp .brandmark .mj{font-family:var(--serif);font-weight:500;}
body.jrp .brandmark .mp{font-family:var(--serif);font-weight:400;}
/* Featured already shows "JR Pugh" big in the center of slide I, so the
   header wordmark is redundant there — hide it on Featured only */
body.jrp.featured .brandmark{display:none;}
body.jrp nav.site{margin-top:.6rem;display:flex;justify-content:center;gap:1.5rem;font-size:1.14rem;}
body.jrp nav.site a{position:relative;opacity:.92;}
body.jrp nav.site a:hover{opacity:1;}
body.jrp nav.site a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;
  border-bottom:1px solid currentColor;
}
body.jrp header.site .header-blur{
  position:absolute;inset:-2.9rem -30vw -1rem;z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0));
  pointer-events:none;
}
body.jrp.light header.site .header-blur{display:none;}

/* every non-featured page (body.subpage): the menu sits on a frosted,
   blurred strip so content scrolling beneath it stays legible */
body.jrp.subpage header.site .header-blur{
  display:block;
  inset:-2.9rem -60vw -1.4rem;
  background:rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,#000 78%,transparent);
}
body.jrp.light.subpage header.site .header-blur{
  background:rgba(255,255,255,.55);
}

/* ---------------- HEADER: scroll-compact / sticky blur ----------------
   Lockup + nav on load; once the page is scrolled past a small threshold
   (header-scroll.js toggles .compact), it collapses to a full-width
   frosted-glass strip: small JR mark left, nav centered — the name stays
   visible throughout. */
body.jrp header.site{transition:padding .4s ease, left .4s ease, width .4s ease;}
body.jrp header.site.compact{
  left:0;transform:none;width:100%;
  padding:.8rem 6vw;
  display:flex;align-items:center;gap:1.6rem;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
body.jrp.light header.site.compact{background:rgba(255,255,255,.72);}
body.jrp header.site.compact .header-blur{display:none;}
body.jrp header.site.compact .brandmark{font-size:.98rem;margin-bottom:0;text-align:left;}
body.jrp header.site.compact nav.site{margin-top:0;flex:1;justify-content:center;}

/* ---------------- FOOTER ---------------- */
body.jrp footer.site{
  position:fixed;left:0;right:0;bottom:1.4rem;z-index:40;
  width:100%;text-align:center;font-size:.85rem;color:rgba(242,237,227,.55);
  pointer-events:none;
}
body.jrp.light footer.site{color:rgba(20,20,20,.45);}
body.jrp footer.site.flow{
  /* relative (not static) so z-index beats fixed full-bleed backdrops (reel) */
  position:relative;left:auto;right:auto;bottom:auto;
  width:100%;display:block;text-align:center;
  padding:6vh 0 3vh;
}

/* ---------------- LOADER (index only) ----------------
   Two-phase, JR always resolves before PUGH:
   1. small offset JR pair fades in dead-center (J up-left, R low-right)
   2. JR drops out as the four PUGH letters breathe in scattered wide
      around it, settling on the mixed serif/sans lockup:
      P sans half / U serif on / G sans mid / H serif ghost */
#loader{
  position:fixed;inset:0;z-index:100;
  background:#0b0b0c;color:#f2ede3;
  transition:opacity 1.1s ease;
}
#loader.done{opacity:0;pointer-events:none;}
/* All six letters live on one stage and share the same serif<->sans swap +
   opacity system (JS toggles the classes). JR resolves first, then P U G H
   breathe in around it; every letter keeps flickering between serif and sans
   exactly the same way. Symmetric vmin offsets = even, square composition on
   any aspect ratio, matching the reference lockup. */
#loader .loader-stage{position:absolute;inset:0;}
#loader .ll{
  position:absolute;left:50%;top:50%;
  line-height:1;opacity:0;
  transition:opacity .5s ease;
}
/* sizes: PUGH larger, JR a clear step smaller (never dwarfed) */
#loader .lp,#loader .lu,#loader .lg,#loader .lh{font-size:clamp(2.2rem,7.4vmin,4.1rem);}
#loader .lj,#loader .lr{font-size:clamp(1.9rem,5.6vmin,3.1rem);}
/* even, symmetric positions; J up-left of center, R down-right with a real gap */
#loader .lp{transform:translate(calc(-50% - 19vmin),calc(-50% - 15vmin));} /* upper-left */
#loader .lu{transform:translate(calc(-50% + 19vmin),calc(-50% - 15vmin));} /* upper-right */
#loader .lg{transform:translate(calc(-50% - 19vmin),calc(-50% + 15vmin));} /* lower-left */
#loader .lh{transform:translate(calc(-50% + 19vmin),calc(-50% + 15vmin));} /* lower-right */
#loader .lj{transform:translate(calc(-50% - 5vmin),calc(-50% - 4vmin));}   /* center, up-left */
#loader .lr{transform:translate(calc(-50% + 6vmin),calc(-50% + 5vmin));}   /* center, down-right */
#loader .ll.serif{font-family:var(--serif);font-weight:400;}
#loader .ll.sans{font-family:var(--sans);font-weight:700;letter-spacing:.01em;}
#loader .ll.full{opacity:1;}
#loader .ll.on{opacity:.92;}
#loader .ll.mid{opacity:.66;}
#loader .ll.half{opacity:.48;}
#loader .ll.ghost{opacity:.16;}

/* ---------------- FEATURED (index) ---------------- */
body.jrp.featured{overflow:hidden;}
#stage{position:fixed;inset:0;background:#000;}
.slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.4s ease;
  pointer-events:none;
}
.slide.current{opacity:1;pointer-events:auto;}
.slide .media{position:absolute;inset:0;}
.slide .media img,.slide .media video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.92);
}
/* headshot slides: full image everywhere — never cut off the head (top)
   or the sides. Letterboxes on #0d0d0d where the aspect doesn't match. */
.slide.contain .media{background:#0d0d0d;}
.slide.contain .media img{object-fit:contain;object-position:center;}
.slide .scrim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 62% 42%, rgba(0,0,0,.42), rgba(0,0,0,.06) 55%, rgba(0,0,0,.25));
}
.slide-title{
  position:absolute;left:50%;top:47%;
  transform:translate(-50%,-50%);
  font-style:italic;font-size:clamp(2.4rem,4.6vw,4.4rem);
  font-weight:400;text-align:center;white-space:nowrap;
  text-shadow:0 1px 24px rgba(0,0,0,.35);
}
.slide-kicker{
  position:absolute;left:50%;top:38%;
  transform:translateX(-50%);
  font-size:clamp(1rem,1.35vw,1.3rem);
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}
.slide-credit{
  position:absolute;left:50%;top:56%;
  transform:translateX(-50%);
  font-size:clamp(1rem,1.35vw,1.3rem);
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}

/* numeral progress rail: fixed numeral, two-segment fill */
.numeral-rail{
  position:absolute;left:2.2vw;top:0;bottom:0;z-index:5;
  width:2.4rem;pointer-events:none;
}
/* kept quiet on purpose: the rail is wayfinding, not a focal point */
.rail-seg{
  position:absolute;left:50%;width:1px;
  background:rgba(242,237,227,.13);
}
.rail-seg .rail-fill{
  position:absolute;left:0;top:0;width:1px;height:0%;
  background:rgba(242,237,227,.5);
}
.rail-seg.top{top:4vh;height:30vh;}
.rail-seg.bot{top:46vh;bottom:4vh;}
.rail-num{
  position:absolute;left:50%;top:40vh;
  transform:translate(-50%,-50%);
  font-size:1.05rem;color:var(--cream);opacity:.45;
}

/* ---------------- ACTING PAGE ----------------
   page-layout boxes are prefixed with body.jrp so their margin/padding
   outrank the body.jrp * reset above (which otherwise nulls them) */
body.jrp .acting-wrap{
  max-width:1520px;margin:0 auto;
  padding:clamp(12rem,22vh,16rem) 3vw 8vh;
}
.acting-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:1.2vw;row-gap:8vh;
}
.acting-cell{text-align:center;}
.acting-cell:nth-child(even){transform:translateY(-5vh);}
.acting-cell .ph{
  width:100%;background:#141416;margin-bottom:1.6rem;
}
/* desktop: natural aspect, nothing cut */
.acting-cell .ph img{width:100%;height:auto;display:block;}
@media (max-width:760px){
  body.jrp .acting-wrap{padding-left:1.4rem;padding-right:1.4rem;}
  .acting-grid{grid-template-columns:repeat(2,1fr);column-gap:3vw;row-gap:3vw;}
  .acting-cell:nth-child(even){transform:none;}
  /* mobile: the 3:4 crop that looked good, anchored to the head */
  .acting-cell .ph{aspect-ratio:3/4;overflow:hidden;}
  .acting-cell .ph img{height:100%;object-fit:cover;object-position:center top;}
  body.jrp .acting-break{padding:0 .4rem;}
}
/* blurb sits ABOVE the grid now */
body.jrp .acting-break{
  text-align:center;max-width:640px;margin:0 auto 9vh;
  font-size:1.28rem;line-height:1.75;
}
body.jrp .acting-actions{
  display:flex;justify-content:center;gap:2.6rem;
  margin-top:5vh;font-size:1.1rem;flex-wrap:wrap;
}

/* ---------------- REEL PAGE (cascade) ---------------- */
body.jrp.reel-page{background:#0b0b0c;transition:background-color 1.1s ease;}
.cascade-bg{
  position:fixed;inset:0;pointer-events:none;
  opacity:0;transition:opacity .7s ease;z-index:0;
}
.cascade-bg.show{opacity:1;}
/* the echo stays a dark shadow of the footage — bright frames must never
   flip the page light */
.cascade-bg img,.cascade-bg video{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) saturate(.8);
}
.cascade-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(8,8,10,.5);
}
body.jrp .cascade{
  position:relative;z-index:1;
  padding:clamp(12rem,22vh,16rem) 6vw 12vh;
}
body.jrp .cascade-item{
  display:flex;align-items:flex-start;gap:1.6rem;
  margin-bottom:7vh;
}
.cascade-item .thumb{
  width:min(56vw,720px);aspect-ratio:16/9;
  background:#141416;overflow:hidden;flex-shrink:0;
  cursor:pointer;
}
.cascade-item .thumb img,.cascade-item .thumb video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s ease;
}
.cascade-item .thumb:hover img,.cascade-item .thumb:hover video{transform:scale(1.04);}
.cascade-item .meta{
  display:flex;gap:2.2rem;padding-top:.4rem;
  font-size:1.05rem;white-space:nowrap;
  text-shadow:0 1px 16px rgba(0,0,0,.65);
}
@media (max-width:760px){
  body.jrp .cascade{padding-left:1.4rem;padding-right:1.4rem;}
  /* stack tile + label; kill the desktop stagger (inline style) */
  body.jrp .cascade-item{flex-direction:column;gap:1rem;padding-left:0 !important;}
  .cascade-item .thumb{width:100%;}
}

/* ---------------- ABOUT PAGE ----------------
   One tight paragraph, then Modeling right below — the copy no longer
   fills a full viewport, so the photos register on the first scroll. */
body.jrp .about-copy{
  min-height:62vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:clamp(11rem,18vh,14rem) max(8vw,1.6rem) 8vh;
}
.about-copy p{
  max-width:860px;text-align:center;
  font-size:1.18rem;line-height:1.66;
  margin-bottom:1.9rem;
}
/* MODELING — black background, "Modeling" title, then a large staggered
   gallery. Photos are DISPLACED (right column rides lower) for an editorial
   feel, but never overlap each other or the title. */
body.jrp .modeling{
  background:#0b0b0c;
  padding:6vh max(6vw,1.3rem) 12vh;
}
body.jrp .modeling-title{
  text-align:center;font-style:italic;font-weight:400;
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  margin:0 0 7vh;
}
body.jrp .modeling-gallery{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(1.4rem,3vw,3.4rem);row-gap:clamp(1.4rem,3vw,3.4rem);
  max-width:1180px;margin:0 auto;
  align-items:start;
}
.modeling-gallery .mtile{
  overflow:hidden;background:#141416;aspect-ratio:4/5;
}
/* editorial displacement: the right column rides lower than the left */
.modeling-gallery .mtile:nth-child(even){transform:translateY(8vh);}
.modeling-gallery .mtile img,.modeling-gallery .mtile video{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:760px){
  body.jrp .modeling-gallery{grid-template-columns:1fr;row-gap:1.1rem;}
  .modeling-gallery .mtile{aspect-ratio:4/5;}
  .modeling-gallery .mtile:nth-child(even){transform:none;}
}

/* ---------------- CONTACT PAGE ---------------- */
body.jrp .contact-wrap{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;
  text-align:center;padding:6rem 1.4rem 4rem;
}
.contact-wrap .big{font-style:italic;font-size:clamp(2.2rem,3.8vw,3.6rem);margin-bottom:1.6rem;}
.contact-wrap .row{font-size:1.18rem;color:var(--dim);}
.contact-wrap .row a{border-bottom:1px solid var(--line-light);padding-bottom:2px;}
.contact-wrap .resume{
  margin-top:2.4rem;font-size:1.05rem;
  border:1px solid rgba(242,237,227,.5);
  padding:.75rem 2.1rem;letter-spacing:.04em;
}
.contact-wrap .resume:hover{background:var(--cream) !important;color:#111 !important;}

@media (max-width:760px){
  /* smaller menu on mobile so it doesn't crowd the numeral rail / content below it */
  body.jrp header.site{padding-top:1.6rem;}
  body.jrp .brandmark{font-size:1.06rem;}
  body.jrp nav.site{font-size:.84rem;gap:.9rem;margin-top:.3rem;}
  body.jrp.subpage header.site .header-blur{inset:-1.6rem -60vw -1rem;}
  .slide-title{font-size:clamp(1.9rem,7.5vw,2.8rem);}
  /* loader is vmin-based so it self-scales; nudge corners in slightly on phones */
  #loader .lp{transform:translate(calc(-50% - 17vmin),calc(-50% - 14vmin));}
  #loader .lu{transform:translate(calc(-50% + 17vmin),calc(-50% - 14vmin));}
  #loader .lg{transform:translate(calc(-50% - 17vmin),calc(-50% + 14vmin));}
  #loader .lh{transform:translate(calc(-50% + 17vmin),calc(-50% + 14vmin));}

  /* push the numeral rail down so it clears the (now smaller) header with room to spare */
  .rail-seg.top{top:7rem;height:22vh;}
  .rail-num{top:calc(7rem + 22vh + 2vh);}
  .rail-seg.bot{top:calc(7rem + 22vh + 4vh);bottom:4vh;}
}

/* very small phones (iPhone SE / Mini class) */
@media (max-width:390px){
  body.jrp nav.site{font-size:.78rem;gap:.7rem;}
  .slide-title{font-size:clamp(1.6rem,8.5vw,2.2rem);}
  .about-copy p{font-size:1.08rem;}
  body.jrp .acting-break{font-size:1.14rem;}
}

/* tablets / iPad portrait & landscape */
@media (min-width:761px) and (max-width:1180px){
  body.jrp .acting-wrap{padding-left:4vw;padding-right:4vw;}
  .acting-grid{grid-template-columns:repeat(2,1fr);column-gap:2.6vw;}
  .cascade-item .thumb{width:62vw;}
  .about-copy p{font-size:1.24rem;}
}

/* ---------------- WORDPRESS ADMIN BAR GUARD ----------------
   WordPress pushes the page down 32px for the logged-in admin bar, which
   would otherwise sit on top of our fixed header. Only ever visible to a
   logged-in editor; visitors never see this. */
body.jrp.admin-bar header.site{top:32px;}
@media screen and (max-width:782px){
  body.jrp.admin-bar header.site{top:46px;}
}