/* Detroit Projects：整页滚动 + 隐藏滚动条（与 detroit.paris/projects 一致） */
html.passages-page-html{
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html.passages-page-html::-webkit-scrollbar{display:none;width:0;height:0}
body.passages-page{
  --passages-nav-top:clamp(3.75rem,9vh,4.75rem);
  --passages-pad:clamp(1rem,3vw,1.75rem);
  overflow-x:hidden;
  background:#fff;
}
body.passages-page footer[role="contentinfo"] > div{
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--passages-pad);
  padding-right:var(--passages-pad);
  padding-top:clamp(.75rem,1.5vh,1rem);
  padding-bottom:clamp(.5rem,1vh,.75rem);
}
body.passages-page #site-body-wrap{
  box-sizing:border-box;
  padding-top:var(--passages-nav-top);
}

#passages-list-head{
  padding-top:clamp(.5rem,1.5vh,1rem);
}

.passages-shell{
  --passages-ink:#0b0b0b;
  --passages-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  width:100%;
  padding:0 var(--passages-pad) clamp(6rem,22vh,12rem);
  box-sizing:border-box;
  font-family:var(--passages-font);
  color:var(--passages-ink);
}

/* 左列表 + 右预览（对齐 detroit.paris/projects 比例） */
.passages-layout{
  --passages-preview-w:clamp(148px,34vw,460px);
  --passages-preview-gap:clamp(.75rem,2.4vw,3rem);
  display:block;
  position:relative;
  padding-right:calc(var(--passages-preview-w) + var(--passages-preview-gap));
}
.passages-layout.is-detail{padding-right:0}
.passages-layout.is-detail .passages-preview{display:none}

.passages-main{
  min-width:0;
  width:100%;
  max-width:min(100%,920px);
}

.passages-page-title{
  margin:0 0 clamp(.5rem,1.2vh,.75rem);
  scroll-margin-top:calc(var(--passages-nav-top) + .5rem);
  font-family:var(--passages-font);
  font-size:clamp(1rem,1.65vw,1.35rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--passages-ink);
  overflow:visible;
  word-break:break-word;
}

.passages-scroll,
#passages-scroll{
  display:block;
}

/* 搜索 + 分类（Detroit 底线输入） */
.passages-tools{
  flex:0 0 auto;
  margin:clamp(.5rem,1.5vh,1rem) 0 0;
  padding-bottom:clamp(.75rem,2vh,1.25rem);
  display:flex;
  flex-direction:column;
  gap:clamp(.85rem,2vh,1.35rem);
}
.passages-cats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .85rem;
}
.passages-cats__link{
  font-family:var(--passages-font);
  font-size:.6875rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(11,11,11,.38);
  transition:color .15s ease;
}
.passages-cats__link:hover{color:rgba(11,11,11,.72)}
.passages-cats__link.is-active{color:var(--passages-ink)}
.passages-tools__search{
  display:block;
  width:100%;
  max-width:min(100%,18rem);
  margin-left:auto;
}
.passages-tools__search input{
  width:100%;
  height:2rem;
  border:0;
  border-bottom:1px solid rgba(11,11,11,.2);
  border-radius:0;
  background:transparent;
  padding:0;
  font-family:var(--passages-font);
  font-size:.6875rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:lowercase;
  color:var(--passages-ink);
}
.passages-tools__search input::placeholder{
  color:rgba(11,11,11,.34);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:lowercase;
}
.passages-tools__search input:focus{
  outline:none;
  border-bottom-color:var(--passages-ink);
}

/* Detroit 项目列表 */
.passages-list{
  list-style:none;
  margin:0;
  padding:clamp(.5rem,1.5vh,1rem) 0 0;
}
.passages-list-end{
  min-height:max(50vh,20rem);
  pointer-events:none;
}
.passages-row{
  display:block;
  padding:clamp(1rem,2.8vh,2rem) 0;
  cursor:default;
  transition:opacity .2s linear;
}
.passages-row.is-active{opacity:1}
.passages-row.is-dim{opacity:.14}
.passages-row__title{
  margin:0;
  font-size:clamp(1.35rem,5.2vw,2rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
  text-transform:none;
}
.passages-row__title a{
  color:inherit;
  text-decoration:none;
}
.passages-row.is-active .passages-row__title a{color:var(--passages-ink)}
.passages-row.is-dim .passages-row__title a{color:rgba(11,11,11,.88)}
.passages-row__title a:hover{color:var(--passages-ink)}
.passages-row__title mark{
  background:transparent;
  color:inherit;
  padding:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.14em;
}
.passages-row__meta{
  margin:.5rem 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .5rem;
  font-size:clamp(.5625rem,2vw,.625rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,11,11,.42);
  line-height:1.35;
}
.passages-row.is-active .passages-row__meta{color:rgba(11,11,11,.5)}
.passages-row__tag{display:inline}

.passages-empty{
  padding:3rem 0;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,11,11,.38);
}

