/* Reading the City — the motif index */

.motifbar{
  position:sticky;top:0;z-index:400;
  background:var(--void);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
}
.motifbar__in{display:flex;flex-wrap:wrap;gap:4px clamp(12px,1.8vw,30px);padding-block:13px;align-items:center}
.tab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-26);padding:6px 0;position:relative;white-space:nowrap;transition:color .4s var(--e);
}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.tab:hover{color:var(--bone-72)}
.tab[aria-selected="true"]{color:var(--bone)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}

.spectrum{display:flex;height:3px;width:100%}
.spectrum i{flex:1;transition:background .8s var(--e)}

.strip{display:flex;flex-direction:column;gap:var(--stripgap,12px)}
.strip__row{display:flex;gap:var(--stripgap,12px)}
.tile{
  flex:0 0 auto;width:var(--w);display:block;text-align:left;position:relative;
  opacity:0;transform:translateY(16px);
  transition:opacity .75s var(--e),transform .85s var(--e);
}
.strip.in .tile{opacity:1;transform:none}
.tile__img{display:block;position:relative;width:100%;aspect-ratio:var(--ar);overflow:hidden;background:var(--void-2)}
.tile__img img{position:absolute;left:var(--lx);top:var(--ty);width:var(--sw);height:var(--sh);max-width:none;
  transition:transform 1.2s var(--e)}
.tile:hover .tile__img img{transform:scale(1.05)}
.tile__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(242,239,233,.14);
  transition:box-shadow .45s var(--e);pointer-events:none}
.tile:hover .tile__img::after{box-shadow:inset 0 0 0 1px rgba(242,239,233,.55)}
.tile__cap{display:flex;align-items:center;gap:8px;padding-top:9px;min-height:26px}
.tile__sw{width:8px;height:8px;flex:0 0 auto;border-radius:50%}
.tile__name{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.1vw,19px);line-height:1;color:var(--bone-46);transition:color .3s var(--e)}
.tile:hover .tile__name{color:var(--bone)}

/* lightbox ---------------------------------------------------------------- */
.box{
  position:fixed;inset:0;z-index:800;background:rgba(11,10,12,.95);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,7vw,90px) var(--pad);color:var(--bone);
  opacity:0;pointer-events:none;transition:opacity .45s var(--e);
}
.box.is-open{opacity:1;pointer-events:auto}
.box__inner{display:flex;gap:clamp(20px,4vw,68px);align-items:center;max-width:var(--maxw);width:100%;justify-content:center}
.box__plate{position:relative;height:min(72svh,720px);aspect-ratio:var(--car,.8);flex:0 0 auto;
  transform:scale(.97);transition:transform .6s var(--e)}
.box.is-open .box__plate{transform:none}
.box__plate > img{width:100%;height:100%;object-fit:contain;filter:saturate(.28) brightness(.40);transition:filter .7s var(--e)}
.box__frame{position:absolute;left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh);
  outline:1px solid rgba(244,241,234,.92);box-shadow:0 22px 64px rgba(0,0,0,.55);overflow:hidden}
.box__frame figure{position:absolute;inset:0;margin:0;overflow:hidden}
.box__frame img{position:absolute;left:var(--lx);top:var(--ty);width:var(--sw);height:var(--sh);max-width:none}
.box__meta{max-width:28ch}
.box__meta h2{font-size:clamp(28px,4vw,66px);line-height:.96;margin:0 0 12px;letter-spacing:-.028em}
.box__meta .mono{color:var(--bone-56);margin:0 0 22px}
.box__step{display:flex;align-items:center;gap:12px}
.box__step .lbl{color:var(--bone-56);margin-left:6px}
.box__step .lbl:hover{color:var(--bone)}
.abtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,241,234,.3);
  display:grid;place-items:center;transition:.35s var(--e);flex:0 0 auto}
.abtn:hover{background:var(--bone);color:var(--plate);border-color:var(--bone)}
.abtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.35}
.box__close{position:absolute;top:clamp(16px,2.4vw,30px);right:var(--pad);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-56)}
.box__close:hover{color:var(--bone)}
@media (max-width:900px){
  .box__inner{flex-direction:column;gap:20px}
  .box__plate{height:auto;width:min(76vw,400px)}
  .box__meta{max-width:none;text-align:center}
  .box__step{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .tile{opacity:1;transform:none}
  .box,.box__plate,.tile__img img{transition:none}
}