/* ════════════════════════════════════════════════════════════════════════
   RHP.Law — Hero gallery (thoughtful rebuild)
   ------------------------------------------------------------------------
   Composition, not decoration. Two intentional elements share the right
   column with deliberate negative space:
     1. .gallery-mark  — the firm letterhead: crest + wordmark, the primary id
     2. .portrait      — a museum piece: stone-and-bronze bas-relief, lit from
                          above by a picture light, hung with a cast shadow.
   Behaviour contract (driven by dorian.js, unchanged):
     [data-dorian] element carries .is-engaged and CSS vars
     --turn / --tiltx / --tilty / --patina.
   Material is built from layered gradients + an SVG emboss (#rhp-emboss),
   so the relief is real geometry, not a flat filter. Honors reduced motion.
   ════════════════════════════════════════════════════════════════════════ */

.hero-image{ perspective:1200px; }

/* ── The Caped Defender — a RIGGED skeleton flown by /assets/hero-fly.js ───
   The figure is built from nested <g class="j-*"> joint groups. Each joint
   declares transform-box:fill-box and a transform-origin AT the joint, so the
   JS engine can rotate limbs about real shoulders/elbows/hips/knees and sway
   the torso + cape. CSS here only positions, paints, and sets the pivots —
   ALL motion is JS (weighted/eased rAF), so no @keyframes drive the rig. */
