/* CBA Architects home page, its top (home.js): the opening (opening.css) and the markets, pinned and played by the scroll.
   The rest of the page, and its chrome, are the site's (site.css) */
@property --ms{syntax:"<length>";inherits:false;initial-value:0px}

/* the stage: what's in it is measured against it (cqw, not vw), and home.js draws to it; its own tokens, beside the
   site's */
.cinema{position:relative;container-type:inline-size;background:var(--ink);color:var(--cream);
  --cream-2:rgb(239 238 232 / .66);
  --cream-3:rgb(239 238 232 / .18);
  --gl:max(clamp(16px,3cqw,44px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,3cqw,44px),env(safe-area-inset-right,0px));
  --dotA:1.1437;            /* the dot's box, width / height */
  --radius-card:12px;
  --radius-tile:24px}
.cinema button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* where the site's bar sits across the foot of the screen (site.css, .tabbar: 58px, 12px off the foot), the opening's
   statements stand clear above it */
@media (max-width:820px){.cinema .op{--op-foot:112px}}
/* (the site's link-arrow, drawn after every .more: the buttons here draw their own) */
.cinema .more::after{content:none}.cinema a{color:inherit}

/* entry: the opening (opening.css); its length is set by home.js */
.entry{position:relative;height:500vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* (each section reaches up over the one before, the length of its coming in: its box lets a click through to what's
   beneath, and only what shows of it takes one) */
.proj{pointer-events:none}
.pin{pointer-events:auto}
/* each section after the opening comes in over the one before as a whole picture: its stage is solid ground */
.proj .pin{background:var(--ink)}
/* a finger swiped across a market's pictures goes a picture back or on (home.js), so the page itself only scrolls up
   and down there */
.proj .pin{touch-action:pan-y pinch-zoom}
.cue{position:absolute;right:var(--gr);bottom:calc(env(safe-area-inset-bottom,0px) + 26px);display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity .6s;pointer-events:none}
.cue span{font:400 13px/1 var(--ui);color:rgb(239 238 232 / .82)}
.cue i{position:relative;width:1px;height:48px;background:rgb(239 238 232 / .22);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--cream);transform:translateY(-100%);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{transform:translateY(250%)}}
.cue.gone{opacity:0}
.cue.gone i::after{animation:none}

/* a market, a chapter: the screen holds while its film plays, its name set big over it and what's showing popping up
   beside it; then the picture, whole and where it was, dims for what the market says (home.js, projectFrame) */
.proj{position:relative}
.proj canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%}
/* the shade under the say, only on the words' side, so the rest of the picture stays whole (and, the same, over the
   last market's picture as it becomes the culture's dot) */
.proj .shade,.mo-s{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(7 67 73 / .82),rgb(7 67 73 / .62) 26%,rgb(7 67 73 / .2) 50%,rgb(7 67 73 / 0) 68%)}
.proj .shade{opacity:0}
/* a soft deep teal up from the foot, under the name and what pops up, while the film plays */
.proj .scrim{position:absolute;inset:auto 0 0;height:46%;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);
  background:linear-gradient(to top,rgb(3 34 38 / .66),rgb(3 34 38 / .26) 52%,transparent)}
.proj.playing .scrim{opacity:1}
/* the market's name over its film, at the foot: the name rises out of its line, the line under it comes with it */
.title{position:absolute;left:var(--gl);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(36px,7vh,84px));max-width:min(62cqw,1100px);pointer-events:none}
.mk-t{margin:0;font:400 clamp(56px,8.4cqw,164px)/.9 var(--display);letter-spacing:-.035em;text-wrap:balance}
.mk-t .ln{display:block;overflow:hidden;padding:.06em .04em .16em;margin:-.06em -.04em -.16em}
.mk-t .ln>span{display:block;transform:translateY(calc(100% + .3em));transition:transform .4s var(--ease)}
.mk-p{margin:clamp(12px,1.8vh,20px) 0 0;max-width:30ch;font:400 clamp(17px,1.4cqw,23px)/1.4 var(--ui);color:var(--cream);text-wrap:balance}
.mk-p{opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .4s var(--ease)}
.title.on .mk-t .ln>span{transform:none;transition:transform .9s var(--ease)}
.title.on .mk-p{opacity:1;transform:none;transition:opacity .6s var(--ease) .15s,transform .8s var(--ease) .15s}
/* what pops up while the film plays: the project showing, or a fact about it, set plainly on the scrim at the foot on
   the right, level with the name: its name in the display face, where it is beneath. The one going leaves quickly; the
   next settles in just after */
.proj .notes{position:absolute;right:var(--gr);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(36px,7vh,84px));width:min(40ch,34cqw);height:130px;pointer-events:none}
.note{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:0;text-align:right;text-shadow:0 1px 18px rgb(3 34 38 / .55);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .18s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.note.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease) .16s,transform .5s var(--ease) .16s,visibility 0s}
.note.was{transform:translateY(-10px)}
.note b{font:400 clamp(22px,1.9cqw,32px)/1.05 var(--display);letter-spacing:-.01em;color:var(--cream)}
.note span{font:400 clamp(14px,1cqw,16px)/1.35 var(--ui);color:rgb(239 238 232 / .82)}
/* what a market says, over its pictures as they go by, on the left: small enough to leave them the screen, on a light
   shade, a soft shadow under the words so they read over whatever is behind them */
