/* project and contact pages: normal scrolling pages under the same header */
html.page body{overflow:auto;overflow-x:hidden;height:auto}
html.page .rules{background:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px var(--gap)) 0 var(--head)/100% 100%}
.back{justify-self:start}
.bar .home{justify-self:center}

main{position:relative;z-index:2;padding:calc(var(--head) + 22px) 20px 0}
.hero{margin:0;transform-origin:50% 0;will-change:transform}
.hero .frame{position:relative;overflow:hidden;margin:0 auto;background:var(--c,var(--ink));
  clip-path:inset(0 0 0 100%);transition:clip-path 1.5s var(--ease-io) .05s}
.hero video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease) .2s}
html.revealed .hero .frame{clip-path:inset(0 0 0 0)}
html.revealed .hero video{transform:none}

.info{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:26px 0 30vh;position:relative}
.info .head{grid-column:1/-1}
.info .desc{grid-column:2}
.head{will-change:transform}
.title{font-family:var(--f-title);font-weight:700;font-size:clamp(40px,5.2vw,96px);line-height:.92;letter-spacing:-.04em}
.title .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;white-space:nowrap}
.title .ch{display:inline-block;transform:translate3d(0,110%,0) rotate(6deg);transform-origin:0 100%;transition:transform 1.3s var(--ease)}
html.revealed .title .ch{transform:none}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;
  font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transform:translate3d(0,18px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
html.revealed .meta{opacity:1;transform:none}
.meta a{text-decoration:underline;text-underline-offset:.25em}
.desc{padding-top:14vh;max-width:34em;justify-self:end;padding-right:60px}
.desc p{font-size:clamp(19px,1.55vw,24px);line-height:1.45;opacity:0;transform:translate3d(0,30px,0);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.desc p.seen{opacity:1;transform:none}
.desc p+p{margin-top:1em}
.desc p:nth-child(2){transition-delay:.15s}

/* previous / next project arrows, fixed at the sides */
.pn{position:fixed;top:50%;z-index:35;display:flex;align-items:center;gap:10px;transform:translateY(-50%);
  font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transition:opacity 1s var(--ease) 1.4s}
html.revealed .pn{opacity:1}
.pn-prev{left:14px}
.pn-next{right:14px;flex-direction:row-reverse}
.pn-arrow{display:grid;place-items:center;width:40px;height:40px;background:none;
  font-size:28px;transition:background .3s var(--ease),color .3s var(--ease),transform .5s var(--ease)}
.pn-name{max-width:0;overflow:hidden;white-space:nowrap;background:var(--paper);transition:max-width .6s var(--ease)}

.pn-next:hover .pn-arrow{transform:translateX(4px)}
.pn-prev:hover .pn-arrow{transform:translateX(-4px)}
.pn:hover .pn-name{max-width:16em}

/* contact page */
.contact-page{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:calc(var(--head) + 8vh);padding-bottom:14vh;min-height:100vh}
.c-intro .lede{font-size:clamp(19px,1.55vw,24px);line-height:1.45;margin-top:28px;max-width:28em}
.c-intro .lede.alt{margin-top:14px}
.c-intro .lede a{text-decoration:underline;text-underline-offset:.2em}
.c-form{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:0 4%;padding-top:10px}
.cf{display:block;width:100%;margin-bottom:30px}
.cf.half{width:48%}
.cf span{display:block;font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.cf input,.cf textarea{width:100%;background:none;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;
  font:inherit;font-size:20px;padding:4px 0 8px;resize:none;outline:none;color:var(--ink)}
.cf input:focus-visible,.cf textarea:focus-visible{border-bottom-width:3px;padding-bottom:6.5px}
.c-row{display:flex;align-items:center;gap:20px;width:100%}
#cSend{font-family:var(--f-title);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  background:none;color:var(--ink);border:0;padding:6px 0;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px;font-size:15px}
#cSend:disabled{opacity:.6;cursor:default}
#cNote{font-size:17px}
.c-form.sent .cf{opacity:.35;pointer-events:none;transition:opacity .6s var(--ease)}
.c-intro .lede,.c-form{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.1s var(--ease) .8s,transform 1.3s var(--ease) .8s}
.c-form{transition-delay:1s}
html.revealed .c-intro .lede,html.revealed .c-form{opacity:1;transform:none}
.contact-page .title .ch{transition-delay:.45s}
.contact-page .title .w+.w .ch{transition-delay:.55s}

@media (max-width:700px){
  main{padding:calc(var(--head) + 12px) 12px 0}
  .info{grid-template-columns:1fr;gap:0}
  .info .desc{grid-column:1}
  .desc{padding-top:12vh}
  html.page .bar .back{display:none}
  .pn{top:auto;bottom:14px;transform:none}
  .pn-name{display:none}
  .pn-arrow{width:40px;height:40px}
  html.page .bar .home{grid-column:2}
  .contact-page{grid-template-columns:1fr;gap:30px;padding-top:calc(var(--head) + 5vh)}
  .cf.half{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .hero .frame,.hero video,.title .ch,.meta,.desc p,.c-intro .lede,.c-form{clip-path:none;transform:none;opacity:1;transition:none}
}

/* about page */
.about-page{padding-top:calc(var(--head) + 8vh);padding-bottom:12vh;min-height:100vh}
.about-copy{max-width:44em;margin-top:28px}
.about-copy .lede{font-size:clamp(19px,1.6vw,26px);line-height:1.4;margin-top:18px}
.about-copy .lede a{text-decoration:underline;text-underline-offset:.2em}
.credit{margin-top:14vh;font-size:12px;opacity:.6;max-width:50em}
.credit a{text-decoration:underline}
.about-copy .lede{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.1s var(--ease) .6s,transform 1.3s var(--ease) .6s}
html.revealed .about-copy .lede{opacity:1;transform:none}