/* 右侧 fixed 预览：四图纵排右对齐、逐张变宽 */
.passages-preview{
  position:fixed;
  top:var(--passages-nav-top);
  right:var(--passages-pad);
  width:var(--passages-preview-w);
  height:calc(100vh - var(--passages-nav-top));
  display:flex;
  flex-direction:column;
  justify-content:center;
  pointer-events:none;
  padding:clamp(.5rem,2vh,1rem) 0;
  z-index:3;
}
.passages-preview__grid{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(3px,.55vh,7px);
  width:100%;
  flex:0 1 auto;
  height:calc(100vh - var(--passages-nav-top) - 2rem);
  max-height:calc(100vh - var(--passages-nav-top) - 2rem);
}
.passages-preview__cell{
  position:relative;
  flex:1 1 0;
  min-height:0;
  width:var(--cell-w,100%);
  background:#efefef;
  overflow:hidden;
}
.passages-preview__cell[data-slot="0"]{--cell-w:20%}
.passages-preview__cell[data-slot="1"]{--cell-w:48%}
.passages-preview__cell[data-slot="2"]{--cell-w:72%}
.passages-preview__cell[data-slot="3"]{--cell-w:100%}
.passages-preview__cell-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .28s ease;
}
.passages-preview__cell-img.is-visible{opacity:1}
.passages-preview__cell-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .28s ease;
  background:
    linear-gradient(rgba(11,11,11,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,11,.035) 1px,transparent 1px);
  background-size:12px 12px;
}
.passages-preview__cell-fallback.is-visible{opacity:1}
.passages-preview__cell-fallback::before{
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(11,11,11,.12);
}
.passages-preview__cell-fallback[data-accent="1"]{background-color:#f7f7f7}
.passages-preview__cell-fallback[data-accent="2"]{background-color:#f5f6f8}
.passages-preview__cell-fallback[data-accent="3"]{background-color:#f8f6f6}
.passages-preview__cell-fallback[data-accent="4"]{background-color:#f4f6f5}
.passages-preview__cell-fallback[data-accent="5"]{background-color:#f6f5f8}
.passages-preview__cell-letter{
  font-size:clamp(1rem,4.5vw,1.5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:rgba(11,11,11,.7);
}
.passages-preview__caption{display:none}

.passages-shell--detail{
  padding-bottom:clamp(1rem,2.5vh,1.5rem);
}
.passages-article-shell{
  max-width:none;
  padding:clamp(1.25rem,3vh,2.5rem) 0 clamp(1.25rem,3vh,2rem);
}
.passages-layout.is-detail .passages-main{
  max-width:100%;
}
@media(min-width:768px){
  .passages-layout.is-detail .passages-main{
    padding-left:clamp(.5rem,1.25vw,1rem);
    padding-right:clamp(.5rem,1.25vw,1rem);
  }
}
.passages-article-title{
  margin:0;
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:rgba(11,11,11,.95);
}
.passages-article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1rem;
  margin:1.5rem 0 2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(11,11,11,.1);
  font-size:.75rem;
  color:rgba(11,11,11,.5);
}
@media(min-width:768px){.passages-article-meta{font-size:.875rem}}
.passages-icon{
  display:inline-block;
  flex-shrink:0;
  vertical-align:-0.125em;
}
.passages-article-meta span,
.passages-article-meta time,
.passages-article-meta__edit{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
}
.passages-article-nav__dir .passages-icon{
  width:.9em;
  height:.9em;
}
.passages-article-meta__edit{
  color:rgba(11,11,11,.7);
  text-decoration:none;
}
.passages-article-meta__edit:hover{color:#eab308}
.passages-article-body{margin-top:0}
.passages-article-nav{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2rem);
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:clamp(1.75rem,4vh,2.5rem);
  border-top:1px solid rgba(11,11,11,.1);
}
.passages-article-nav__slot{min-width:0}
.passages-article-nav__link{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  min-width:0;
  text-decoration:none;
  color:inherit;
  transition:opacity .15s;
}
.passages-article-nav__link:hover{opacity:.72}
.passages-article-nav__link--next{
  text-align:right;
  align-items:flex-end;
}
.passages-article-nav__dir{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--passages-font);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(11,11,11,.38);
}
.passages-article-nav__title{
  font-family:var(--passages-font);
  font-size:clamp(.875rem,1.45vw,1.05rem);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
  color:rgba(11,11,11,.84);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media(max-width:767px){
  .passages-article-nav{
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  .passages-article-nav__link--next{
    text-align:left;
    align-items:flex-start;
  }
}

@media(min-width:768px){
  .passages-tools{
    flex-direction:row;
    align-items:flex-start;
    gap:clamp(1rem,2.5vw,2rem);
  }
  .passages-cats{
    flex:1;
    min-width:0;
    align-items:flex-start;
  }
  .passages-tools__search{
    flex:0 0 auto;
    width:auto;
    max-width:14rem;
    margin-left:auto;
    padding-top:.05rem;
  }
  .passages-row__title{
    font-size:clamp(2.25rem,3.8vw,3.75rem);
  }
  .passages-row{padding:clamp(1.15rem,3vh,2.35rem) 0}
}

@media(max-width:767px){
  .passages-layout{
    --passages-preview-w:42%;
    --passages-preview-gap:.4rem;
  }
  .passages-main{max-width:100%}
  .passages-tools__search{
    max-width:100%;
    margin-left:0;
  }
  .passages-preview{padding-right:.1rem}
  .passages-preview__grid{
    height:calc(100vh - var(--passages-nav-top) - 1.5rem);
    max-height:calc(100vh - var(--passages-nav-top) - 1.5rem);
    gap:2px;
  }
  .passages-preview__cell[data-slot="0"]{--cell-w:18%}
  .passages-preview__cell[data-slot="1"]{--cell-w:44%}
  .passages-preview__cell[data-slot="2"]{--cell-w:68%}
  .passages-preview__cell[data-slot="3"]{--cell-w:100%}
}