/* Jaipur Films only: brand fonts + the cinematic touches (letterbox intro, viewfinder,
   timecode, word-by-word headline). Loaded after assets/site.css. */

/* Alta: used if installed on the visitor's machine, or if you add the file to jaipurfilms/fonts/.
   Without it the theme falls back to Italiana (see --display in site.css). */
@font-face{
  font-family:"Alta";
  src:local("Alta"),local("Alta Regular"),local("Alta-Regular"),
      url("fonts/Alta.woff2") format("woff2"),url("fonts/Alta.otf") format("opentype");
  font-display:swap;
}

/* wordmark, matching the serif JAIPUR FILMS logo */
.jf-logo{font-family:"Cinzel",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:21px;color:var(--accent)}
.jf-logo span{color:var(--terra)}

body.t-jf{font-weight:400}
.t-jf .lede,.t-jf .service p,.t-jf .step p{font-weight:300}
.t-jf .eyebrow{font-weight:500;letter-spacing:.2em;font-size:11px}
.t-jf .btn{font-weight:500;letter-spacing:.02em}
.t-jf .hero h1{font-size:clamp(52px,10.5vw,164px);max-width:13ch}
.t-jf .fact b{font-size:clamp(20px,4.6vw,30px)}
.t-jf .service h3{font-size:clamp(26px,2.6vw,34px)}
.t-jf .story{background:var(--accent);color:var(--accent-ink);border:0}
.t-jf .story .display{color:var(--accent-ink)}
.t-jf .story .display em,.t-jf .story-body p.pull{color:#e3b3a6}
.t-jf .story-body p{color:var(--accent-ink);font-weight:300}
.t-jf .story .eyebrow,.t-jf .story .signature{color:color-mix(in srgb,var(--accent-ink) 70%,transparent)}
.t-jf .story .eyebrow::before{background:#e3b3a6}

/* ---------- letterbox intro ---------- */
.letterbox::before,.letterbox::after{content:"";position:fixed;left:0;right:0;height:13vh;background:#1c0e0c;z-index:300;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1) .25s}
.letterbox::before{top:0}
.letterbox::after{bottom:0}
.lb-open .letterbox::before{transform:translateY(-101%)}
.lb-open .letterbox::after{transform:translateY(101%)}

/* ---------- viewfinder + timecode on the hero ---------- */
.viewfinder{position:absolute;inset:92px var(--gutter) 28px;pointer-events:none;z-index:1}
.viewfinder i{position:absolute;width:28px;height:28px;border:0 solid color-mix(in srgb,var(--accent) 55%,transparent)}
.viewfinder i:nth-child(1){top:0;left:0;border-width:1.5px 0 0 1.5px}
.viewfinder i:nth-child(2){top:0;right:0;border-width:1.5px 1.5px 0 0}
.viewfinder i:nth-child(3){bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.viewfinder i:nth-child(4){bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.timecode{position:absolute;top:14px;right:44px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;
  letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
.timecode b{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.timecode b::before{content:"";width:8px;height:8px;border-radius:50%;background:#c4362b;animation:rec 1.2s steps(2,start) infinite}
@keyframes rec{to{visibility:hidden}}
.frame-meta{position:absolute;bottom:14px;left:44px;font-size:11px;letter-spacing:.16em;color:var(--muted)}
@media(max-width:700px){.viewfinder{inset:84px 12px 16px}.timecode{right:16px;top:12px;font-size:11px}.frame-meta{display:none}}

/* ---------- headline: words rise in after the bars open ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.split .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s cubic-bezier(.2,.75,.2,1);transition-delay:var(--d,0s)}
.lb-open .split .w>span{transform:none}

@media(prefers-reduced-motion:reduce){
  .letterbox{display:none}
  .split .w>span{transform:none;transition:none}
  .timecode b::before{animation:none}
}

/* ---------- client wall ---------- */
.client-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:760px){.client-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1050px){.client-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.client-wall li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:clamp(92px,11vw,128px);padding:16px 12px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);text-transform:uppercase;
  font-size:clamp(17px,2vw,24px);letter-spacing:.06em;line-height:1.15;color:var(--accent);transition:background .3s,color .3s}
.client-wall li:hover{background:var(--accent);color:var(--accent-ink)}

/* ---------- behind-the-scenes strip ---------- */
.bts-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:900px){.bts-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bts-strip figure{margin:0}
.bts-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);display:block;filter:saturate(.92)}
.bts-strip figcaption{margin-top:10px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}