.side{position:absolute;left:var(--gl);top:24%;width:min(30cqw,480px);pointer-events:none;transform:translate3d(0,100vh,0);will-change:transform;
  text-shadow:0 1px 22px rgb(3 34 38 / .5)}
.side.on{pointer-events:auto}
.say-t{margin:-.08em 0 0;font:400 clamp(30px,3cqw,58px)/.96 var(--display);letter-spacing:-.02em}
.say-t .ln{display:block}
.say-p{margin:clamp(14px,2.2vh,22px) 0 0;max-width:40ch;font:400 clamp(14px,1cqw,16px)/1.55 var(--ui);color:rgb(239 238 232 / .88);text-wrap:pretty}
.say-n{display:flex;gap:clamp(22px,2.6cqw,42px);margin:clamp(18px,2.8vh,30px) 0 0}
.say-n div{margin:0}
.say-n dt{font:400 clamp(28px,2.4cqw,46px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.say-n dd{margin:6px 0 0;font:400 clamp(12px,.9cqw,14px)/1.3 var(--ui);color:rgb(239 238 232 / .88)}
.say-m{margin-top:clamp(20px,3vh,32px)}
.say-m .more{text-shadow:none}
.say .more{opacity:1;transform:none;transition:background-color .2s ease,scale .12s var(--ease)}
/* a market's pictures: back and on, side by side at the foot on the left, where the name was before the say pushed it
   off (on a phone, at the foot of the band on the right), while they show (home.js); the end's one dimmed */
.pics-nav{position:absolute;z-index:2;left:var(--gl);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(36px,7vh,84px));display:flex;gap:10px;pointer-events:none}
.pics-nav button{width:52px;height:52px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgb(7 67 73 / .5);color:var(--cream);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),background-color .2s ease,scale .12s var(--ease)}
.pics-nav svg{width:20px;height:20px}
.proj.pics .pics-nav button{opacity:1;pointer-events:auto}
.proj.pics .pics-nav button:disabled{opacity:.3;pointer-events:none}
.pics-nav button:active{scale:.94}
.pics-nav button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pics-nav button:hover{background:rgb(7 67 73 / .82)}}
@media (max-width:700px){
  .pics-nav{left:auto;right:var(--gr);bottom:calc(100% - var(--band-b,70%) + 14px);gap:8px}
  .pics-nav button{width:44px;height:44px}
}
/* what the picture shows, at the foot on the right, where its notes were: comes with the say */
.card-cap{position:absolute;right:var(--gr);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(36px,7vh,84px));display:flex;align-items:baseline;gap:10px;margin:0;
  font:400 clamp(13px,.95cqw,15px)/1.3 var(--ui);color:var(--cream);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .3s var(--ease);pointer-events:none}
.card-cap i{font-style:normal;color:rgb(239 238 232 / .66)}
.card-cap{display:none}
@media (max-width:700px){
  .proj .scrim{bottom:calc(100% - var(--band-b,70%));height:24%}
  .title{right:var(--gr);max-width:none;bottom:calc(env(safe-area-inset-bottom,0px) + 30px)}
  .mk-t{font-size:clamp(44px,12.5cqw,66px)}
  .mk-p{font-size:16px}
  .proj .notes{left:var(--gl);right:var(--gr);width:auto;height:100px;bottom:calc(100% - var(--band-b,70%) + 14px)}
  .note{left:0;right:auto;align-items:flex-start;text-align:left}
  .proj .shade,.mo-s{background:rgb(7 67 73 / .62)}
  /* (the say sits under the band, on the ground, not over the picture: no shade on the picture for it, no paragraph, so it
     fits the room under the band) */
  .proj .shade{display:none}
  .side{right:var(--gr);width:auto;top:calc(var(--band-t,12%) + 24px);text-shadow:none}
  .side .say-p{display:none}
  .cue{display:none}
  .say-t{font-size:clamp(30px,8.6cqw,44px)}
  .say-p{font-size:14px}
  .say-n dt{font-size:clamp(26px,7.4cqw,34px)}
  .card-cap{display:none}}


/* see more: plainly a button, a solid cream pill with the label and a drawn arrow in deep teal; it brightens as the
   pointer comes on, the arrow edging on, and gives a little as it's pressed */
.cinema .more{display:inline-flex;align-items:center;gap:12px;flex:none;padding:16px 22px 16px 24px;border-radius:999px;background:var(--cream);color:var(--ink);
  text-decoration:none;font:400 clamp(14px,1.05cqw,16px)/1 var(--label);letter-spacing:.12em;
  opacity:0;transform:translateY(10px);transition:opacity .6s .45s,transform .8s .45s var(--ease),background-color .2s ease,scale .12s var(--ease)}
.cinema .more .ar{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)}
.cinema .more:active{scale:.97}
.cinema .more:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.cinema .more:hover{background:#fff}.cinema .more:hover .ar{transform:translateX(3px)}}
.cinema .on .more{opacity:1;transform:none}
.proj .end:not(.on) .more{transition-delay:0s;transition-duration:.25s}


/* with reduced motion, nothing travels: what comes and goes fades, gently */
@media (prefers-reduced-motion:reduce){.cue i::after{animation:none}
  .cinema .more,.side,.side.on,.side.past,.title *,.note,.card-cap{transform:none!important;transition:opacity .25s ease!important}
  /* (a market's name, hidden below its line till it rises, fades instead) */
  .title .mk-t{opacity:0}.title.on .mk-t{opacity:1}}