/* Option C - the four project pages (build_projects.py). Question on night, the loop hanging
   into the white page (POLISH 4), then idea -> case study -> output. Tokens: tokens.css; pieces: c/kit.css. */
.pj{--ov:clamp(96px,11vw,168px);--cap:#5C6167}
.pj-skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:10;padding:12px 18px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
.pj-skip:focus{top:16px}

/* top: bar + question */
.pj-top{position:relative;z-index:2}
.pj-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin-inline:auto;padding:clamp(18px,2.4vw,30px) var(--pad) 0}
.pj-bar__mark{display:inline-flex;align-items:center;min-height:44px}
.pj-mark{width:clamp(112px,10vw,144px);height:auto;display:block}
.pj-mark .rec{animation:rec 2.6s steps(1,end) infinite}   /* the recording light, same as the hero */
@keyframes rec{0%,58%{opacity:1}59%,100%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.pj-mark .rec{animation:none}}
.pj-bar__back{color:#A8AEB6;font-size:16px;transition:color var(--d-ui) var(--ease),background-size var(--d-ui) var(--ease)}
.pj-bar__back:hover,.pj-bar__back:focus-visible{color:#fff}
.pj-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end;padding-top:clamp(48px,7vw,104px)}
.pj-hero__text{align-self:center;padding-bottom:clamp(40px,6vw,96px)}
.pj-meta{font-size:15px;line-height:1.5;color:#A8AEB6;margin-bottom:clamp(16px,2vw,26px)}
.pj-meta b{color:#fff;font-weight:700}
.pj-q{font-size:clamp(38px,5.2vw,84px);font-weight:700;line-height:1.04;letter-spacing:normal;max-width:14ch;text-wrap:balance}
.pj-hero__lead{margin-top:clamp(20px,2.4vw,30px);max-width:46ch}
.pj-loop{justify-self:end;width:clamp(200px,26vw,380px);aspect-ratio:9/16;margin-bottom:calc(-1 * var(--ov));
  background:#1C1F24 center/cover no-repeat;border-radius:6px;overflow:hidden;box-shadow:0 48px 80px -48px rgba(11,13,16,.6)}
.pj-loop video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.pj-loop video.on{opacity:1}

/* the idea: text on the reading side, facts under the hanging loop */
.pj-label{font-size:clamp(30px,3.2vw,48px);font-weight:700;line-height:1.1;margin-bottom:clamp(20px,2.4vw,32px)}
.pj-idea{padding-block:clamp(72px,9vw,136px)}
.pj-idea__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px)}
.pj-idea__body p{font-size:clamp(18px,1.3vw,20px);line-height:1.7;max-width:60ch}
.pj-idea__body p+p{margin-top:1em}
.pj-quote{margin-top:clamp(40px,5vw,64px);padding-inline-start:clamp(18px,2vw,28px);border-inline-start:2px solid var(--ink)}
.pj-quote p{font-size:clamp(26px,2.6vw,38px);font-weight:700;line-height:1.2;max-width:22ch}
.pj-quote figcaption{margin-top:10px}
.pj-facts{align-self:start;margin-top:calc(var(--ov) - clamp(72px,9vw,136px) + clamp(40px,4vw,64px))}
.pj-facts div{border-top:1px solid var(--line);padding-block:14px 16px}
.pj-facts div:last-child{border-bottom:1px solid var(--line)}
.pj-facts dt{font-size:13px;color:var(--cap)}
.pj-facts dd{font-size:17px;font-weight:700;margin-top:2px}

/* the case-study film */
.pj-case{padding-block:clamp(72px,9vw,136px)}
.pj-case__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.pj-case .pj-v{justify-self:center;width:min(100%,380px)}

/* films */
.pj-result{padding-block:clamp(72px,9vw,136px) clamp(88px,11vw,160px)}
.pj-films{display:grid;gap:clamp(20px,2.4vw,36px);margin-top:clamp(36px,4.4vw,56px)}
/* IGY: the mix beside the eight - the "גם וגם" of the campaign, side by side */
.pj-films--igy{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:clamp(24px,3.4vw,56px)}
.pj-films--igy .pj-sub{margin:0 0 clamp(16px,2vw,24px)}
.pj-igy8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px) clamp(10px,1.2vw,16px)}
.pj-igy8 .pj-cap b{font-size:15px}
.pj-films--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}
.pj-films--mda{grid-template-columns:minmax(0,4fr) minmax(0,8fr);max-width:1120px;align-items:center}
.pj-films--mda>:first-child{grid-column:1/-1}
.pj-sub{font-size:clamp(26px,2.6vw,38px);font-weight:700;line-height:1.1;margin-top:clamp(64px,8vw,112px)}
.pj-v__box{position:relative;aspect-ratio:9/16;background:#1C1F24 center/cover no-repeat;border-radius:6px;overflow:hidden}
.pj-v--wide .pj-v__box{aspect-ratio:16/9}
.pj-v__box video,.pj-v__box img{display:block;width:100%;height:100%;object-fit:cover}
.pj-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.pj-cap b{font-size:16px;font-weight:700}
.pj-cap span{font-size:14px;color:var(--cap);font-variant-numeric:tabular-nums}

/* next project */
.pj-next{padding-block:clamp(40px,5vw,72px)}
.pj-next__a{display:flex;align-items:center;justify-content:space-between;gap:24px;color:inherit;text-decoration:none}
.pj-next__text{display:flex;flex-direction:column;gap:10px}
.pj-next__q{font-size:clamp(26px,3.4vw,52px);font-weight:700;line-height:1.1;max-width:20ch;
  background:linear-gradient(currentColor,currentColor) 100% 100%/0% 2px no-repeat;transition:background-size var(--d-ui) var(--ease)}
.pj-next__a:hover .pj-next__q,.pj-next__a:focus-visible .pj-next__q{background-size:100% 2px}
.pj-next__img{flex:none;width:clamp(64px,7vw,104px);aspect-ratio:9/16;height:auto;object-fit:cover;border-radius:4px}

@media (max-width:899px){
  .pj-hero{grid-template-columns:1fr;gap:28px}
  .pj-hero__text{padding-bottom:0}
  .pj-loop{width:clamp(180px,50vw,260px)}
  .pj-idea{padding-top:calc(var(--ov) + clamp(48px,8vw,72px))}
  .pj-idea__grid,.pj-case__grid,.pj-films--mda{grid-template-columns:1fr}
  .pj-facts{margin-top:clamp(40px,8vw,56px)}
  .pj-films--3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,300px);overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);padding-bottom:8px}
  .pj-films--3 .pj-v{scroll-snap-align:start}
  .pj-films--igy{grid-template-columns:1fr}
  .pj-films--igy>.pj-v{width:min(100%,420px)}
  .pj-igy8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-films--igy .pj-sub{margin-top:24px}
  .pj-case .pj-v{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.pj-loop video,.pj-next__q,.pj-bar__back{transition:none}}
/* TLV: the film beside its own first and third second - the shaft, then the art */
.pj-films--ba{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;max-width:1120px}
.pj-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);max-width:520px;justify-self:center}
.pj-ba img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:6px}
@media (max-width:899px){.pj-films--ba{grid-template-columns:1fr}.pj-ba{justify-self:stretch;max-width:none}}
/* the film tiles are tab stops: a ring on the box (WCAG 2.4.7) */
.pj-v__box:focus-within{outline:2px solid var(--red);outline-offset:3px}