.hero-flyer{
  position:absolute; z-index:2; top:12%; left:43%;
  width:112px; height:84px; opacity:.92; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  /* the flight-path translate/rotate/scale is written to this var by the JS */
  transform:var(--fly,none);
  will-change:transform;
}
.hero-flyer svg{ display:block; overflow:visible; }
/* hover affordance: he pauses (JS) + glows gold so you know to click him */
.hero-flyer.is-ready{
  filter:drop-shadow(0 0 11px rgba(201,168,76,.95)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

/* ── rig pivots: every joint rotates about its own origin ───────────────────
   For SVG <g>, transform-box:view-box resolves transform-origin in absolute
   viewBox coordinates — so the pivots below are the literal joint locations in
   the 160x120 viewBox. (fill-box would re-base to each group's own bbox, which
   makes a clean shoulder/elbow rig far harder to reason about.) */
.hero-flyer g[class^="j-"]{
  transform-box:view-box;
  will-change:transform;
}
.hero-flyer .j-root      { transform-origin:80px 60px; }   /* figure centre */
.hero-flyer .j-torso     { transform-origin:80px 60px; }   /* chest */
.hero-flyer .j-head      { transform-origin:84px 54px; }   /* neck */
.hero-flyer .j-cape      { transform-origin:80px 46px; }   /* shoulders/back */
.hero-flyer .j-armL-upper{ transform-origin:86px 56px; }   /* L shoulder (forward thrust) */
.hero-flyer .j-armL-fore { transform-origin:112px 59px; }  /* L elbow */
.hero-flyer .j-armR-upper{ transform-origin:80px 60px; }   /* R shoulder (forward thrust) */
.hero-flyer .j-armR-fore { transform-origin:103px 66px; }  /* R elbow */
.hero-flyer .j-legL-thigh{ transform-origin:76px 76px; }   /* L hip */
.hero-flyer .j-legL-shin { transform-origin:60px 90px; }   /* L knee */
.hero-flyer .j-legR-thigh{ transform-origin:74px 74px; }   /* R hip */
.hero-flyer .j-legR-shin { transform-origin:56px 86px; }   /* R knee */

/* costume */
.hero-flyer .head{ fill:#f0c89c; }                              /* skin (legacy, now covered by face image) */
.hero-flyer .head-ring{ fill:none; stroke:var(--gold,#c9a84c); stroke-width:2.6; }  /* gold rim around Rob's face */
.hero-flyer .body{ fill:var(--navy-800,#0b2340); }              /* navy suit */
.hero-flyer .limb{ stroke:var(--navy-800,#0b2340); stroke-width:6.5; stroke-linecap:round; fill:none; }
/* Fleshed (tapered) limbs — muscle volume; thin matching stroke smooths the quad joints.
   Replaces the old stick <line> limbs. Same joint endpoints, so the rig drives them as-is. */
.hero-flyer .limb-flesh{ fill:var(--navy-800,#0b2340); stroke:var(--navy-800,#0b2340);
                         stroke-width:1.4; stroke-linejoin:round; }
.hero-flyer .fist,
.hero-flyer .boot{ fill:var(--gold,#c9a84c); }                  /* gold gloves + boots */
.hero-flyer .emblem{ fill:var(--gold,#c9a84c); stroke:#fff; stroke-width:1; }
/* face */
.hero-flyer .eyeW{ fill:#ffffff; }
.hero-flyer .pupil{ fill:var(--navy-900,#071828); }
.hero-flyer .smile{ stroke:#6b3b22; stroke-width:2; stroke-linecap:round; fill:none; }
/* cape */
.hero-flyer .cape{ fill:var(--red-700,#b11226); }

/* mobile: pin him STATIC in the top-right corner (JS zeroes the flight path),
   floating just below the nav — an always-there, easy tap-target for the disco. */
@media (max-width:768px){
  .hero-flyer{
    position:fixed; top:138px; right:6px; left:auto; bottom:auto;
    width:70px; height:54px; z-index:100; opacity:.97;
  }
  /* The open dropdown must beat the hero gallery (which forms a perspective
     stacking context) AND the flyer — lift the whole nav above everything. */
  .site-nav, .nav-links{ z-index:9990; }
  /* belt + suspenders: flyer steps aside while the menu is open */
  body:has(.nav-links.open) .hero-flyer{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  /* a calm static hero — JS also bails, but pin opacity here as a backstop */
  .hero-flyer{ transform:none; opacity:.5; }
}

.gallery{
  --frame-w: clamp(190px, 22vw, 248px);
  display:grid; justify-items:center; gap:clamp(1.4rem, 3vw, 2.4rem);
}

/* ── 1. Firm mark — THE FOCUS ─────────────────────────────────────── */
.gallery-mark{ display:grid; justify-items:center; gap:.7rem; text-align:center; }
.gallery-mark .firm-crest{
  width:clamp(150px,19vw,232px); max-width:232px; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
.firm-wordmark{
  font-family:'Rajdhani',sans-serif; font-weight:700; line-height:1;
  font-size:clamp(1.9rem,3vw,2.7rem); letter-spacing:.14em; color:var(--white);
}
.firm-wordmark span{ color:var(--gold); }
.firm-rule{
  width:80px; height:2px; margin-top:.2rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ── 2. Founder — recognizable, but clearly secondary ─────────────── */
.founder{
  margin:0; display:flex; align-items:center; gap:.85rem;
  padding:.5rem .8rem .5rem .5rem; border-radius:999px;
  background:rgba(7,24,40,.55); border:1px solid rgba(201,168,76,.22);
}
.founder .founder-photo{
  width:64px; height:64px; max-width:64px; border-radius:50%;
  object-fit:cover; object-position:50% 16%;
  border:2px solid rgba(201,168,76,.5); filter:grayscale(.25) contrast(1.02);
  flex:none;
}
.founder-cap{ display:grid; gap:1px; text-align:left; }
.founder-name{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.95rem;
  letter-spacing:.04em; color:var(--white);
}
.founder-title{
  font-family:'Rajdhani',sans-serif; font-weight:500; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#9db8d4);
}

/* ── 2. The portrait as a hung gallery piece ─────────────────────── */
.portrait{
  margin:0; position:relative; width:var(--frame-w);
  transform-style:preserve-3d;
  --turn:0deg; --tiltx:0deg; --tilty:0deg; --patina:0;
  transform:rotateY(var(--turn)) rotateX(var(--tiltx)) rotateY(var(--tilty));
  transition:transform 1.1s cubic-bezier(.16,.84,.34,1);
  cursor:pointer; outline:none;
  will-change:transform;
}

/* picture light: a slim brass lamp casting a glow onto the frame top */
.portrait-light{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:62%; height:14px; border-radius:7px;
  background:linear-gradient(180deg,#d9b75e,#7c5f1e);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.portrait-light::after{
  content:""; position:absolute; left:50%; top:12px; transform:translateX(-50%);
  width:150%; height:130px; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,228,160,.30), transparent 70%);
  opacity:calc(1 - var(--patina)*.8); transition:opacity 1.2s linear;
}

/* gilded frame with a real mounted-on-wall cast shadow */
.portrait-frame{
  position:relative; padding:12px; border-radius:5px;
  background:
    linear-gradient(150deg,#2b2113,#0b0905) padding-box,
    linear-gradient(150deg,#e8c97a,#7c5f1e 42%,#241a08) border-box;
  border:7px solid transparent;
  box-shadow:
    0 26px 46px -10px rgba(0,0,0,.72),
    0 4px 0 rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.portrait-frame::after{ /* inner bevel line */
  content:""; position:absolute; inset:7px; border:1px solid rgba(201,168,76,.45);
  border-radius:3px; pointer-events:none;
}
/* the back of the bust, seen when it turns fully away */
.portrait-frame::before{
  content:""; position:absolute; inset:12px;
  background:linear-gradient(150deg,#181208,#060402);
  border-radius:2px; transform:translateZ(-1px) rotateY(180deg);
  backface-visibility:hidden;
}

/* the carved face: stone mat + bronze relief */
.portrait-mat{
  position:relative; border-radius:2px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 18%, #20283a, #0a0d15 75%);
}
.bust-canvas{
  display:block; width:100%; aspect-ratio:1067/1600;
  background:transparent; cursor:grab; touch-action:none;
}
.bust-canvas:active{ cursor:grabbing; }
.portrait-relief{
  width:100%; aspect-ratio:1067/1600;
  background-size:cover; background-position:50% 16%;
  /* true light-reactive bas-relief; aging chained after via sepia */
  filter:url(#rhp-relief) contrast(1.04) sepia(calc(var(--patina)*.55));
  transition:filter 1.3s linear;
}
/* warm bronze wash + top spotlight, both fade as it ages */
.portrait-mat::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(180deg, rgba(232,201,122,.34), rgba(120,80,30,.12) 55%, transparent);
  opacity:calc(1 - var(--patina)*.7); transition:opacity 1.2s linear;
}
/* patina veil: vignette + hairline cracks fade IN with age */
.portrait-mat::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  opacity:var(--patina); transition:opacity 1.3s linear;
  background:
    radial-gradient(125% 95% at 50% 0%, transparent 52%, rgba(28,18,6,.62) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='180'%3E%3Cg stroke='%23000' stroke-width='.55' fill='none' opacity='.45'%3E%3Cpath d='M22 0 L36 44 L27 76 L47 120 L31 180'/%3E%3Cpath d='M96 0 L84 34 L104 70 L86 104 L100 180'/%3E%3Cpath d='M0 66 L44 80 L76 64'/%3E%3Cpath d='M130 110 L92 122 L64 110'/%3E%3Cpath d='M10 140 L52 150'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover, 100% 100%;
}

/* engraved brass plaque — always present, dignified (not a hover gimmick) */
.portrait-plaque{
  margin-top:14px; width:100%;
  display:grid; gap:2px; justify-items:center; text-align:center;
  padding:8px 10px; border-radius:3px;
  background:linear-gradient(180deg,#d4b257,#7c5f1e);
  box-shadow:0 5px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  color:#1a1206;
}
.plaque-name{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.18em;
}
.plaque-motto{
  font-family:'Source Serif 4',serif; font-style:italic; font-size:.64rem;
  letter-spacing:.01em; opacity:.86;
}

/* engaged = faced, fresh; the JS toggles this on love/neglect */
.portrait.is-engaged{ --patina:0 !important; }

/* keyboard/focus affordance on the piece */
.portrait:focus-visible{ outline:3px solid var(--gold); outline-offset:8px; border-radius:6px; }

/* ── Preview director panel (staging only) ───────────────────────── */
.dorian-director{
  position:fixed; left:18px; bottom:18px; z-index:500;
  display:grid; gap:8px; padding:12px 14px; max-width:min(92vw,420px);
  background:rgba(7,16,28,.94); border:1px solid var(--line-gold,rgba(201,168,76,.25));
  border-radius:10px; backdrop-filter:blur(8px);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  font-family:'Rajdhani',sans-serif;
}
.dorian-director .dd-title{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#c9a84c);
}
.dorian-director .dd-row{ display:flex; flex-wrap:wrap; gap:6px; }
.dorian-director button{
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.06em;
  color:#e8f3ff; background:rgba(20,61,106,.5); border:1px solid rgba(201,168,76,.3);
  border-radius:6px; padding:7px 11px; cursor:pointer; transition:.15s;
}
.dorian-director button:hover{ background:var(--gold,#c9a84c); color:#071018; }
.dorian-director button:focus-visible{ outline:3px solid var(--gold,#c9a84c); outline-offset:2px; }
.dorian-director .dd-slider{
  display:flex; align-items:center; gap:8px; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted,#9db8d4);
}
.dorian-director input[type=range]{ flex:1; accent-color:var(--gold,#c9a84c); }

/* ── Reduced motion: a still, dignified relief — no turn, no decay ── */
@media (prefers-reduced-motion: reduce){
  .portrait{ transition:none !important; transform:none !important; }
  .portrait-relief{ filter:url(#rhp-emboss) grayscale(1) contrast(1.06) sepia(.18) saturate(1.2); }
  .portrait-mat::after{ opacity:.12; }
}