@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/orbit-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/orbit-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/orbit-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/orbit-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/orbit-4.ttf) format('truetype');
}

/* MJ Foto Studios — scroll orbit hero
   Layout: copy column left, Marquise on a canvas right, name lettering behind him,
   one overhead spotlight. The section is tall; the stage is sticky inside it. */
#photographer.mj-hero {
  --mj-ink: #0f100e;          /* page ground */
  --mj-ink-2: #1b1c18;        /* lifted ground under the spotlight */
  --mj-bone: #ebe6dc;         /* headline + body text */
  --mj-bone-dim: #b9b4a8;     /* secondary text */
  --mj-olive: #8d9a5b;        /* brand accent: eyebrow, frame, button */
  --mj-name: #b1aa96;         /* big name lettering */
  --mj-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mj-condensed: "Oswald", "Arial Narrow", Impact, sans-serif;
  --mj-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;

  position: relative;
  height: 280vh;              /* scroll distance for one full turn */
  background: var(--mj-ink);
  color: var(--mj-bone);
  font-family: var(--mj-sans);
}

#photographer .mj-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 65% 90% at 74% 38%, #20221e 0%, #121613 60%, #0c100e 100%);
}

/* Photographic room plate: visible concrete floor, with light baked into the material. */
#photographer .mj-stage::before {
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(90deg,rgba(7,12,9,.35),transparent 60%),url('assets/orbit/studio-room-floor.png');
 background-size:100% 100%,100% 120%;background-position:center top;background-repeat:no-repeat;
}
#photographer .mj-beam,#photographer .mj-floor{display:none}

/* ---------- name lettering ---------- */
#photographer .mj-name {
  position: absolute;
  z-index: 1;
  right: 5vw;
  top: 9vh;
  text-align: right;
  font-family: var(--mj-condensed);
  font-weight: 600;
  text-transform: uppercase;
  line-height: .86;
  color: var(--mj-name);
  pointer-events: none;
  user-select: none;
}
#photographer .mj-name__first { display: block; font-size: clamp(4rem, 11vw, 12rem); letter-spacing: -.025em; line-height: 1; transform: scaleY(1.6); transform-origin: right top; margin-bottom: clamp(2.4rem, 6.6vw, 7.2rem); -webkit-text-stroke: 1.4px currentColor; }
#photographer .mj-name__last  { display: block; font-size: clamp(2.2rem, 5.0vw, 5.5rem); letter-spacing: -.025em; line-height: 1; transform: scaleY(1.3); transform-origin: right top; -webkit-text-stroke: .7px currentColor; }

/* olive corner frame */
#photographer .mj-frame { position: absolute; z-index: 1; width: 3.2rem; height: 3.2rem; border: 0 solid var(--mj-olive); opacity: .85; }
#photographer .mj-frame--tl { left: 47vw; top: 6vh; border-top-width: 3px; border-left-width: 3px; }
#photographer .mj-frame--br { right: 3vw; bottom: 7vh; border-bottom-width: 3px; border-right-width: 3px; }

#photographer .mj-tagline {
  position: absolute;
  z-index: 3;
  right: 5vw;
  bottom: 14vh;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(141, 154, 91, .45);
  font-size: .72rem;
  letter-spacing: .28em;
  line-height: 2.1;
  text-transform: uppercase;
  color: var(--mj-olive);
}

/* ---------- Marquise ---------- */
#photographer .mj-figure {
  position: absolute;
  z-index: 2;
  bottom: 3vh;
  left: 50%;
  height: 92vh;
  aspect-ratio: var(--mj-frame-ratio, .44);
  transform: translateX(calc(-50% + var(--mj-shift, 0px)));
  will-change: transform;
}
#photographer .mj-figure canvas { display: block; width: 100%; height: 100%; }
/* Soft foot contact, without a clipped horizontal shadow edge. */
#photographer .mj-figure::after {
 content:"";position:absolute;pointer-events:none;
 left:var(--mj-shadow-left,26%);width:var(--mj-shadow-width,53%);
 bottom:2.6%;height:2.2%;transform:translateY(50%);z-index:-1;
 border-radius:50%;filter:blur(3px);
 background:radial-gradient(ellipse closest-side,rgba(0,0,0,.44),rgba(0,0,0,.18) 48%,transparent 100%);
}
#photographer .mj-figure::before {content:none}

/* ---------- copy ---------- */
#photographer .mj-copy {
  position: absolute;
  z-index: 3;
  left: 7vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(36rem, 42vw);
  display: grid;
  gap: 1.4rem;
}
#photographer .mj-eyebrow { margin: 0; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: var(--mj-olive); }
#photographer .mj-title { margin: 0; font-family: var(--mj-display); font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
#photographer .mj-sub { margin: -.4rem 0 0; font-family: var(--mj-display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.15; color: var(--mj-bone); }
#photographer .mj-body { margin: 0; max-width: 34rem; font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.6; color: var(--mj-bone-dim); }


