/* works.html specific */

.filters{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 28px var(--pad) 28px 140px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:16px;
}
.filters .lbl{
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ink-3);
  margin-right:8px;
  text-transform:uppercase;
}
.filters .chip{
  background:transparent;
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:100px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ink-2);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  margin-right:8px;
  transition: background .2s, color .2s, border-color .2s;
}
.filters .chip:hover{ border-color:var(--ink); }
.filters .chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.filters .chip .c{
  font-size:9px; letter-spacing:.1em;
  padding:1px 6px;
  background:rgba(0,0,0,.08);
  border-radius:100px;
}
.filters .chip.is-on .c{ background:rgba(255,255,255,.15); }

/* index list */
.works-index{
  padding: 40px var(--pad) 80px 140px;
}
.wi-head, .wi-list li{
  display:grid;
  grid-template-columns: 88px 2.2fr 1fr 1fr 80px 80px;
  gap:24px;
  align-items:baseline;
}
.wi-head{
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.wi-list li{
  padding:24px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition: background .25s, padding .25s;
}
.wi-list li:hover{ background:var(--paper-2); padding-left:16px; padding-right:16px; }
.wi-n{ font-size:11px; letter-spacing:.18em; color:var(--ink-3); }
.wi-title em{
  font-style:normal;
  font-size:28px;
  font-weight:300;
  letter-spacing:-.02em;
  display:block;
  line-height:1;
}
.wi-title .jp{
  font-size:13px;
  color:var(--ink-2);
  margin-top:6px;
  display:block;
}
.wi-type{ font-size:11px; letter-spacing:.12em; color:var(--ink-2); }
.wi-loc{ font-size:13px; color:var(--ink-2); }
.wi-year{ font-size:13px; text-align:right; }
.wi-view{
  font-size:10px;
  letter-spacing:.22em;
  color:var(--ink-3);
  text-align:right;
}
.wi-list li:hover .wi-view{ color:var(--clay); }

/* FEATURE BLOCKS */
.feat{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:64px;
  padding:56px 0;
  border-top:1px solid var(--line);
  align-items:center;
}
.feat.reverse{
  grid-template-columns: 1fr 1.2fr;
}
.feat.reverse .feat-media{ order:2; }
.feat.reverse .feat-body{ order:1; }
.feat-media .ph{ aspect-ratio: 5/4; width:100%; }
.feat-body{ max-width:540px; }
.feat-tag{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-3);
  text-transform:uppercase;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.feat h3{
  font-size:clamp(56px, 6vw, 88px);
  line-height:.94;
  letter-spacing:-.03em;
  font-weight:300;
}
.feat-jp{
  font-size:15px;
  margin-top:16px;
  color:var(--ink-2);
}
.feat-p{
  font-family:var(--f-jp);
  font-size:14px;
  line-height:2.1;
  color:var(--ink-2);
  margin:28px 0;
  max-width:420px;
}
dl.spec{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 32px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
dl.spec dt{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:4px;
}
dl.spec dd{
  font-family:var(--f-jp);
  font-size:14px;
}

/* CTA strip */
.cta-strip{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:56px;
  align-items:end;
}
.cta-strip h2{
  font-size:clamp(72px, 9vw, 140px);
  line-height:0.92;
  letter-spacing:-.03em;
  font-weight:300;
}
.cta-strip h2 em{ font-style:italic; color:#ffe9c9; }
.cta-side p{
  font-size:15px; line-height:2; opacity:.92;
  max-width:420px;
  margin-bottom:24px;
}
.cta-btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 1100px){
  .filters, .works-index{ padding-left:var(--pad); padding-right:var(--pad); }
  .wi-head, .wi-list li{ grid-template-columns: 70px 1.6fr 1fr 60px 60px; }
  .wi-head span:nth-child(4), .wi-list li .wi-loc{ display:none; }
  .feat, .feat.reverse{ grid-template-columns:1fr; gap:32px; }
  .feat.reverse .feat-media{ order:1; }
  .feat.reverse .feat-body{ order:2; }
  .cta-strip{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width: 760px){
  .filters{ padding:18px var(--pad); gap:8px; }
  .filters .chip{ padding:6px 12px; font-size:10px; }
  .wi-head{ display:none; }
  .wi-list li{
    grid-template-columns: 60px 1fr auto;
    gap:8px 16px;
    padding:18px 0;
  }
  .wi-list li > .wi-type, .wi-list li > .wi-view{ display:none; }
  .wi-title em{ font-size:22px; }
  .wi-year{ font-size:11px; }
  .cta-strip h2{ font-size:56px; }
}