#photographer .mj-pillars { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mj-bone-dim); }
#photographer .mj-pillars li + li::before { content: "|"; margin-right: 1.6rem; color: rgba(235,230,220,.35); }

/* reveal: JS sets --mj-reveal from 0 to 1 */
#photographer .mj-reveal { opacity: var(--mj-reveal, 1); transform: translateY(calc((1 - var(--mj-reveal, 1)) * 18px)); }
#photographer .mj-frame, #photographer .mj-tagline { opacity: calc(.25 + .75 * var(--mj-reveal, 1)); }
#photographer .mj-name__first, #photographer .mj-name__last { transition: none; }

#photographer .mj-scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 2.4vh; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--mj-bone-dim);
  opacity: calc(1 - var(--mj-reveal, 1) * 2);
}

/* loading state */
#photographer.mj-hero[data-loading] .mj-figure canvas { opacity: 0; }
#photographer .mj-figure canvas { transition: opacity .4s; }

/* ---------- tablet + phone ---------- */
@media (max-width: 860px) {
  #photographer.mj-hero { height: 220vh; }
  #photographer .mj-name { right: 50%; transform: translateX(50%); top: 7vh; text-align: center; }
  #photographer .mj-name__first { font-size: 16vw; }
  #photographer .mj-name__last { font-size: 8vw; }
  #photographer .mj-frame--tl { left: 6vw; top: 5vh; }
  #photographer .mj-frame--br { right: 6vw; bottom: 40vh; }
  #photographer .mj-tagline { display: none; }
  #photographer .mj-figure { height: 62vh; bottom: auto; top: 10vh; transform: translateX(-50%); }
  #photographer .mj-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 4vh; transform: none; gap: .8rem; }
  #photographer .mj-title { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  #photographer .mj-sub { font-size: 1.15rem; }
  #photographer .mj-body { display: none; }
  #photographer .mj-pillars { display: none; }
  
  #photographer .mj-scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #photographer.mj-hero { height: auto; }
  #photographer .mj-stage { position: relative; }
  #photographer .mj-reveal { opacity: 1; transform: none; }
}

/* Integration-only safeguards; supplied desktop design remains the baseline. */
#photographer{--mj-display:"Newsreader",Georgia,serif;--mj-condensed:"Oswald",Impact,sans-serif;--mj-sans:"Figtree",Arial,sans-serif;scroll-margin-top:0}
#photographer .mj-fallback{display:block;width:100%;height:100%;object-fit:contain}
#photographer canvas[hidden],#photographer .mj-fallback[hidden]{display:none}
#photographer .button{justify-self:start}
#photographer .mj-copy:focus-within .mj-reveal{opacity:1;transform:none}
#photographer.mj-static{height:auto!important}
#photographer.mj-static .mj-stage{position:relative}
#photographer.mj-static .mj-reveal{opacity:1;transform:none}
@media(max-width:860px){
 #photographer .mj-stage{min-height:780px}
 #photographer .mj-figure{height:42svh;max-height:390px;top:4svh}
 #photographer .mj-copy{gap:.65rem;bottom:24px}
 #photographer .mj-title{font-size:2rem}
 #photographer .mj-body{display:block;font-size:.875rem;line-height:1.5;max-width:38rem}
 #photographer .mj-name{top:5svh}
 #photographer .mj-frame--br{bottom:48%}
}
@media(prefers-reduced-motion:reduce){#photographer{height:auto!important}#photographer .mj-stage{position:relative}#photographer .mj-reveal{opacity:1;transform:none}}
@media(min-width:600px) and (max-width:860px){#photographer .mj-figure{height:58svh;max-height:none}#photographer .mj-copy{left:32px;right:32px;bottom:32px}#photographer .mj-frame--br{bottom:35%}}

/* Keep the room floor beneath the portrait, above the mobile copy area. */
@media(max-width:860px){
 #photographer .mj-floor{--mj-pool-y:52%;top:calc(4svh + min(42svh, 390px) - 70px);bottom:auto;height:125px;mask-image:linear-gradient(transparent,#000 35%,#000 62%,transparent)}
 #photographer .mj-beam{left:42%;width:48%;height:65%;top:-15%}
}
@media(min-width:600px) and (max-width:860px){
 #photographer .mj-floor{top:calc(62svh - 70px)}
}

@media(max-width:860px){
 #photographer .mj-stage::before{bottom:auto;height:calc(4svh + min(42svh,390px) + 28px);background-size:100% 100%;mask-image:linear-gradient(#000 90%,transparent)}
}
@media(min-width:600px) and (max-width:860px){
 #photographer .mj-stage::before{height:calc(62svh + 28px)}
}

#photographer .mj-name{opacity:.55;color:#a39b83;text-shadow:0 1px 10px rgba(0,0,0,.25)}
@media(max-width:860px){#photographer .mj-name__first{margin-bottom:9.6vw;-webkit-text-stroke:.8px currentColor}#photographer .mj-name__last{text-align:right;-webkit-text-stroke:.4px currentColor}}